@mui/x-data-grid 7.29.8 → 7.29.9

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.29.9
+
+_Aug 7, 2025_
+
+We'd like to extend a big thank you to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@nusr
+
+The following are all team members who have contributed to this release:
+@cherniavskii, @mapache-salvaje, @MBilalShafi, @rita-codes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.29.9`
+
+- [DataGrid] Do not call `preProcessEditCellProps()` if cell is not editable based on `isCellEditable()` (#19082) @nusr
+
+#### `@mui/x-data-grid-pro@7.29.9` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@7.29.9`, plus:
+
+- [DataGridPro] Fix row ordering not auto-scrolling when moving beyond viewport (#18718) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.29.9` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@7.29.9`.
+
+### Docs
+
+- [docs] Audit and revise the Data Grid Pro row docs (#18629) @mapache-salvaje
+- [docs] Fix `size` column filtering in files tree demo (#18728) @cherniavskii
+
+### Miscellaneous
+
+- Update readme publish release command V7 (#18684) @rita-codes
+
 ## v7.29.8
 
 _Jul 4, 2025_

package/components/GridScrollArea.d.ts

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

package/components/GridScrollArea.js

@@ -1,11 +1,12 @@
 'use client';
 
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -16,6 +17,7 @@ import { gridDensityFactorSelector } from "../hooks/features/density/densitySele
 import { useTimeout } from "../hooks/utils/useTimeout.js";
 import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.js";
 import { createSelectorV8 } from "../utils/createSelector.js";
+import { gridRowsMetaSelector } from "../hooks/features/rows/gridRowsMetaSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -36,18 +38,39 @@ const GridScrollAreaRawRoot = styled('div', {
     [`&.${gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
   }, {
     [`&.${gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, {
+    [`&.${gridClasses['scrollArea--up']}`]: styles['scrollArea--up']
+  }, {
+    [`&.${gridClasses['scrollArea--down']}`]: styles['scrollArea--down']
   }, styles.scrollArea]
 })(() => ({
   position: 'absolute',
-  top: 0,
   zIndex: 101,
-  width: 20,
-  bottom: 0,
+  // Horizontal scroll areas
   [`&.${gridClasses['scrollArea--left']}`]: {
-    left: 0
+    top: 0,
+    left: 0,
+    width: 20,
+    bottom: 0
   },
   [`&.${gridClasses['scrollArea--right']}`]: {
-    right: 0
+    top: 0,
+    right: 0,
+    width: 20,
+    bottom: 0
+  },
+  // Vertical scroll areas
+  [`&.${gridClasses['scrollArea--up']}`]: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 20
+  },
+  [`&.${gridClasses['scrollArea--down']}`]: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 20
   }
 }));
 const offsetSelector = createSelectorV8(gridDimensionsSelector, (dimensions, direction) => {
@@ -57,19 +80,27 @@ const offsetSelector = createSelectorV8(gridDimensionsSelector, (dimensions, dir
   if (direction === 'right') {
     return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   }
+  // For vertical scroll areas, we don't need horizontal offset
   return 0;
 });
 function GridScrollAreaWrapper(props) {
   const apiRef = useGridApiContext();
-  const [dragging, setDragging] = React.useState(false);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
-  if (!dragging) {
+  const [dragDirection, setDragDirection] = React.useState('none');
+
+  // Listen for both column and row drag events
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragDirection('horizontal'));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragDirection('none'));
+  useGridApiEventHandler(apiRef, 'rowDragStart', () => setDragDirection('vertical'));
+  useGridApiEventHandler(apiRef, 'rowDragEnd', () => setDragDirection('none'));
+  if (dragDirection === 'none') {
     return null;
   }
-  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props));
+  if (dragDirection === 'horizontal') {
+    return /*#__PURE__*/_jsx(GridHorizontalScrollAreaContent, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(GridVerticalScrollAreaContent, _extends({}, props));
 }
-function GridScrollAreaContent(props) {
+function GridHorizontalScrollAreaContent(props) {
   const {
     scrollDirection,
     scrollPosition
@@ -93,26 +124,17 @@ function GridScrollAreaContent(props) {
     }
     return false;
   };
-  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = useGridRootProps();
-  const ownerState = _extends({}, rootProps, {
-    scrollDirection
-  });
-  const classes = useUtilityClasses(ownerState);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps);
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  const style = {
+  const style = _extends({
     height: headerHeight,
     top: totalHeaderHeight - headerHeight
-  };
-  if (scrollDirection === 'left') {
-    style.left = sideOffset;
-  } else if (scrollDirection === 'right') {
-    style.right = sideOffset;
-  }
-  const handleScrolling = () => {
-    setCanScrollMore(getCanScrollMore);
-  };
+  }, scrollDirection === 'left' ? {
+    left: sideOffset
+  } : {}, scrollDirection === 'right' ? {
+    right: sideOffset
+  } : {});
   const handleDragOver = useEventCallback(event => {
     let offset;
 
@@ -135,16 +157,98 @@ function GridScrollAreaContent(props) {
       });
     });
   });
