@mui/x-data-grid 7.25.0 → 7.26.0

package/CHANGELOG.md

@@ -3,6 +3,77 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.26.0
+
+_Feb 7, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Mount and resize performance improvements for the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@arminmeh, @noraleonte, @LukasTy, @KenanYusuf, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.26.0`
+
+- [DataGrid] Avoid `<GridRoot />` double-render pass on mount in SPA mode (#16480) @lauri865
+
+#### `@mui/x-data-grid-pro@7.26.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.26.0`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiContext()` for Pro and Premium packages on React < 19 (#16446) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.26.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.26.0`, plus:
+
+- [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16468) @KenanYusuf
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.26.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@7.26.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.26.0`, plus:
+
+- [DateRangePicker] Fix `currentMonthCalendarPosition` prop behavior on mobile (#16457) @LukasTy
+- [DateRangePicker] Fix vertical alignment for multi input fields (#16490) @noraleonte
+
+### Charts
+
+#### `@mui/x-charts@7.26.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.26.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.26.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.26.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.26.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.26.0`.
+
+### Core
+
+- [core] Fix corepack and pnpm installation in CircleCI (#16452) @flaviendelangle
+
 ## 7.25.0
 
 _Jan 31, 2025_

package/DataGrid/useDataGridComponent.js

@@ -41,7 +41,6 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(paginationStateInitializer, apiRef, props);
@@ -54,10 +53,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);

package/components/GridRow.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
@@ -78,7 +80,10 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const isRowReorderingEnabled = useGridSelectorV8(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = useForkRef(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = useGridSelectorV8(apiRef, gridRowIsEditingSelector, rowId);
+  const editing = useGridSelectorV8(apiRef, gridRowIsEditingSelector, {
+    rowId,
+    editMode: rootProps.editMode
+  });
   const editable = rootProps.editMode === GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -296,7 +301,8 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       role: "presentation",
       className: clsx(gridClasses.cell, gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
-      pinnedRight: pinnedColumns.right.length > 0
+      pinnedRight: pinnedColumns.right.length > 0,
+      borderTop: !isFirstVisible
     })]
   }));
 });

package/components/GridScrollArea.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
+import { GridScrollParams } from '../models/params/gridScrollParams';
 interface ScrollAreaProps {
     scrollDirection: 'left' | 'right';
+    scrollPosition: RefObject<GridScrollParams>;
 }
-declare function GridScrollAreaRaw(props: ScrollAreaProps): React.JSX.Element | null;
-export declare const GridScrollArea: typeof GridScrollAreaRaw;
+declare function GridScrollAreaWrapper(props: ScrollAreaProps): React.JSX.Element | null;
+export declare const GridScrollArea: typeof GridScrollAreaWrapper;
 export {};

package/components/GridScrollArea.js

@@ -8,12 +8,12 @@ import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridApiEventHandler } from "../hooks/utils/useGridApiEventHandler.js";
-import { useGridSelector } from "../hooks/utils/useGridSelector.js";
-import { gridDimensionsSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { useGridSelector, useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
+import { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.js";
-import { gridColumnsTotalWidthSelector } from "../hooks/features/columns/gridColumnsSelector.js";
 import { useTimeout } from "../hooks/utils/useTimeout.js";
 import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.js";
+import { createSelectorV8 } from "../utils/createSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -48,21 +48,38 @@ const GridScrollAreaRawRoot = styled('div', {
     right: 0
   }
 }));
-function GridScrollAreaRaw(props) {
+const offsetSelector = createSelectorV8(gridDimensionsSelector, (dimensions, direction) => {
+  if (direction === 'left') {
+    return dimensions.leftPinnedWidth;
+  }
+  if (direction === 'right') {
+    return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  }
+  return 0;
+});
+function GridScrollAreaWrapper(props) {
+  const apiRef = useGridApiContext();
+  const [dragging, setDragging] = React.useState(false);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  if (!dragging) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props));
+}
+function GridScrollAreaContent(props) {
   const {
-    scrollDirection
+    scrollDirection,
+    scrollPosition
   } = props;
   const rootRef = React.useRef(null);
   const apiRef = useGridApiContext();
   const timeout = useTimeout();
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const scrollPosition = React.useRef({
-    left: 0,
-    top: 0
-  });
+  const sideOffset = useGridSelectorV8(apiRef, offsetSelector, scrollDirection);
   const getCanScrollMore = () => {
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
     if (scrollDirection === 'left') {
       // Only render if the user has not reached yet the start of the list
       return scrollPosition.current.left > 0;
@@ -74,7 +91,6 @@ function GridScrollAreaRaw(props) {
     }
     return false;
   };
-  const [dragging, setDragging] = React.useState(false);
   const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = useGridRootProps();
   const ownerState = _extends({}, rootProps, {
@@ -88,12 +104,11 @@ function GridScrollAreaRaw(props) {
     top: totalHeaderHeight - headerHeight
   };
   if (scrollDirection === 'left') {
-    style.left = dimensions.leftPinnedWidth;
+    style.left = sideOffset;
   } else if (scrollDirection === 'right') {
-    style.right = dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+    style.right = sideOffset;
   }
-  const handleScrolling = newScrollPosition => {
-    scrollPosition.current = newScrollPosition;
+  const handleScrolling = () => {
     setCanScrollMore(getCanScrollMore);
   };
   const handleDragOver = useEventCallback(event => {
@@ -118,16 +133,8 @@ function GridScrollAreaRaw(props) {
       });
     });
   });
-  const handleColumnHeaderDragStart = useEventCallback(() => {
-    setDragging(true);
-  });
-  const handleColumnHeaderDragEnd = useEventCallback(() => {
-    setDragging(false);
-  });
   useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
-  if (!dragging || !canScrollMore) {
+  if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
@@ -138,4 +145,4 @@ function GridScrollAreaRaw(props) {
     style: style
   });
 }
-export const GridScrollArea = fastMemo(GridScrollAreaRaw);
+export const GridScrollArea = fastMemo(GridScrollAreaWrapper);

package/components/GridSkeletonLoadingOverlay.js

@@ -8,8 +8,9 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
+import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
 import { PinnedColumnPosition } from "../internals/constants.js";
+import { gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";

package/components/containers/GridRoot.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
@@ -13,6 +13,7 @@ import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiCon
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
+import { useIsSSR } from "../../hooks/utils/useIsSSR.js";
 import { GridHeader } from "../GridHeader.js";
 import { GridBody, GridFooterPlaceholder } from "../base/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,16 +38,17 @@ const GridRoot = forwardRef(function GridRoot(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const density = useGridSelector(apiRef, gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
-  const handleRef = useForkRef(rootElementRef, ref);
+  const rootMountCallback = React.useCallback(node => {
+    if (node === null) {
+      return;
+    }
+    apiRef.current.publishEvent('rootMount', node);
+  }, [apiRef]);
+  const handleRef = useForkRef(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
-
-  // Our implementation of <NoSsr />
-  const [mountedState, setMountedState] = React.useState(false);
-  useEnhancedEffect(() => {
-    setMountedState(true);
-  }, []);
-  if (!mountedState) {
+  const isSSR = useIsSSR();
+  if (isSSR) {
     return null;
   }
   return /*#__PURE__*/_jsxs(GridRootStyles, _extends({

package/components/containers/GridRootStyles.js

@@ -3,7 +3,6 @@ import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '
 import { gridClasses as c } from "../../constants/gridClasses.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -35,6 +34,7 @@ const separatorIconDragStyles = {
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+const shouldShowBorderTopRightRadiusSelector = state => state.dimensions.hasScrollX && (!state.dimensions.hasScrollY || state.dimensions.scrollbarSize === 0);
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -265,7 +265,7 @@ export const GridRootStyles = styled('div', {
   theme: t
 }) => {
   const apiRef = useGridPrivateApiContext();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const shouldShowBorderTopRightRadius = useGridSelector(apiRef, shouldShowBorderTopRightRadiusSelector);
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
   const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
@@ -417,7 +417,7 @@ export const GridRootStyles = styled('div', {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${c['root--noToolbar']} [aria-rowindex="1"] .${c['columnHeader--last']}`]: {
-      borderTopRightRadius: dimensions.hasScrollX && (!dimensions.hasScrollY || dimensions.scrollbarSize === 0) ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+      borderTopRightRadius: shouldShowBorderTopRightRadius ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
     },
     [`& .${c.columnHeaderCheckbox}, & .${c.cellCheckbox}`]: {
       padding: 0,

package/components/virtualization/GridMainContainer.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { GridDimensions } from '../../hooks/features/dimensions';
 import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
 type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
-    dimensions: GridDimensions;
+    hasScrollX: boolean;
+    hasPinnedRight: boolean;
     loadingOverlayVariant: GridLoadingOverlayVariant | null;
 };
 export declare const GridMainContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<{

package/components/virtualization/GridMainContainer.js

@@ -18,7 +18,7 @@ const Element = styled('div', {
     const {
       ownerState
     } = props;
-    return [styles.main, ownerState.dimensions.rightPinnedWidth > 0 && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
+    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
   }
 })({
   flexGrow: 1,

package/components/virtualization/GridVirtualScroller.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { GridScrollArea } from "../GridScrollArea.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
 import { GridOverlays as Overlays } from "../base/GridOverlays.js";
@@ -23,12 +23,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    dimensions,
+    hasScrollX,
+    hasPinnedRight,
     loadingOverlayVariant
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
-    scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX']
+    root: ['main', hasPinnedRight && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
+    scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -39,7 +40,7 @@ const Scroller = styled('div', {
     const {
       ownerState
     } = props;
-    return [styles.virtualScroller, ownerState.dimensions.hasScrollX && styles['virtualScroller--hasScrollX']];
+    return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
   }
 })({
   position: 'relative',
@@ -58,14 +59,19 @@ const Scroller = styled('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
+const hasPinnedRightSelector = state => state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
+  const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
+  const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
   const overlaysProps = useGridOverlays();
   const ownerState = {
     classes: rootProps.classes,
-    dimensions,
+    hasScrollX,
+    hasPinnedRight,
     loadingOverlayVariant: overlaysProps.loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
@@ -77,18 +83,19 @@ function GridVirtualScroller(props) {
     getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
-    getRows
+    getRows,
+    getScrollAreaProps
   } = virtualScroller;
   const rows = getRows();
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+    children: [/*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "left"
-    }), /*#__PURE__*/_jsx(GridScrollArea, {
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "right"
-    }), /*#__PURE__*/_jsxs(Scroller, _extends({
+    }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: ownerState,
@@ -103,7 +110,7 @@ function GridVirtualScroller(props) {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/_jsx(SpaceFiller, {
+      })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
@@ -111,9 +118,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
     }, getScrollbarVerticalProps())), props.children]
   }));

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessorGroup, GridPipeProcessor } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;
+export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>, enabled?: boolean) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
-export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
+export const useGridRegisterPipeProcessor = (apiRef, group, callback, enabled = true) => {
   const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(() => {
-    registerPreProcessor();
+    if (enabled) {
+      registerPreProcessor();
+    }
   });
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
-    } else {
+    } else if (enabled) {
       registerPreProcessor();
     }
     return () => {
@@ -22,5 +24,5 @@ export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
         cleanup.current = null;
       }
     };
-  }, [registerPreProcessor]);
+  }, [registerPreProcessor, enabled]);
 };

