@mui/x-data-grid 7.24.1 → 7.25.0

package/node/components/containers/GridRootStyles.js

@@ -45,50 +45,76 @@ const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-wa
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => [{
+  overridesResolver: (props, styles) => [
+  // Root overrides
+  styles.root, {
     [`&.${_gridClasses.gridClasses.autoHeight}`]: styles.autoHeight
   }, {
-    [`&.${_gridClasses.gridClasses.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+    [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+    [`&.${_gridClasses.gridClasses['root--densityStandard']}`]: styles['root--densityStandard']
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+    [`&.${_gridClasses.gridClasses['root--densityComfortable']}`]: styles['root--densityComfortable']
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+    [`&.${_gridClasses.gridClasses['root--densityCompact']}`]: styles['root--densityCompact']
   }, {
-    [`&.${_gridClasses.gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
+    [`&.${_gridClasses.gridClasses['root--disableUserSelection']}`]: styles['root--disableUserSelection']
   }, {
-    [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: styles['root--disableUserSelection']
+    [`&.${_gridClasses.gridClasses['root--noToolbar']}`]: styles['root--noToolbar']
   }, {
-    [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
+    [`&.${_gridClasses.gridClasses.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.
+  {
+    [`& .${_gridClasses.gridClasses.actionsCell}`]: styles.actionsCell
   }, {
-    [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
+    [`& .${_gridClasses.gridClasses.booleanCell}`]: styles.booleanCell
   }, {
     [`& .${_gridClasses.gridClasses.cell}`]: styles.cell
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--editable']}`]: styles['cell--editable']
   }, {
     [`& .${_gridClasses.gridClasses['cell--editing']}`]: styles['cell--editing']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+    [`& .${_gridClasses.gridClasses['cell--flex']}`]: styles['cell--flex']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
-  }, {
-    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
+    [`& .${_gridClasses.gridClasses['cell--pinnedRight']}`]: styles['cell--pinnedRight']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeBottom']}`]: styles['cell--rangeBottom']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeLeft']}`]: styles['cell--rangeLeft']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--selectionMode']}`]: styles['cell--selectionMode']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}`]: styles['cell--withLeftBorder']
   }, {
     [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: styles['cell--withRightBorder']
   }, {
     [`& .${_gridClasses.gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${_gridClasses.gridClasses.cellEmpty}`]: styles.cellEmpty
+  }, {
+    [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: styles.cellOffsetLeft
   }, {
     [`& .${_gridClasses.gridClasses.cellSkeleton}`]: styles.cellSkeleton
   }, {
     [`& .${_gridClasses.gridClasses.checkboxInput}`]: styles.checkboxInput
+  }, {
+    [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter']
   }, {
@@ -97,75 +123,151 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--alignRight']}`]: styles['columnHeader--alignRight']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--dragging']}`]: styles['columnHeader--dragging']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--emptyGroup']}`]: styles['columnHeader--emptyGroup']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']}`]: styles['columnHeader--filledGroup']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--filtered']}`]: styles['columnHeader--filtered']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--last']}`]: styles['columnHeader--last']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: styles['columnHeader--moving']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--numeric']}`]: styles['columnHeader--numeric']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedLeft']}`]: styles['columnHeader--pinnedLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: styles['columnHeader--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: styles['columnHeader--siblingFocused']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--sortable']}`]: styles['columnHeader--sortable']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--sorted']}`]: styles['columnHeader--sorted']
   }, {
-    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
-  }, {
-    [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
+    [`& .${_gridClasses.gridClasses['columnHeader--withLeftBorder']}`]: styles['columnHeader--withLeftBorder']
   }, {
-    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: styles.headerFilterRow
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: styles.columnHeaderTitleContainerContent
+  }, {
+    [`& .${_gridClasses.gridClasses.columnSeparator}`]: styles.columnSeparator
   }, {
     [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}`]: styles['columnSeparator--resizable']
   }, {
     [`& .${_gridClasses.gridClasses['columnSeparator--resizing']}`]: styles['columnSeparator--resizing']
   }, {
-    [`& .${_gridClasses.gridClasses.columnSeparator}`]: styles.columnSeparator
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: styles['columnSeparator--sideLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideRight']}`]: styles['columnSeparator--sideRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['container--bottom']}`]: styles['container--bottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['container--top']}`]: styles['container--top']
+  }, {
+    [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+  }, {
+    [`& .${_gridClasses.gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
+  }, {
+    [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {
     [`& .${_gridClasses.gridClasses.filterIcon}`]: styles.filterIcon
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: styles['filler--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--pinnedLeft']}`]: styles['filler--pinnedLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--pinnedRight']}`]: styles['filler--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: styles.groupingCriteriaCell
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellToggle}`]: styles.groupingCriteriaCellToggle
+  }, {
+    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: styles.headerFilterRow
   }, {
     [`& .${_gridClasses.gridClasses.iconSeparator}`]: styles.iconSeparator
   }, {
     [`& .${_gridClasses.gridClasses.menuIcon}`]: styles.menuIcon
   }, {
     [`& .${_gridClasses.gridClasses.menuIconButton}`]: styles.menuIconButton
+  }, {
+    [`& .${_gridClasses.gridClasses.menuList}`]: styles.menuList
   }, {
     [`& .${_gridClasses.gridClasses.menuOpen}`]: styles.menuOpen
   }, {
-    [`& .${_gridClasses.gridClasses.menuList}`]: styles.menuList
+    [`& .${_gridClasses.gridClasses.overlayWrapperInner}`]: styles.overlayWrapperInner
   }, {
-    [`& .${_gridClasses.gridClasses['row--editable']}`]: styles['row--editable']
+    [`& .${_gridClasses.gridClasses.pinnedRows}`]: styles.pinnedRows
   }, {
-    [`& .${_gridClasses.gridClasses['row--editing']}`]: styles['row--editing']
+    [`& .${_gridClasses.gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
   }, {
-    [`& .${_gridClasses.gridClasses['row--dragging']}`]: styles['row--dragging']
+    [`& .${_gridClasses.gridClasses['pinnedRows--top']}`]: styles['pinnedRows--top']
   }, {
     [`& .${_gridClasses.gridClasses.row}`]: styles.row
   }, {
-    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+    [`& .${_gridClasses.gridClasses['row--borderBottom']}`]: styles['row--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--detailPanelExpanded']}`]: styles['row--detailPanelExpanded']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--dragging']}`]: styles['row--dragging']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']}`]: styles['row--dynamicHeight']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--editable']}`]: styles['row--editable']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--firstVisible']}`]: styles['row--firstVisible']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--lastVisible']}`]: styles['row--lastVisible']
   }, {
     [`& .${_gridClasses.gridClasses.rowReorderCell}`]: styles.rowReorderCell
   }, {
     [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
   }, {
-    [`& .${_gridClasses.gridClasses.sortIcon}`]: styles.sortIcon
+    [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: styles.rowReorderCellContainer
   }, {
-    [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
+    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+    [`& .${_gridClasses.gridClasses.rowSkeleton}`]: styles.rowSkeleton
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+    [`& .${_gridClasses.gridClasses.scrollbar}`]: styles.scrollbar
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+    [`& .${_gridClasses.gridClasses['scrollbar--horizontal']}`]: styles['scrollbar--horizontal']
   }, {
-    [`& .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+    [`& .${_gridClasses.gridClasses['scrollbar--vertical']}`]: styles['scrollbar--vertical']
   }, {
-    [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+    [`& .${_gridClasses.gridClasses.scrollbarFiller}`]: styles.scrollbarFiller
   }, {
-    [`& .${_gridClasses.gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
-  }, styles.root]
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--header']}`]: styles['scrollbarFiller--header']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses.sortIcon}`]: styles.sortIcon
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
+  }]
 })(({
   theme: t
 }) => {
@@ -262,10 +364,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         overflow: 'visible !important'
       },
       '@media (hover: hover)': {
-        [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
-          width: '0 !important',
-          visibility: 'hidden !important'
-        },
         [`& .${_gridClasses.gridClasses.menuIcon}`]: {
           width: '0 !important',
           visibility: 'hidden !important'

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -53,14 +53,15 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forward
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {}),
-      onClick: showColumns,
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.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/node/components/toolbar/GridToolbarDensitySelector.js

@@ -102,9 +102,9 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
         "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/node/components/toolbar/GridToolbarExportContainer.js

@@ -60,9 +60,9 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
         "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/node/components/toolbar/GridToolbarFilterButton.js

@@ -117,14 +117,15 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
         color: "primary"
       }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.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/node/components/virtualization/GridMainContainer.js

@@ -22,7 +22,12 @@ const GridPanelAnchor = (0, _system.styled)('div')({
 const Element = (0, _system.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',
@@ -31,11 +36,14 @@ const Element = (0, _system.styled)('div', {
   flexDirection: 'column'
 });
 const GridMainContainer = exports.GridMainContainer = (0, _forwardRef.forwardRef)((props, ref) => {
+  const {
+    ownerState
+  } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, (0, _extends2.default)({
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, rootProps.slotProps?.main, {

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -74,26 +74,27 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.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 = (0, _utils.unstable_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 = (0, _utils.unstable_useEventCallback)(() => {
@@ -114,7 +115,6 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
     const options = {
-      capture: true,
       passive: true
     };
     scroller.addEventListener('scroll', onScrollerScroll, options);

package/node/components/virtualization/GridVirtualScroller.js

@@ -28,9 +28,11 @@ var _GridVirtualScrollerFiller = require("./GridVirtualScrollerFiller");
 var _GridVirtualScrollerRenderZone = require("./GridVirtualScrollerRenderZone");
 var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    dimensions,
+    loadingOverlayVariant
   } = ownerState;
   const slots = {
     root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
@@ -41,7 +43,12 @@ const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
 const Scroller = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
-  overridesResolver: (props, styles) => styles.virtualScroller
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScroller, ownerState.dimensions.hasScrollX && styles['virtualScroller--hasScrollX']];
+  }
 })({
   position: 'relative',
   height: '100%',
@@ -64,7 +71,12 @@ function GridVirtualScroller(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
   const overlaysProps = (0, _useGridOverlays.useGridOverlays)();
-  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
+  const ownerState = {
+    classes: rootProps.classes,
+    dimensions,
+    loadingOverlayVariant: overlaysProps.loadingOverlayVariant
+  };
+  const classes = useUtilityClasses(ownerState);
   const virtualScroller = (0, _useGridVirtualScroller.useGridVirtualScroller)();
   const {
     getContainerProps,
@@ -79,6 +91,7 @@ function GridVirtualScroller(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
     className: classes.root
   }, getContainerProps(), {
+    ownerState: ownerState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
       scrollDirection: "left"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
@@ -86,7 +99,7 @@ function GridVirtualScroller(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
       className: classes.scroller
     }, getScrollerProps(), {
-      ownerState: rootProps,
+      ownerState: ownerState,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, {
         children: [!rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "top",

package/node/components/virtualization/GridVirtualScrollerContent.js

@@ -27,14 +27,23 @@ const useUtilityClasses = (props, overflowedContent) => {
 const VirtualScrollerContentRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
-  overridesResolver: (props, styles) => styles.virtualScrollerContent
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
+  }
 })({});
 const GridVirtualScrollerContent = exports.GridVirtualScrollerContent = (0, _forwardRef.forwardRef)(function GridVirtualScrollerContent(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerContentRoot, (0, _extends2.default)({}, props, {
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, props.className),
     ref: ref
   }));

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

@@ -509,7 +509,8 @@ const useGridColumnResize = (apiRef, props) => {
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
         const totalWidth = visibleColumns.reduce((total, column) => total + (widthByField[column.field] ?? column.computedWidth ?? column.width), 0);
-        const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
+        const dimensions = apiRef.current.getRootDimensions();
+        const availableWidth = dimensions.viewportInnerSize.width;
         const remainingWidth = availableWidth - totalWidth;
         if (remainingWidth > 0) {
           const widthPerColumn = remainingWidth / (newColumns.length || 1);

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

@@ -252,9 +252,13 @@ function useGridColumns(apiRef, props) {
    */
 
   const prevInnerWidth = React.useRef(null);
-  const handleGridSizeChange = viewportInnerSize => {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
+  const handleGridSizeChange = size => {
+    if (prevInnerWidth.current !== size.width) {
+      prevInnerWidth.current = size.width;
+      const hasFlexColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).some(col => col.flex && col.flex > 0);
+      if (!hasFlexColumns) {
+        return;
+      }
       setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state), apiRef.current.getRootDimensions()));
     }
   };

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

@@ -24,6 +24,7 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
+var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
 const EMPTY_SIZE = {
   width: 0,
@@ -71,7 +72,7 @@ function useGridDimensions(apiRef, props) {
   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 columnsTotalWidth = (0, _roundToDecimalPlaces.roundToDecimalPlaces)((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 1);
   const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
@@ -121,6 +122,9 @@ function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const updateDimensions = React.useCallback(() => {
+    // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
+    // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
+    // https://github.com/mui/mui-x/issues/15721
     const rootElement = apiRef.current.rootElementRef.current;
     const pinnedRowsHeight = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
     const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
@@ -129,7 +133,7 @@ function useGridDimensions(apiRef, props) {
     const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
       width: nonPinnedColumnsTotalWidth,
-      height: rowsMeta.currentPageTotalHeight
+      height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(rowsMeta.currentPageTotalHeight, 1)
     };
     let viewportOuterSize;
     let viewportInnerSize;
@@ -290,12 +294,6 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
   rootElement.removeChild(scrollDiv);
   return size;
 }
-
-// Get rid of floating point imprecision errors
-// https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
-function roundToDecimalPlaces(value, decimals) {
-  return Math.round(value * 10 ** decimals) / 10 ** decimals;
-}
 function areElementSizesEqual(a, b) {
   return a.width === b.width && a.height === b.height;
 }

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

@@ -3,9 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridEditRowsStateSelector = void 0;
+exports.gridRowIsEditingSelector = exports.gridEditRowsStateSelector = exports.gridEditCellStateSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
 /**
  * Select the row editing state.
  */
 const gridEditRowsStateSelector = state => state.editRows;
-exports.gridEditRowsStateSelector = gridEditRowsStateSelector;
+exports.gridEditRowsStateSelector = gridEditRowsStateSelector;
+const gridRowIsEditingSelector = exports.gridRowIsEditingSelector = (0, _createSelector.createSelectorV8)(gridEditRowsStateSelector, (editRows, rowId) => Boolean(editRows[rowId]));
+const gridEditCellStateSelector = exports.gridEditCellStateSelector = (0, _createSelector.createSelectorV8)(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  field
+}) => editRows[rowId]?.[field] ?? null);

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

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _gridEditingSelectors = require("./gridEditingSelectors");
-Object.keys(_gridEditingSelectors).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridEditingSelectors[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridEditingSelectors[key];
-    }
-  });
-});
+Object.defineProperty(exports, "gridEditRowsStateSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridEditingSelectors.gridEditRowsStateSelector;
+  }
+});
+var _gridEditingSelectors = require("./gridEditingSelectors");

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

@@ -450,7 +450,7 @@ const useGridCellEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
@@ -459,7 +459,7 @@ const useGridCellEditing = (apiRef, props) => {
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || _gridEditRowModel.GridCellModes.View;
-        const originalId = idToIdLookup[id] ?? id;
+        const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
         if (params.mode === _gridEditRowModel.GridCellModes.Edit && prevMode === _gridEditRowModel.GridCellModes.View) {
           updateStateToStartCellEditMode((0, _extends2.default)({
             id: originalId,