+  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props, {
+    ref: rootRef,
+    getCanScrollMore: getCanScrollMore,
+    style: style,
+    handleDragOver: handleDragOver
+  }));
+}
+function GridVerticalScrollAreaContent(props) {
+  const {
+    scrollDirection,
+    scrollPosition
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const timeout = useTimeout();
+  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
+  const getCanScrollMore = () => {
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
+    if (scrollDirection === 'up') {
+      // Only render if the user has not reached yet the top of the list
+      return scrollPosition.current.top > 0;
+    }
+    if (scrollDirection === 'down') {
+      // Only render if the user has not reached yet the bottom of the list
+      const totalRowsHeight = rowsMeta.currentPageTotalHeight || 0;
+      const maxScrollTop = totalRowsHeight - dimensions.viewportInnerSize.height - dimensions.scrollbarSize;
+      return scrollPosition.current.top < maxScrollTop;
+    }
+    return false;
+  };
+  const rootProps = useGridRootProps();
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps);
+  const style = {
+    top: scrollDirection === 'up' ? totalHeaderHeight : undefined,
+    bottom: scrollDirection === 'down' ? 0 : undefined
+  };
+  const handleDragOver = useEventCallback(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'up') {
+      offset = event.clientY - rootRef.current.getBoundingClientRect().bottom;
+    } else if (scrollDirection === 'down') {
+      offset = Math.max(1, event.clientY - rootRef.current.getBoundingClientRect().top);
+    } else {
+      throw new Error('MUI X: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+
+    // Avoid freeze and inertia.
+    timeout.start(0, () => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left,
+        top: scrollPosition.current.top + offset
+      });
+    });
+  });
+  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props, {
+    ref: rootRef,
+    getCanScrollMore: getCanScrollMore,
+    style: style,
+    handleDragOver: handleDragOver
+  }));
+}
+const GridScrollAreaContent = forwardRef(function GridScrollAreaContent(props, ref) {
+  const {
+    scrollDirection,
+    getCanScrollMore,
+    style,
+    handleDragOver
+  } = props;
+  const apiRef = useGridApiContext();
+  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const handleScrolling = () => {
+    setCanScrollMore(getCanScrollMore);
+  };
   useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
   if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
-    ref: rootRef,
-    className: clsx(classes.root),
+    ref: ref,
+    className: classes.root,
     ownerState: ownerState,
     onDragOver: handleDragOver,
     style: style
   });
-}
+});
 export const GridScrollArea = fastMemo(GridScrollAreaWrapper);

package/components/virtualization/GridVirtualScroller.js