package/hooks/core/useGridStateInitialization.js

@@ -4,7 +4,6 @@ import { useGridApiMethod } from "../utils/index.js";
 import { isFunction } from "../../utils/utils.js";
 export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
-  const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
     controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
@@ -79,7 +78,9 @@ export const useGridStateInitialization = apiRef => {
       });
     }, reason);
   }, [apiRef]);
-  const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
+  const forceUpdate = React.useCallback(() => {
+    // @deprecated - do nothing
+  }, []);
   const publicStateApi = {
     setState,
     forceUpdate

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -7,7 +7,7 @@ import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
-import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
 import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
 import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
@@ -46,19 +46,17 @@ export const useGridColumnHeaders = props => {
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-  React.useEffect(() => {
-    if (apiRef.current.columnHeadersContainerRef.current) {
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-    }
-  }, [apiRef]);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
+  const headerHeight = useGridSelector(apiRef, gridHeaderHeightSelector);
+  const groupHeaderHeight = useGridSelector(apiRef, gridGroupHeaderHeightSelector);
+  const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -130,8 +128,7 @@ export const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       const siblingWithBorderingSeparator = pinnedPosition === PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
       const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
@@ -142,7 +139,7 @@ export const useGridColumnHeaders = props => {
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
-        headerHeight: dimensions.headerHeight,
+        headerHeight: headerHeight,
         isDragging: colDef.field === dragCol,
         colDef: colDef,
         colIndex: columnIndex,
@@ -234,8 +231,7 @@ export const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
       if (pinnedPosition === PinnedColumnPosition.LEFT) {
@@ -250,7 +246,7 @@ export const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.groupHeaderHeight,
+        height: groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -54,11 +54,6 @@ export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../.
  * @category Visible Columns
  */
 export declare const gridColumnPositionsSelector: import("../../..").OutputSelector<GridStateCommunity, number[]>;
-/**
- * Get the summed width of all the visible columns.
- * @category Visible Columns
- */
-export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
 /**
  * Get the filterable columns as an array.
  * @category Columns

package/hooks/features/columns/gridColumnsSelector.js

@@ -107,18 +107,6 @@ export const gridColumnPositionsSelector = createSelectorMemoized(gridVisibleCol
   return positions;
 });
 
-/**
- * Get the summed width of all the visible columns.
- * @category Visible Columns
- */
-export const gridColumnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
-  const colCount = visibleColumns.length;
-  if (colCount === 0) {
-    return 0;
-  }
-  return positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth;
-});
-
 /**
  * Get the filterable columns as an array.
  * @category Columns