@mui/x-data-grid 8.18.0 → 8.20.0

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -11,7 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -43,7 +45,19 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const {
+    isIndeterminate,
+    isChecked,
+    isSelectable
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils.checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
+  const disabled = !isSelectable;
   const handleChange = event => {
+    if (disabled) {
+      return;
+    }
     const params = {
       value: event.target.checked,
       id
@@ -58,20 +72,26 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
       }
     }
   }, [apiRef, tabIndex, id, field]);
-  const handleKeyDown = React.useCallback(event => {
+  const handleKeyDown = (0, _useEventCallback.default)(event => {
     if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
       // TODO: Remove and add a check inside useGridKeyboardNavigation
       event.stopPropagation();
     }
-  }, []);
-  const isSelectable = apiRef.current.isRowSelectable(id);
-  const {
-    isIndeterminate,
-    isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils.checkboxPropsSelector, {
-    groupId: id,
-    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+    if (disabled) {
+      return;
+    }
+  });
+  const handleClick = (0, _useEventCallback.default)(event => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+  });
+  const handleMouseDown = (0, _useEventCallback.default)(() => {
+    if (disabled) {
+      return;
+    }
   });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
@@ -81,16 +101,21 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     tabIndex: tabIndex,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
-    className: classes.root,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    className: (0, _clsx.default)(classes.root, disabled && 'Mui-disabled'),
+    material: {
+      disableRipple: disabled
+    },
     slotProps: {
       htmlInput: {
+        'aria-disabled': disabled || undefined,
         'aria-label': label,
         name: 'select_row'
       }
     },
     onKeyDown: handleKeyDown,
-    indeterminate: isIndeterminate,
-    disabled: !isSelectable
+    indeterminate: isIndeterminate
   }, rootProps.slotProps?.baseCheckbox, other, {
     ref: ref
   }));
@@ -117,16 +142,6 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/components/containers/GridRootStyles.js

@@ -21,7 +21,7 @@ const separatorIconDragStyles = {
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
-const shouldShowBorderTopRightRadiusSelector = apiRef => apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
+const shouldShowBorderTopRightRadiusSelector = apiRef => !apiRef.current.state.dimensions.isReady ? apiRef.current.state.dimensions.scrollbarSize === 0 : apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -239,10 +239,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
-  }, {
-    [`& .${_gridClasses.gridClasses['row--dropAbove']}`]: styles['row--dropAbove']
-  }, {
-    [`& .${_gridClasses.gridClasses['row--dropBelow']}`]: styles['row--dropBelow']
   }, {
     [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: styles['row--beingDragged']
   }]
@@ -420,6 +416,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       alignItems: 'center',
       backgroundColor: headerBackground
     },
+    [`& .${_gridClasses.gridClasses.columnHeader} .${_gridClasses.gridClasses.sortButton}`]: {
+      backgroundColor: _cssVariables.vars.header.background.base
+    },
     [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
       paddingTop: 8,
       paddingBottom: 8,
@@ -519,7 +518,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortButton},
         & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}):hover .${_gridClasses.gridClasses.sortButton},
         & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}:focus-visible`]: {
-        opacity: 0.5
+        opacity: 1
+      },
+      // Add opacity only to the button content to avoid affecting the background color
+      [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortButton} > *,
+        & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}):hover .${_gridClasses.gridClasses.sortButton} > *,
+        & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}:focus-visible > *`]: {
+        opacity: 0.78
+      },
+      [`& .${_gridClasses.gridClasses.pivotPanelFieldActionContainer} button:hover`]: {
+        backgroundColor: _cssVariables.vars.colors.background.base
       }
     },
     '@media (hover: none)': {
@@ -534,7 +542,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         }
       },
       [`& .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}`]: {
-        opacity: 0.5
+        opacity: 0.78
       }
     },
     // Hide the column separator when the column has border and it is not resizable
@@ -628,7 +636,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`&.${_gridClasses.gridClasses.rowSkeleton}:hover`]: {
         backgroundColor: 'transparent'
       },
-      '&.Mui-selected': selectedStyles
+      '&.Mui-selected': selectedStyles,
+      position: 'relative'
     },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
@@ -873,38 +882,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         display: 'none'
       }
     },