@@ -95,6 +95,10 @@ function GridVirtualScroller(props) {
       scrollDirection: "left"
     }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "right"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "up"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "down"
     }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {

package/constants/gridClasses.d.ts

@@ -533,6 +533,14 @@ export interface GridClasses {
      * Styles applied to the right scroll area element.
      */
     'scrollArea--right': string;
+    /**
+     * Styles applied to the top scroll area element.
+     */
+    'scrollArea--up': string;
+    /**
+     * Styles applied to the bottom scroll area element.
+     */
+    'scrollArea--down': string;
     /**
      * Styles applied to the scrollbars.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/features/editing/useGridRowEditing.js

@@ -341,7 +341,10 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-    columns.filter(column => column.editable && !!column.preProcessEditCellProps && deleteValue).forEach(column => {
+    columns.filter(column => {
+      const isCellEditable = apiRef.current.getCellParams(id, column.field).isEditable;
+      return isCellEditable && column.editable && !!column.preProcessEditCellProps && deleteValue;
+    }).forEach(column => {
       const field = column.field;
       const value = apiRef.current.getCellValue(id, field);
       const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.29.8
+ * @mui/x-data-grid v7.29.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/components/GridScrollArea.js

@@ -1,11 +1,12 @@
 'use client';
 
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -16,6 +17,7 @@ import { gridDensityFactorSelector } from "../hooks/features/density/densitySele
 import { useTimeout } from "../hooks/utils/useTimeout.js";
 import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.js";
 import { createSelectorV8 } from "../utils/createSelector.js";
+import { gridRowsMetaSelector } from "../hooks/features/rows/gridRowsMetaSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -36,18 +38,39 @@ const GridScrollAreaRawRoot = styled('div', {
     [`&.${gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
   }, {
     [`&.${gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, {
+    [`&.${gridClasses['scrollArea--up']}`]: styles['scrollArea--up']
+  }, {
+    [`&.${gridClasses['scrollArea--down']}`]: styles['scrollArea--down']
   }, styles.scrollArea]
 })(() => ({
   position: 'absolute',
-  top: 0,
   zIndex: 101,
-  width: 20,
-  bottom: 0,
+  // Horizontal scroll areas
   [`&.${gridClasses['scrollArea--left']}`]: {
-    left: 0
+    top: 0,
+    left: 0,
+    width: 20,
+    bottom: 0
   },
   [`&.${gridClasses['scrollArea--right']}`]: {
-    right: 0
+    top: 0,
+    right: 0,
+    width: 20,
+    bottom: 0
+  },
+  // Vertical scroll areas
+  [`&.${gridClasses['scrollArea--up']}`]: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 20
+  },
+  [`&.${gridClasses['scrollArea--down']}`]: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 20
   }
 }));
 const offsetSelector = createSelectorV8(gridDimensionsSelector, (dimensions, direction) => {
@@ -57,19 +80,27 @@ const offsetSelector = createSelectorV8(gridDimensionsSelector, (dimensions, dir
   if (direction === 'right') {
     return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   }
+  // For vertical scroll areas, we don't need horizontal offset
   return 0;
 });
 function GridScrollAreaWrapper(props) {
   const apiRef = useGridApiContext();
-  const [dragging, setDragging] = React.useState(false);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
-  if (!dragging) {
+  const [dragDirection, setDragDirection] = React.useState('none');
+
+  // Listen for both column and row drag events
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragDirection('horizontal'));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragDirection('none'));
+  useGridApiEventHandler(apiRef, 'rowDragStart', () => setDragDirection('vertical'));
+  useGridApiEventHandler(apiRef, 'rowDragEnd', () => setDragDirection('none'));
+  if (dragDirection === 'none') {
     return null;
   }
-  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props));
+  if (dragDirection === 'horizontal') {
+    return /*#__PURE__*/_jsx(GridHorizontalScrollAreaContent, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(GridVerticalScrollAreaContent, _extends({}, props));
 }
-function GridScrollAreaContent(props) {
+function GridHorizontalScrollAreaContent(props) {
   const {
     scrollDirection,
     scrollPosition
@@ -93,26 +124,17 @@ function GridScrollAreaContent(props) {
     }
     return false;
   };
-  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = useGridRootProps();
-  const ownerState = _extends({}, rootProps, {
-    scrollDirection
-  });
-  const classes = useUtilityClasses(ownerState);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps);
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  const style = {
+  const style = _extends({
     height: headerHeight,
     top: totalHeaderHeight - headerHeight
-  };
-  if (scrollDirection === 'left') {
-    style.left = sideOffset;
-  } else if (scrollDirection === 'right') {
-    style.right = sideOffset;
-  }
-  const handleScrolling = () => {
-    setCanScrollMore(getCanScrollMore);
-  };
+  }, scrollDirection === 'left' ? {
+    left: sideOffset
+  } : {}, scrollDirection === 'right' ? {
+    right: sideOffset
+  } : {});
   const handleDragOver = useEventCallback(event => {
     let offset;
 
@@ -135,16 +157,98 @@ function GridScrollAreaContent(props) {
       });
     });
   });
