@mui/x-data-grid 7.24.1 → 7.25.0

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/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/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,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/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);

package/modern/components/virtualization/GridVirtualScroller.js

@@ -20,9 +20,11 @@ import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerF
 import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
 import { GridVirtualScrollbar as Scrollbar } from "./GridVirtualScrollbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "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'],
@@ -33,7 +35,12 @@ const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
 const Scroller = 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%',
@@ -56,7 +63,12 @@ function GridVirtualScroller(props) {
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const overlaysProps = useGridOverlays();
-  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
+  const ownerState = {
+    classes: rootProps.classes,
+    dimensions,
+    loadingOverlayVariant: overlaysProps.loadingOverlayVariant
+  };
+  const classes = useUtilityClasses(ownerState);
   const virtualScroller = useGridVirtualScroller();
   const {
     getContainerProps,
@@ -71,6 +83,7 @@ function GridVirtualScroller(props) {
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
+    ownerState: ownerState,
     children: [/*#__PURE__*/_jsx(GridScrollArea, {
       scrollDirection: "left"
     }), /*#__PURE__*/_jsx(GridScrollArea, {
@@ -78,7 +91,7 @@ function GridVirtualScroller(props) {
     }), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
-      ownerState: rootProps,
+      ownerState: ownerState,
       children: [/*#__PURE__*/_jsxs(TopContainer, {
         children: [!rootProps.unstable_listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "top",

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -19,14 +19,23 @@ const useUtilityClasses = (props, overflowedContent) => {
 const VirtualScrollerContentRoot = 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 = forwardRef(function GridVirtualScrollerContent(props, ref) {
   const rootProps = useGridRootProps();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({}, props, {
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: clsx(classes.root, props.className),
     ref: ref
   }));

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

@@ -500,7 +500,8 @@ export 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/modern/hooks/features/columns/useGridColumns.js

@@ -242,9 +242,13 @@ export 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 = gridVisibleColumnDefinitionsSelector(apiRef).some(col => col.flex && col.flex > 0);
+      if (!hasFlexColumns) {
+        return;
+      }
       setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), apiRef.current.getRootDimensions()));
     }
   };

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

@@ -15,6 +15,7 @@ import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { calculatePinnedRowsHeight, getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
+import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
 import { isJSDOM } from "../../../utils/isJSDOM.js";
 const EMPTY_SIZE = {
   width: 0,
@@ -61,7 +62,7 @@ export 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(gridColumnsTotalWidthSelector(apiRef), 6);
+  const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 1);
   const headersTotalHeight = 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);
@@ -111,6 +112,9 @@ export 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 = calculatePinnedRowsHeight(apiRef);
     const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
@@ -119,7 +123,7 @@ export function useGridDimensions(apiRef, props) {
     const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
       width: nonPinnedColumnsTotalWidth,
-      height: rowsMeta.currentPageTotalHeight
+      height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
     };
     let viewportOuterSize;
     let viewportInnerSize;
@@ -280,12 +284,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/modern/hooks/features/editing/gridEditingSelectors.js

@@ -1,4 +1,10 @@
+import { createSelectorV8 } from "../../../utils/createSelector.js";
 /**
  * Select the row editing state.
  */
-export const gridEditRowsStateSelector = state => state.editRows;
+export const gridEditRowsStateSelector = state => state.editRows;
+export const gridRowIsEditingSelector = createSelectorV8(gridEditRowsStateSelector, (editRows, rowId) => Boolean(editRows[rowId]));
+export const gridEditCellStateSelector = createSelectorV8(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  field
+}) => editRows[rowId]?.[field] ?? null);

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

@@ -1 +1 @@
-export * from "./gridEditingSelectors.js";
+export { gridEditRowsStateSelector } from "./gridEditingSelectors.js";

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

@@ -11,7 +11,7 @@ import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.j
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
-import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
 import { getDefaultCellValue } from "./utils.js";
@@ -442,7 +442,7 @@ export const useGridCellEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   useEnhancedEffect(() => {
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
@@ -451,7 +451,7 @@ export const useGridCellEditing = (apiRef, props) => {
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;
-        const originalId = idToIdLookup[id] ?? id;
+        const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({
             id: originalId,