-    [`& .${_gridClasses.gridClasses['row--dropAbove']}`]: {
-      position: 'relative',
-      '&::before': {
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: _cssVariables.vars.colors.interactive.selected
-      }
-    },
-    [`& .${_gridClasses.gridClasses['row--dropBelow']}`]: {
-      position: 'relative',
-      '&::after': {
-        zIndex: 100,
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        bottom: '-2px',
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: _cssVariables.vars.colors.interactive.selected
-      },
-      [`&.${_gridClasses.gridClasses['row--lastVisible']}`]: {
-        '&::after': {
-          bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
-        }
-      }
-    },
     [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: {
       color: _cssVariables.vars.colors.foreground.disabled,
       '&:hover': {

package/components/toolbarV8/Toolbar.js

@@ -36,7 +36,7 @@ const ToolbarRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
 })({
-  flex: 0,
+  flex: '0 1 1px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'end',

package/components/virtualization/GridVirtualScrollbar.d.ts

@@ -7,6 +7,7 @@ type GridVirtualScrollbarProps = {
     top: number;
   }>;
 };
+export declare const scrollbarSizeCssExpression = "calc(max(var(--DataGrid-scrollbarSize), 14px))";
 export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/components/virtualization/GridVirtualScrollbar.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
+exports.scrollbarSizeCssExpression = exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -29,6 +29,12 @@ const useUtilityClasses = (ownerState, position) => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
+
+// In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
+// their size to be 0px throughout all the calculations, but the floating scrollbar container does need
+// to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
+// don't have a method to find the required size for scrollbars on those platforms.
+const scrollbarSizeCssExpression = exports.scrollbarSizeCssExpression = 'calc(max(var(--DataGrid-scrollbarSize), 14px))';
 const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
@@ -36,11 +42,7 @@ const Scrollbar = (0, _system.styled)('div')({
   '&:hover': {
     zIndex: 70
   },
-  // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
-  // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
-  // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
-  // don't have a method to find the required size for scrollbars on those platforms.
-  '--size': 'calc(max(var(--DataGrid-scrollbarSize), 14px))'
+  '--size': scrollbarSizeCssExpression
 });
 const ScrollbarVertical = (0, _system.styled)(Scrollbar)({
   width: 'var(--size)',
@@ -72,7 +74,10 @@ const ScrollbarCorner = exports.ScrollbarCorner = (0, _system.styled)(Scrollbar)
   height: 'var(--size)',
   right: 0,
   bottom: 0,
-  overflow: 'scroll'
+  overflow: 'scroll',
+  '@media print': {
+    display: 'none'
+  }
 });
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forwardRef)(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -101,7 +106,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       return;
     }
     isLocked.current = true;
-    scrollbar[propertyScroll] = scrollPosition[propertyScrollPosition];
+    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
   });
   const onScrollbarScroll = (0, _useEventCallback.default)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;

package/components/virtualization/GridVirtualScroller.js

@@ -27,6 +27,7 @@ var _GridVirtualScrollerRenderZone = require("./GridVirtualScrollerRenderZone");
 var _GridVirtualScrollbar = require("./GridVirtualScrollbar");
 var _GridScrollShadows = require("../GridScrollShadows");
 var _GridOverlays = require("../base/GridOverlays");
