@mui/x-data-grid 7.24.0 → 7.25.0

package/modern/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/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { useGridSelector } from "../../hooks/index.js";
-import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
+import { useGridSelectorV8 } from "../../hooks/utils/useGridSelector.js";
+import { gridPreferencePanelSelectorWithLabel, gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
@@ -19,6 +19,21 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+function GridColumnHeaderFilterIconButtonWrapped(props) {
+  if (!props.counter) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridColumnHeaderFilterIconButton, _extends({}, props));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButtonWrapped.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
 function GridColumnHeaderFilterIconButton(props) {
   const {
     counter,
@@ -31,8 +46,8 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const labelId = useId();
+  const isOpen = useGridSelectorV8(apiRef, gridPreferencePanelSelectorWithLabel, labelId);
   const panelId = useId();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
@@ -53,7 +68,6 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const open = preferencePanel.open && preferencePanel.labelId === labelId;
   const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     id: labelId,
     onClick: toggleFilter,
@@ -62,8 +76,8 @@ function GridColumnHeaderFilterIconButton(props) {
     size: "small",
     tabIndex: -1,
     "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": open ? panelId : undefined
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? panelId : undefined
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,
@@ -92,4 +106,4 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTyp
   field: PropTypes.string.isRequired,
   onClick: PropTypes.func
 } : void 0;
-export { GridColumnHeaderFilterIconButton };
+export { GridColumnHeaderFilterIconButtonWrapped as GridColumnHeaderFilterIconButton };

package/modern/components/containers/GridRootStyles.js

@@ -38,50 +38,76 @@ const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-wa
 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,75 +116,151 @@ 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
 }) => {
@@ -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'

package/modern/components/panel/GridPanel.js

@@ -91,7 +91,8 @@ const GridPanel = forwardRef((props, ref) => {
   }, other, {
     ref: ref,
     children: /*#__PURE__*/_jsx(ClickAwayListener, {
-      mouseEvent: "onMouseUp",
+      mouseEvent: "onPointerUp",
+      touchEvent: false,
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -45,9 +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();
+        }
+        buttonProps.onPointerUp?.(event);
+      },
+      onClick: showColumns,
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))

package/modern/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/modern/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/modern/components/toolbar/GridToolbarFilterButton.js

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

package/modern/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.dimensions.rightPinnedWidth > 0 && 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/modern/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);