+  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props, {
+    ref: rootRef,
+    getCanScrollMore: getCanScrollMore,
+    style: style,
+    handleDragOver: handleDragOver
+  }));
+}
+function GridVerticalScrollAreaContent(props) {
+  const {
+    scrollDirection,
+    scrollPosition
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const timeout = useTimeout();
+  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
+  const getCanScrollMore = () => {
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
+    if (scrollDirection === 'up') {
+      // Only render if the user has not reached yet the top of the list
+      return scrollPosition.current.top > 0;
+    }
+    if (scrollDirection === 'down') {
+      // Only render if the user has not reached yet the bottom of the list
+      const totalRowsHeight = rowsMeta.currentPageTotalHeight || 0;
+      const maxScrollTop = totalRowsHeight - dimensions.viewportInnerSize.height - dimensions.scrollbarSize;
+      return scrollPosition.current.top < maxScrollTop;
+    }
+    return false;
+  };
+  const rootProps = useGridRootProps();
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps);
+  const style = {
+    top: scrollDirection === 'up' ? totalHeaderHeight : undefined,
+    bottom: scrollDirection === 'down' ? 0 : undefined
+  };
+  const handleDragOver = useEventCallback(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'up') {
+      offset = event.clientY - rootRef.current.getBoundingClientRect().bottom;
+    } else if (scrollDirection === 'down') {
+      offset = Math.max(1, event.clientY - rootRef.current.getBoundingClientRect().top);
+    } else {
+      throw new Error('MUI X: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+
+    // Avoid freeze and inertia.
+    timeout.start(0, () => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left,
+        top: scrollPosition.current.top + offset
+      });
+    });
+  });
+  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props, {
+    ref: rootRef,
+    getCanScrollMore: getCanScrollMore,
+    style: style,
+    handleDragOver: handleDragOver
+  }));
+}
+const GridScrollAreaContent = forwardRef(function GridScrollAreaContent(props, ref) {
+  const {
+    scrollDirection,
+    getCanScrollMore,
+    style,
+    handleDragOver
+  } = props;
+  const apiRef = useGridApiContext();
+  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const handleScrolling = () => {
+    setCanScrollMore(getCanScrollMore);
+  };
   useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
   if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
-    ref: rootRef,
-    className: clsx(classes.root),
+    ref: ref,
+    className: classes.root,
     ownerState: ownerState,
     onDragOver: handleDragOver,
     style: style
   });
-}
+});
 export const GridScrollArea = fastMemo(GridScrollAreaWrapper);

package/modern/components/virtualization/GridVirtualScroller.js

@@ -95,6 +95,10 @@ function GridVirtualScroller(props) {
       scrollDirection: "left"
     }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "right"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "up"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "down"
     }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

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