+var _useGridVirtualizer = require("../../hooks/core/useGridVirtualizer");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -90,7 +91,7 @@ function GridVirtualScroller(props) {
     loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
-  const virtualScroller = apiRef.current.virtualizer.api.useVirtualization().getters;
+  const virtualScroller = (0, _useGridVirtualizer.useGridVirtualizer)().api.getters;
   const {
     getContainerProps,
     getScrollerProps,

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -44,7 +44,7 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const offsetTop = apiRef.current.virtualizer.api.useVirtualization().getters.getOffsetTop();
+  const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,

package/constants/dataGridPropsDefaultValues.js

@@ -63,5 +63,6 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  virtualizeColumnsWithAutoRowHeight: false
+  virtualizeColumnsWithAutoRowHeight: false,
+  tabNavigation: 'none'
 };

package/constants/gridClasses.d.ts

@@ -572,14 +572,6 @@ export interface GridClasses {
    * Styles applied to the floating special row reorder cell element when it is dragged.
    */
   'row--dragging': string;
-  /**
-   * Styles applied to the row element when it is a drop target above.
-   */
-  'row--dropAbove': string;
-  /**
-   * Styles applied to the row element when it is a drop target below.
-   */
-  'row--dropBelow': string;
   /**
    * Styles applied to the row element when it is being dragged (entire row).
    */

package/constants/gridClasses.js

@@ -13,4 +13,4 @@ function getDataGridUtilityClass(slot) {
 }
 const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', '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', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', '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--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', '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--hiddenContent', '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',
 // TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+'row--dragging', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/DataGrid/useDataGridComponent.js

@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { useFirstRender } from '@mui/x-internals/useFirstRender';
 import { useGridInitialization } from "../hooks/core/useGridInitialization.js";
-import { useGridVirtualizer } from "../hooks/core/useGridVirtualizer.js";
 import { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
 import { useGridClipboard } from "../hooks/features/clipboard/useGridClipboard.js";
 import { columnMenuStateInitializer, useGridColumnMenu } from "../hooks/features/columnMenu/useGridColumnMenu.js";
@@ -25,7 +25,7 @@ import { useGridSorting, sortingStateInitializer } from "../hooks/features/sorti
 import { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 import { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 import { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
-import { rowsMetaStateInitializer, useGridRowsMeta } from "../hooks/features/rows/useGridRowsMeta.js";
+import { rowsMetaStateInitializer } from "../hooks/features/rows/useGridRowsMeta.js";
 import { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
 import { useGridColumnSpanning } from "../hooks/features/columns/useGridColumnSpanning.js";
 import { useGridColumnGrouping, columnGroupsStateInitializer } from "../hooks/features/columnGrouping/useGridColumnGrouping.js";
@@ -66,7 +66,6 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
-  useGridVirtualizer(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
@@ -83,7 +82,6 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridDensity(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
-  useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef, props);
@@ -97,6 +95,9 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridDataSource(apiRef, props);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  useFirstRender(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/esm/components/GridRow.js

@@ -26,6 +26,7 @@ import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSele
 import { gridRowNodeSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "../hooks/features/editing/gridEditingSelectors.js";
 import { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+import { GridRowDragAndDropOverlay } from "./GridRowDragAndDropOverlay.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
@@ -197,7 +198,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       rowStyle[property] = propertyValue;
     }
     return rowStyle;
-  }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
+  }, [isNotVisible, rowHeight, styleProp, heightEntry.spacingTop, heightEntry.spacingBottom, rootProps.rowSpacingType]);
 
   // HACK: Sometimes, the rowNode has already been removed from the state but the row is still rendered.
   if (!rowNode) {
@@ -308,7 +309,9 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     }), cells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
       className: clsx(gridClasses.cell, gridClasses.cellEmpty)
-    }), rightCells]
+    }), rightCells, /*#__PURE__*/_jsx(GridRowDragAndDropOverlay, {
+      rowId: rowId
+    })]
   }));
 });
 if (process.env.NODE_ENV !== "production") GridRow.displayName = "GridRow";

package/esm/components/GridRowDragAndDropOverlay.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { GridRowId } from "../models/gridRows.js";
+export interface GridRowDragAndDropOverlayProps {
+  rowId: GridRowId;
+  className?: string;
+}
+export declare const GridRowDragAndDropOverlay: React.NamedExoticComponent<GridRowDragAndDropOverlayProps>;

package/esm/components/GridRowDragAndDropOverlay.js

@@ -0,0 +1,66 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { gridRowDropPositionSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridRowDragAndDropOverlayRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'RowDragOverlay',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
+})(({
+  theme,
+  action
+}) => _extends({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  pointerEvents: 'none',
+  zIndex: 1
+}, action === 'above' && {
+  '&::before': {
+    pointerEvents: 'none',
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '2px',
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }
+}, action === 'below' && {
+  '&::after': {
+    pointerEvents: 'none',
+    content: '""',
+    position: 'absolute',
+    bottom: '-2px',
+    left: 0,
+    right: 0,
+    height: '2px',
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }
+}, action === 'inside' && {
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : alpha(theme.palette.primary.main, 0.1)
+}));
+export const GridRowDragAndDropOverlay = /*#__PURE__*/React.memo(function GridRowDragAndDropOverlay(props) {
+  const {
+    rowId,
+    className
+  } = props;
+  const apiRef = useGridPrivateApiContext();
+  const dropPosition = useGridSelector(apiRef, gridRowDropPositionSelector, rowId);
+  if (!dropPosition) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridRowDragAndDropOverlayRoot, {
+    action: dropPosition,
+    className: className
+  });
+});
+if (process.env.NODE_ENV !== "production") GridRowDragAndDropOverlay.displayName = "GridRowDragAndDropOverlay";

package/esm/components/cell/GridActionsCell.d.ts

@@ -1,8 +1,17 @@
+import * as React from 'react';
 import { GridRenderCellParams } from "../../models/params/gridCellParams.js";
 import { GridMenuProps } from "../menu/GridMenu.js";
 interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
   api?: GridRenderCellParams['api'];
   position?: GridMenuProps['position'];
+  children: React.ReactNode;
+  /**
+   * If true, the children passed to the component will not be validated.
+   * If false, only `GridActionsCellItem` and `React.Fragment` are allowed as children.
+   * Only use this prop if you know what you are doing.
+   * @default false
+   */
+  suppressChildrenValidation?: boolean;
 }
 declare function GridActionsCell(props: GridActionsCellProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridActionsCell {