@mui/x-data-grid 7.24.1 → 7.26.0

package/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "row", "rowId", "rowNode", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -12,13 +12,14 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
-import { useGridSelector, objectShallowCompare } from "../../hooks/utils/useGridSelector.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector, useGridSelectorV8 } from "../../hooks/utils/useGridSelector.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { gridFocusCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
+import { gridFocusCellSelector, gridTabIndexCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import { PinnedColumnPosition } from "../../internals/constants.js";
 import { gridRowSpanningHiddenCellsSelector, gridRowSpanningSpannedCellsSelector } from "../../hooks/features/rows/gridRowSpanningSelectors.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { gridEditCellStateSelector } from "../../hooks/features/editing/gridEditingSelectors.js";
 import { attachPinnedStyle } from "../../internals/utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPinnedColumnPositionLookup = {
@@ -27,30 +28,6 @@ export const gridPinnedColumnPositionLookup = {
   [PinnedColumnPosition.NONE]: undefined,
   [PinnedColumnPosition.VIRTUAL]: undefined
 };
-const EMPTY_CELL_PARAMS = {
-  id: -1,
-  field: '__unset__',
-  row: {},
-  rowNode: {
-    id: -1,
-    depth: 0,
-    type: 'leaf',
-    parent: -1,
-    groupingKey: null
-  },
-  colDef: {
-    type: 'string',
-    field: '__unset__',
-    computedWidth: 0
-  },
-  cellMode: GridCellModes.View,
-  hasFocus: false,
-  tabIndex: -1,
-  value: null,
-  formattedValue: '__unset__',
-  isEditable: false,
-  api: {}
-};
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -74,8 +51,9 @@ let warnedOnce = false;
 const GridCell = forwardRef(function GridCell(props, ref) {
   const {
       column,
+      row,
       rowId,
-      editCellState,
+      rowNode,
       align,
       colIndex,
       width,
@@ -99,22 +77,29 @@ const GridCell = forwardRef(function GridCell(props, ref) {
       onDragOver
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const isRtl = useRtl();
   const field = column.field;
-  const cellParams = useGridSelector(apiRef, () => {
-    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
-    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
-    // updated, while `rowId`/`fieldId` reference an entry in the old state.
-    const row = apiRef.current.getRow(rowId);
-    if (!row) {
-      return EMPTY_CELL_PARAMS;
-    }
-    const result = apiRef.current.getCellParams(rowId, field);
-    result.api = apiRef.current;
-    return result;
-  }, objectShallowCompare);
+  const editCellState = useGridSelectorV8(apiRef, gridEditCellStateSelector, {
+    rowId,
+    field
+  });
+  const cellMode = editCellState ? GridCellModes.Edit : GridCellModes.View;
+  const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
+    colDef: column,
+    cellMode,
+    rowNode: rowNode,
+    tabIndex: useGridSelector(apiRef, () => {
+      const cellTabIndex = gridTabIndexCellSelector(apiRef);
+      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+    }),
+    hasFocus: useGridSelector(apiRef, () => {
+      const focus = gridFocusCellSelector(apiRef);
+      return focus?.id === rowId && focus.field === field;
+    })
+  });
+  cellParams.api = apiRef.current;
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field
@@ -122,7 +107,6 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   const hiddenCells = useGridSelector(apiRef, gridRowSpanningHiddenCellsSelector);
   const spannedCells = useGridSelector(apiRef, gridRowSpanningSpannedCellsSelector);
   const {
-    cellMode,
     hasFocus,
     isEditable = false,
     value
@@ -244,9 +228,6 @@ const GridCell = forwardRef(function GridCell(props, ref) {
       }, style)
     });
   }
-  if (cellParams === EMPTY_CELL_PARAMS) {
-    return null;
-  }
   let handleFocus = other.onFocus;
   if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
@@ -330,16 +311,12 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   colSpan: PropTypes.number,
   column: PropTypes.object.isRequired,
   disableDragEvents: PropTypes.bool,
-  editCellState: PropTypes.shape({
-    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-    isProcessingProps: PropTypes.bool,
-    isValidating: PropTypes.bool,
-    value: PropTypes.any
-  }),
   isNotVisible: PropTypes.bool.isRequired,
   pinnedOffset: PropTypes.number,
   pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
+  row: PropTypes.object.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  rowNode: PropTypes.object.isRequired,
   showLeftBorder: PropTypes.bool.isRequired,
   showRightBorder: PropTypes.bool.isRequired,
   width: PropTypes.number.isRequired

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,53 +34,80 @@ 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',
-  overridesResolver: (props, styles) => [{
+  overridesResolver: (props, styles) => [
+  // Root overrides
+  styles.root, {
     [`&.${c.autoHeight}`]: styles.autoHeight
   }, {
-    [`&.${c.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+    [`&.${c.autosizing}`]: styles.autosizing
   }, {
-    [`&.${c['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+    [`&.${c['root--densityStandard']}`]: styles['root--densityStandard']
   }, {
-    [`&.${c['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+    [`&.${c['root--densityComfortable']}`]: styles['root--densityComfortable']
   }, {
-    [`&.${c['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+    [`&.${c['root--densityCompact']}`]: styles['root--densityCompact']
   }, {
-    [`&.${c.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
+    [`&.${c['root--disableUserSelection']}`]: styles['root--disableUserSelection']
   }, {
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: styles['root--disableUserSelection']
+    [`&.${c['root--noToolbar']}`]: styles['root--noToolbar']
   }, {
-    [`&.${c.autosizing}`]: styles.autosizing
+    [`&.${c.withVerticalBorder}`]: styles.withVerticalBorder
+  },
+  // Child element overrides
+  // - Only declare overrides here for class names that are not applied to `styled` components.
+  // - For `styled` components, declare overrides in the component itself.
+  {
+    [`& .${c.actionsCell}`]: styles.actionsCell
   }, {
-    [`& .${c.editBooleanCell}`]: styles.editBooleanCell
+    [`& .${c.booleanCell}`]: styles.booleanCell
   }, {
     [`& .${c.cell}`]: styles.cell
+  }, {
+    [`& .${c['cell--editable']}`]: styles['cell--editable']
   }, {
     [`& .${c['cell--editing']}`]: styles['cell--editing']
   }, {
-    [`& .${c['cell--textCenter']}`]: styles['cell--textCenter']
+    [`& .${c['cell--flex']}`]: styles['cell--flex']
   }, {
-    [`& .${c['cell--textLeft']}`]: styles['cell--textLeft']
+    [`& .${c['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
   }, {
-    [`& .${c['cell--textRight']}`]: styles['cell--textRight']
-  }, {
-    [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop']
+    [`& .${c['cell--pinnedRight']}`]: styles['cell--pinnedRight']
   }, {
     [`& .${c['cell--rangeBottom']}`]: styles['cell--rangeBottom']
   }, {
     [`& .${c['cell--rangeLeft']}`]: styles['cell--rangeLeft']
   }, {
     [`& .${c['cell--rangeRight']}`]: styles['cell--rangeRight']
+  }, {
+    [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop']
+  }, {
+    [`& .${c['cell--selectionMode']}`]: styles['cell--selectionMode']
+  }, {
+    [`& .${c['cell--textCenter']}`]: styles['cell--textCenter']
+  }, {
+    [`& .${c['cell--textLeft']}`]: styles['cell--textLeft']
+  }, {
+    [`& .${c['cell--textRight']}`]: styles['cell--textRight']
+  }, {
+    [`& .${c['cell--withLeftBorder']}`]: styles['cell--withLeftBorder']
   }, {
     [`& .${c['cell--withRightBorder']}`]: styles['cell--withRightBorder']
   }, {
     [`& .${c.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${c.cellEmpty}`]: styles.cellEmpty
+  }, {
+    [`& .${c.cellOffsetLeft}`]: styles.cellOffsetLeft
   }, {
     [`& .${c.cellSkeleton}`]: styles.cellSkeleton
   }, {
     [`& .${c.checkboxInput}`]: styles.checkboxInput
+  }, {
+    [`& .${c.columnHeader}`]: styles.columnHeader
   }, {
     [`& .${c['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter']
   }, {
@@ -90,80 +116,156 @@ export const GridRootStyles = styled('div', {
     [`& .${c['columnHeader--alignRight']}`]: styles['columnHeader--alignRight']
   }, {
     [`& .${c['columnHeader--dragging']}`]: styles['columnHeader--dragging']
+  }, {
+    [`& .${c['columnHeader--emptyGroup']}`]: styles['columnHeader--emptyGroup']
+  }, {
+    [`& .${c['columnHeader--filledGroup']}`]: styles['columnHeader--filledGroup']
+  }, {
+    [`& .${c['columnHeader--filtered']}`]: styles['columnHeader--filtered']
+  }, {
+    [`& .${c['columnHeader--last']}`]: styles['columnHeader--last']
+  }, {
+    [`& .${c['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned']
   }, {
     [`& .${c['columnHeader--moving']}`]: styles['columnHeader--moving']
   }, {
     [`& .${c['columnHeader--numeric']}`]: styles['columnHeader--numeric']
+  }, {
+    [`& .${c['columnHeader--pinnedLeft']}`]: styles['columnHeader--pinnedLeft']
+  }, {
+    [`& .${c['columnHeader--pinnedRight']}`]: styles['columnHeader--pinnedRight']
+  }, {
+    [`& .${c['columnHeader--siblingFocused']}`]: styles['columnHeader--siblingFocused']
   }, {
     [`& .${c['columnHeader--sortable']}`]: styles['columnHeader--sortable']
   }, {
     [`& .${c['columnHeader--sorted']}`]: styles['columnHeader--sorted']
   }, {
-    [`& .${c['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
-  }, {
-    [`& .${c.columnHeader}`]: styles.columnHeader
+    [`& .${c['columnHeader--withLeftBorder']}`]: styles['columnHeader--withLeftBorder']
   }, {
-    [`& .${c.headerFilterRow}`]: styles.headerFilterRow
+    [`& .${c['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
   }, {
     [`& .${c.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
   }, {
     [`& .${c.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer
   }, {
     [`& .${c.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer
+  }, {
+    [`& .${c.columnHeaderTitleContainerContent}`]: styles.columnHeaderTitleContainerContent
+  }, {
+    [`& .${c.columnSeparator}`]: styles.columnSeparator
   }, {
     [`& .${c['columnSeparator--resizable']}`]: styles['columnSeparator--resizable']
   }, {
     [`& .${c['columnSeparator--resizing']}`]: styles['columnSeparator--resizing']
   }, {
-    [`& .${c.columnSeparator}`]: styles.columnSeparator
+    [`& .${c['columnSeparator--sideLeft']}`]: styles['columnSeparator--sideLeft']
+  }, {
+    [`& .${c['columnSeparator--sideRight']}`]: styles['columnSeparator--sideRight']
+  }, {
+    [`& .${c['container--bottom']}`]: styles['container--bottom']
+  }, {
+    [`& .${c['container--top']}`]: styles['container--top']
+  }, {
+    [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+  }, {
+    [`& .${c['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
+  }, {
+    [`& .${c.editBooleanCell}`]: styles.editBooleanCell
   }, {
     [`& .${c.filterIcon}`]: styles.filterIcon
+  }, {
+    [`& .${c['filler--borderBottom']}`]: styles['filler--borderBottom']
+  }, {
+    [`& .${c['filler--pinnedLeft']}`]: styles['filler--pinnedLeft']
+  }, {
+    [`& .${c['filler--pinnedRight']}`]: styles['filler--pinnedRight']
+  }, {
+    [`& .${c.groupingCriteriaCell}`]: styles.groupingCriteriaCell
+  }, {
+    [`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+  }, {
+    [`& .${c.groupingCriteriaCellToggle}`]: styles.groupingCriteriaCellToggle
+  }, {
+    [`& .${c.headerFilterRow}`]: styles.headerFilterRow
   }, {
     [`& .${c.iconSeparator}`]: styles.iconSeparator
   }, {
     [`& .${c.menuIcon}`]: styles.menuIcon
   }, {
     [`& .${c.menuIconButton}`]: styles.menuIconButton
+  }, {
+    [`& .${c.menuList}`]: styles.menuList
   }, {
     [`& .${c.menuOpen}`]: styles.menuOpen
   }, {
-    [`& .${c.menuList}`]: styles.menuList
+    [`& .${c.overlayWrapperInner}`]: styles.overlayWrapperInner
   }, {
-    [`& .${c['row--editable']}`]: styles['row--editable']
+    [`& .${c.pinnedRows}`]: styles.pinnedRows
   }, {
-    [`& .${c['row--editing']}`]: styles['row--editing']
+    [`& .${c['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
   }, {
-    [`& .${c['row--dragging']}`]: styles['row--dragging']
+    [`& .${c['pinnedRows--top']}`]: styles['pinnedRows--top']
   }, {
     [`& .${c.row}`]: styles.row
   }, {
-    [`& .${c.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+    [`& .${c['row--borderBottom']}`]: styles['row--borderBottom']
+  }, {
+    [`& .${c['row--detailPanelExpanded']}`]: styles['row--detailPanelExpanded']
+  }, {
+    [`& .${c['row--dragging']}`]: styles['row--dragging']
+  }, {
+    [`& .${c['row--dynamicHeight']}`]: styles['row--dynamicHeight']
+  }, {
+    [`& .${c['row--editable']}`]: styles['row--editable']
+  }, {
+    [`& .${c['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${c['row--firstVisible']}`]: styles['row--firstVisible']
+  }, {
+    [`& .${c['row--lastVisible']}`]: styles['row--lastVisible']
   }, {
     [`& .${c.rowReorderCell}`]: styles.rowReorderCell
   }, {
     [`& .${c['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
   }, {
-    [`& .${c.sortIcon}`]: styles.sortIcon
+    [`& .${c.rowReorderCellContainer}`]: styles.rowReorderCellContainer
   }, {
-    [`& .${c.withBorderColor}`]: styles.withBorderColor
+    [`& .${c.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
   }, {
-    [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+    [`& .${c.rowSkeleton}`]: styles.rowSkeleton
   }, {
-    [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+    [`& .${c.scrollbar}`]: styles.scrollbar
   }, {
-    [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+    [`& .${c['scrollbar--horizontal']}`]: styles['scrollbar--horizontal']
   }, {
-    [`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+    [`& .${c['scrollbar--vertical']}`]: styles['scrollbar--vertical']
   }, {
-    [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+    [`& .${c.scrollbarFiller}`]: styles.scrollbarFiller
   }, {
-    [`& .${c['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
-  }, styles.root]
+    [`& .${c['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom']
+  }, {
+    [`& .${c['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop']
+  }, {
+    [`& .${c['scrollbarFiller--header']}`]: styles['scrollbarFiller--header']
+  }, {
+    [`& .${c['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight']
+  }, {
+    [`& .${c.sortIcon}`]: styles.sortIcon
+  }, {
+    [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+  }, {
+    [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${c.withBorderColor}`]: styles.withBorderColor
+  }]
 })(({
   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;
@@ -255,10 +357,6 @@ export const GridRootStyles = styled('div', {
         overflow: 'visible !important'
       },
       '@media (hover: hover)': {
-        [`& .${c.iconButtonContainer}`]: {
-          width: '0 !important',
-          visibility: 'hidden !important'
-        },
         [`& .${c.menuIcon}`]: {
           width: '0 !important',
           visibility: 'hidden !important'
@@ -319,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/toolbar/GridToolbarColumnsButton.js

@@ -45,14 +45,15 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {}),
-      onClick: showColumns,
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       onPointerUp: event => {
         if (preferencePanel.open) {
           event.stopPropagation();
         }
-      }
-    }, rootProps.slotProps?.baseButton, buttonProps, {
+        buttonProps.onPointerUp?.(event);
+      },
+      onClick: showColumns,
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))

package/components/toolbar/GridToolbarDensitySelector.js

@@ -94,9 +94,9 @@ const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelecto
         "aria-haspopup": "menu",
         "aria-expanded": open,
         "aria-controls": open ? densityMenuId : undefined,
-        id: densityButtonId,
-        onClick: handleDensitySelectorOpen
+        id: densityButtonId
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        onClick: handleDensitySelectorOpen,
         ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))

package/components/toolbar/GridToolbarExportContainer.js

@@ -52,9 +52,9 @@ const GridToolbarExportContainer = forwardRef(function GridToolbarExportContaine
         "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
         "aria-haspopup": "menu",
         "aria-controls": open ? exportMenuId : undefined,
-        id: exportButtonId,
-        onClick: handleMenuOpen
+        id: exportButtonId
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        onClick: handleMenuOpen,
         ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarExport')
       }))

package/components/toolbar/GridToolbarFilterButton.js

@@ -109,14 +109,15 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
         color: "primary"
       }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
-      })),
+      }))
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       onClick: toggleFilter,
       onPointerUp: event => {
         if (preferencePanel.open) {
           event.stopPropagation();
         }
-      }
-    }, rootProps.slotProps?.baseButton, buttonProps, {
+        buttonProps.onPointerUp?.(event);
+      },
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))

package/components/virtualization/GridMainContainer.d.ts

@@ -1,8 +1,18 @@
 import * as React from 'react';
+import { DataGridProcessedProps } from '../../models/props/DataGridProps';
+import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
+type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
+    hasScrollX: boolean;
+    hasPinnedRight: boolean;
+    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+};
 export declare const GridMainContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<{
     className: string;
+    ownerState: OwnerState;
 }>> | React.ForwardRefExoticComponent<{
     className: string;
+    ownerState: OwnerState;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/virtualization/GridMainContainer.js

@@ -14,7 +14,12 @@ const GridPanelAnchor = styled('div')({
 const Element = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Main',
-  overridesResolver: (props, styles) => styles.main
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
+  }
 })({
   flexGrow: 1,
   position: 'relative',
@@ -23,11 +28,14 @@ const Element = styled('div', {
   flexDirection: 'column'
 });
 export const GridMainContainer = forwardRef((props, ref) => {
+  const {
+    ownerState
+  } = props;
   const rootProps = useGridRootProps();
   const configuration = useGridConfiguration();
   const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/_jsxs(Element, _extends({
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, rootProps.slotProps?.main, {

package/components/virtualization/GridVirtualScrollbar.d.ts

@@ -2,6 +2,10 @@ import * as React from 'react';
 type Position = 'vertical' | 'horizontal';
 type GridVirtualScrollbarProps = {
     position: Position;
+    scrollPosition: React.RefObject<{
+        left: number;
+        top: number;
+    }>;
 };
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/components/virtualization/GridVirtualScrollbar.js

@@ -67,26 +67,27 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
   const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   const hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
   const contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
   const scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
   const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
   const onScrollerScroll = useEventCallback(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    const scrollPosition = props.scrollPosition.current;
     if (!scrollbar) {
       return;
     }
-    if (scroller[propertyScroll] === lastPosition.current) {
+    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
       return;
     }
-    lastPosition.current = scroller[propertyScroll];
+    lastPosition.current = scrollPosition[propertyScrollPosition];
     if (isLocked.current) {
       isLocked.current = false;
       return;
     }
     isLocked.current = true;
-    const value = scroller[propertyScroll] / contentSize;
+    const value = scrollPosition[propertyScrollPosition] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
   });
   const onScrollbarScroll = useEventCallback(() => {
@@ -107,7 +108,6 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
     const options = {
-      capture: true,
       passive: true
     };
     scroller.addEventListener('scroll', onScrollerScroll, options);