@@ -341,7 +341,10 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-    columns.filter(column => column.editable && !!column.preProcessEditCellProps && deleteValue).forEach(column => {
+    columns.filter(column => {
+      const isCellEditable = apiRef.current.getCellParams(id, column.field).isEditable;
+      return isCellEditable && column.editable && !!column.preProcessEditCellProps && deleteValue;
+    }).forEach(column => {
       const field = column.field;
       const value = apiRef.current.getCellValue(id, field);
       const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.29.8
+ * @mui/x-data-grid v7.29.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/components/GridScrollArea.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+/* eslint-disable @typescript-eslint/no-use-before-define */
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,10 +10,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridScrollArea = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _system = require("@mui/system");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _constants = require("../constants");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -23,6 +24,7 @@ var _densitySelector = require("../hooks/features/density/densitySelector");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
 var _createSelector = require("../utils/createSelector");
+var _gridRowsMetaSelector = require("../hooks/features/rows/gridRowsMetaSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -43,18 +45,39 @@ const GridScrollAreaRawRoot = (0, _system.styled)('div', {
     [`&.${_constants.gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
   }, {
     [`&.${_constants.gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, {
+    [`&.${_constants.gridClasses['scrollArea--up']}`]: styles['scrollArea--up']
+  }, {
+    [`&.${_constants.gridClasses['scrollArea--down']}`]: styles['scrollArea--down']
   }, styles.scrollArea]
 })(() => ({
   position: 'absolute',
-  top: 0,
   zIndex: 101,
-  width: 20,
-  bottom: 0,
+  // Horizontal scroll areas
   [`&.${_constants.gridClasses['scrollArea--left']}`]: {
-    left: 0
+    top: 0,
+    left: 0,
+    width: 20,
+    bottom: 0
   },
   [`&.${_constants.gridClasses['scrollArea--right']}`]: {
-    right: 0
+    top: 0,
+    right: 0,
+    width: 20,
+    bottom: 0
+  },
+  // Vertical scroll areas
+  [`&.${_constants.gridClasses['scrollArea--up']}`]: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 20
+  },
+  [`&.${_constants.gridClasses['scrollArea--down']}`]: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 20
   }
 }));
 const offsetSelector = (0, _createSelector.createSelectorV8)(_gridDimensionsSelectors.gridDimensionsSelector, (dimensions, direction) => {
@@ -64,19 +87,27 @@ const offsetSelector = (0, _createSelector.createSelectorV8)(_gridDimensionsSele
   if (direction === 'right') {
     return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   }
+  // For vertical scroll areas, we don't need horizontal offset
   return 0;
 });
 function GridScrollAreaWrapper(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const [dragging, setDragging] = React.useState(false);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
-  if (!dragging) {
+  const [dragDirection, setDragDirection] = React.useState('none');
+
+  // Listen for both column and row drag events
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', () => setDragDirection('horizontal'));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', () => setDragDirection('none'));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowDragStart', () => setDragDirection('vertical'));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowDragEnd', () => setDragDirection('none'));
+  if (dragDirection === 'none') {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props));
+  if (dragDirection === 'horizontal') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridHorizontalScrollAreaContent, (0, _extends2.default)({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridVerticalScrollAreaContent, (0, _extends2.default)({}, props));
 }
-function GridScrollAreaContent(props) {
+function GridHorizontalScrollAreaContent(props) {
   const {
     scrollDirection,
     scrollPosition
@@ -100,26 +131,17 @@ function GridScrollAreaContent(props) {
     }
     return false;
   };
-  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = (0, _extends2.default)({}, rootProps, {
-    scrollDirection
-  });
-  const classes = useUtilityClasses(ownerState);
   const totalHeaderHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  const style = {
+  const style = (0, _extends2.default)({
     height: headerHeight,
     top: totalHeaderHeight - headerHeight
-  };
-  if (scrollDirection === 'left') {
-    style.left = sideOffset;
-  } else if (scrollDirection === 'right') {
-    style.right = sideOffset;
-  }
-  const handleScrolling = () => {
-    setCanScrollMore(getCanScrollMore);
-  };
+  }, scrollDirection === 'left' ? {
+    left: sideOffset
+  } : {}, scrollDirection === 'right' ? {
+    right: sideOffset
+  } : {});
   const handleDragOver = (0, _utils.unstable_useEventCallback)(event => {
     let offset;
 
@@ -142,16 +164,98 @@ function GridScrollAreaContent(props) {
       });
     });
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props, {
+    ref: rootRef,
+    getCanScrollMore: getCanScrollMore,
+    style: style,
+    handleDragOver: handleDragOver
+  }));
+}
+function GridVerticalScrollAreaContent(props) {
+  const {
+    scrollDirection,
+    scrollPosition
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const timeout = (0, _useTimeout.useTimeout)();
+  const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
+  const getCanScrollMore = () => {
+    const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
+    if (scrollDirection === 'up') {
+      // Only render if the user has not reached yet the top of the list
+      return scrollPosition.current.top > 0;
+    }
+    if (scrollDirection === 'down') {
+      // Only render if the user has not reached yet the bottom of the list
+      const totalRowsHeight = rowsMeta.currentPageTotalHeight || 0;
+      const maxScrollTop = totalRowsHeight - dimensions.viewportInnerSize.height - dimensions.scrollbarSize;
+      return scrollPosition.current.top < maxScrollTop;
+    }
+    return false;
+  };
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const totalHeaderHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
+  const style = {
+    top: scrollDirection === 'up' ? totalHeaderHeight : undefined,
+    bottom: scrollDirection === 'down' ? 0 : undefined
+  };
+  const handleDragOver = (0, _utils.unstable_useEventCallback)(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'up') {
+      offset = event.clientY - rootRef.current.getBoundingClientRect().bottom;
+    } else if (scrollDirection === 'down') {
+      offset = Math.max(1, event.clientY - rootRef.current.getBoundingClientRect().top);
+    } else {
+      throw new Error('MUI X: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+
+    // Avoid freeze and inertia.
+    timeout.start(0, () => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left,
+        top: scrollPosition.current.top + offset
+      });
+    });
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props, {
+    ref: rootRef,
+    getCanScrollMore: getCanScrollMore,
+    style: style,
+    handleDragOver: handleDragOver
+  }));
+}
+const GridScrollAreaContent = (0, _forwardRef.forwardRef)(function GridScrollAreaContent(props, ref) {
+  const {
+    scrollDirection,
+    getCanScrollMore,
+    style,
+    handleDragOver
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const handleScrolling = () => {
+    setCanScrollMore(getCanScrollMore);
+  };
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleScrolling);
   if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
-    ref: rootRef,
-    className: (0, _clsx.default)(classes.root),
+    ref: ref,
+    className: classes.root,
     ownerState: ownerState,
     onDragOver: handleDragOver,
     style: style
   });
-}
+});
 const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaWrapper);

package/node/components/virtualization/GridVirtualScroller.js

@@ -103,6 +103,10 @@ function GridVirtualScroller(props) {
       scrollDirection: "left"
     }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
       scrollDirection: "right"
+    }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
+      scrollDirection: "up"
+    }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
+      scrollDirection: "down"
     }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
       className: classes.scroller
     }, getScrollerProps(), {

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

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

@@ -349,7 +349,10 @@ const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-    columns.filter(column => column.editable && !!column.preProcessEditCellProps && deleteValue).forEach(column => {
+    columns.filter(column => {
+      const isCellEditable = apiRef.current.getCellParams(id, column.field).isEditable;
+      return isCellEditable && column.editable && !!column.preProcessEditCellProps && deleteValue;
+    }).forEach(column => {
       const field = column.field;
       const value = apiRef.current.getCellValue(id, field);
       const newValue = deleteValue ? (0, _utils3.getDefaultCellValue)(column) : initialValue ?? value;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.29.8
+ * @mui/x-data-grid v7.29.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.29.8",
+  "version": "7.29.9",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",