@mui/x-data-grid 8.19.0 → 8.21.0

package/esm/components/containers/GridRootStyles.js

@@ -233,10 +233,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${c.withBorderColor}`]: styles.withBorderColor
-  }, {
-    [`& .${c['row--dropAbove']}`]: styles['row--dropAbove']
-  }, {
-    [`& .${c['row--dropBelow']}`]: styles['row--dropBelow']
   }, {
     [`& .${c['row--beingDragged']}`]: styles['row--beingDragged']
   }]
@@ -414,6 +410,9 @@ export const GridRootStyles = styled('div', {
       alignItems: 'center',
       backgroundColor: headerBackground
     },
+    [`& .${c.columnHeader} .${c.sortButton}`]: {
+      backgroundColor: vars.header.background.base
+    },
     [`& .${c['columnHeader--filter']}`]: {
       paddingTop: 8,
       paddingBottom: 8,
@@ -513,7 +512,16 @@ export const GridRootStyles = styled('div', {
       [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible`]: {
-        opacity: 0.5
+        opacity: 1
+      },
+      // Add opacity only to the button content to avoid affecting the background color
+      [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton} > *,
+        & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton} > *,
+        & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible > *`]: {
+        opacity: 0.78
+      },
+      [`& .${c.pivotPanelFieldActionContainer} button:hover`]: {
+        backgroundColor: vars.colors.background.base
       }
     },
     '@media (hover: none)': {
@@ -528,7 +536,7 @@ export const GridRootStyles = styled('div', {
         }
       },
       [`& .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}`]: {
-        opacity: 0.5
+        opacity: 0.78
       }
     },
     // Hide the column separator when the column has border and it is not resizable
@@ -622,7 +630,8 @@ export const GridRootStyles = styled('div', {
       [`&.${c.rowSkeleton}:hover`]: {
         backgroundColor: 'transparent'
       },
-      '&.Mui-selected': selectedStyles
+      '&.Mui-selected': selectedStyles,
+      position: 'relative'
     },
     /* Cell styles */
     [`& .${c.cell}`]: {
@@ -867,38 +876,6 @@ export const GridRootStyles = styled('div', {
         display: 'none'
       }
     },
-    [`& .${c['row--dropAbove']}`]: {
-      position: 'relative',
-      '&::before': {
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: vars.colors.interactive.selected
-      }
-    },
-    [`& .${c['row--dropBelow']}`]: {
-      position: 'relative',
-      '&::after': {
-        zIndex: 100,
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        bottom: '-2px',
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: vars.colors.interactive.selected
-      },
-      [`&.${c['row--lastVisible']}`]: {
-        '&::after': {
-          bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
-        }
-      }
-    },
     [`& .${c['row--beingDragged']}`]: {
       color: vars.colors.foreground.disabled,
       '&:hover': {

package/esm/components/virtualization/GridVirtualScroller.js

@@ -88,6 +88,7 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
+    getPositionerProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -120,12 +121,13 @@ function GridVirtualScroller(props) {
         loadingOverlayVariant: loadingOverlayVariant,
         children: /*#__PURE__*/_jsx(Overlay, _extends({}, rootProps.slotProps?.[overlayType]))
       }), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
-        children: /*#__PURE__*/_jsxs(RenderZone, {
-          role: "rowgroup",
+        children: /*#__PURE__*/_jsxs(RenderZone, _extends({
+          role: "rowgroup"
+        }, getPositionerProps(), {
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        })
+        }))
       })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {

package/esm/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -1,12 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,21 +26,12 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
-  const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
-    className: clsx(classes.root, className),
-    ownerState: rootProps,
-    style: {
-      transform: `translate3d(0, ${offsetTop}px, 0)`
-    }
-  }, other, {
+    ownerState: rootProps
+  }, props, {
+    className: clsx(classes.root, props.className),
     ref: ref
   }));
 });

package/esm/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/esm/constants/gridClasses.js

@@ -5,4 +5,4 @@ export function getDataGridUtilityClass(slot) {
 }
 export const gridClasses = generateUtilityClasses('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/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -8,6 +8,7 @@ import { GridHydrateRowsValue } from "../../features/rows/gridRowsInterfaces.js"
 import { GridPreferencePanelsValue } from "../../features/preferencesPanel/index.js";
 import { GridGetRowsParams, GridGetRowsResponse } from "../../../models/gridDataSource.js";
 import { HeightEntry } from "../../features/rows/gridRowsMetaInterfaces.js";
+import type { RowReorderDropPosition } from "../../../models/api/gridRowApi.js";
 export type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {
   columnMenu: {
@@ -97,12 +98,12 @@ export interface GridPipeProcessingLookup {
    *   - For example before first row is `0` and after the last row is `rows.length`.
    * If the reorder is invalid, it returns `-1`.
    */
-  getRowReorderTargetIndex: {
-    value: number;
+  isRowReorderValid: {
+    value: boolean;
     context: {
       sourceRowId: GridRowId;
       targetRowId: GridRowId;
-      dropPosition: 'above' | 'below';
+      dropPosition: RowReorderDropPosition;
       dragDirection: 'up' | 'down';
     };
   };

package/esm/hooks/core/useGridVirtualizer.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Dimensions, Virtualization } from '@mui/x-virtualizer';
+import { Dimensions, LayoutDataGridLegacy, Virtualization } from '@mui/x-virtualizer';
 /**
  * Virtualizer setup
  */
 export declare function useGridVirtualizer(): {
-  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
+  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State<LayoutDataGridLegacy> & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
   api: {
     updateDimensions: (firstUpdate?: boolean) => void;
     debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
@@ -20,57 +20,13 @@ export declare function useGridVirtualizer(): {
       resetRowHeights: () => void;
     };
   } & {
-    getters: {
-      setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-      getOffsetTop: () => number;
-      getRows: (rowParams?: {
-        rows?: import("@mui/x-virtualizer/models").RowEntry[];
-        position?: import("@mui/x-virtualizer/models").PinnedRowPosition;
-        renderContext?: import("@mui/x-virtualizer/models").RenderContext;
-      }, unstable_rowTree?: Record<import("@mui/x-virtualizer/models").RowId, any>) => React.ReactNode[];
-      rows: import("@mui/x-virtualizer/models").RowEntry[];
-      getContainerProps: () => {
-        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
-      };
-      getScrollerProps: () => {
-        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
-        style: React.CSSProperties;
-        role: string;
-        tabIndex: number | undefined;
-      };
-      getContentProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        style: React.CSSProperties;
-        role: string;
-      };
-      getScrollbarVerticalProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-      getScrollbarHorizontalProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-      getScrollAreaProps: () => {
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-    };
-    useVirtualization: () => import("@mui/x-virtualizer").BaseState;
-    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-    forceUpdateRenderContext: () => void;
-    scheduleUpdateRenderContext: () => void;
     getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
     calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
     getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+    getters: any;
+    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+    forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
   } & {
     resetColSpan: () => void;
     getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;

package/esm/hooks/core/useGridVirtualizer.js

@@ -6,7 +6,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { roundToDecimalPlaces } from '@mui/x-internals/math';
 import { lruMemoize } from '@mui/x-internals/lruMemoize';
 import { useStoreEffect } from '@mui/x-internals/store';
-import { useVirtualizer, Dimensions, Virtualization, EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
+import { useVirtualizer, Dimensions, LayoutDataGridLegacy, Virtualization, EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
 import { useFirstRender } from "../utils/useFirstRender.js";
 import { createSelector } from "../../utils/createSelector.js";
 import { useGridSelector } from "../utils/useGridSelector.js";
@@ -91,6 +91,8 @@ export function useGridVirtualizer() {
     rightPinnedWidth,
     topPinnedHeight: headersTotalHeight,
     bottomPinnedHeight: 0,
+    autoHeight,
+    minimalContentHeight,
     scrollbarSize: rootProps.scrollbarSize
   };
   const addGridDimensions = useLazyRef(addGridDimensionsCreator).current;
@@ -113,13 +115,14 @@ export function useGridVirtualizer() {
   const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   // We need it to trigger a new render, but rowsMeta needs access to the latest value, hence we cannot pass it to the focusedVirtualCell callback in the virtualizer params
   eslintUseValue(focusedVirtualCell);
+  const layout = useLazyRef(() => new LayoutDataGridLegacy({
+    container: apiRef.current.mainElementRef,
+    scroller: apiRef.current.virtualScrollerRef,
+    scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+    scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+  })).current;
   const virtualizer = useVirtualizer({
-    refs: {
-      container: apiRef.current.mainElementRef,
-      scroller: apiRef.current.virtualScrollerRef,
-      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
-      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
-    },
+    layout,
     dimensions: dimensionsParams,
     virtualization: {
       isRtl,
@@ -148,10 +151,8 @@ export function useGridVirtualizer() {
     columns: visibleColumns,
     pinnedRows,
     pinnedColumns,
-    autoHeight,
     disableHorizontalScroll: listView,
     disableVerticalScroll: overlayState.overlayType === 'noColumnsOverlay' || overlayState.loadingOverlayVariant === 'skeleton',
-    minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {
         return undefined;

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

@@ -142,15 +142,24 @@ function extractColumnWidths(apiRef, options, columns) {
     if (options.includeHeaders) {
       const header = findGridHeader(apiRef.current, column.field);
       if (header) {
-        const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`);
-        const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
-        const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
+        const titleContainer = header.querySelector(`.${gridClasses.columnHeaderTitleContainer}`);
+        const children = Array.from(titleContainer.children);
         const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
-        const element = title ?? content;
-        const style = window.getComputedStyle(header, null);
-        const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
-        const contentWidth = element.scrollWidth + 1;
-        const width = contentWidth + paddingWidth + (iconContainer?.clientWidth ?? 0) + (menuContainer?.clientWidth ?? 0);
+        const titleContainerStyle = window.getComputedStyle(titleContainer, null);
+        const gap = parseInt(titleContainerStyle.gap, 10) || 0;
+        const headerStyle = window.getComputedStyle(header, null);
+        const paddingWidth = parseInt(headerStyle.paddingLeft, 10) + parseInt(headerStyle.paddingRight, 10);
+        let totalChildren = 0;
+        let childrenWidth = 0;
+        for (let i = 0; i < children.length; i += 1) {
+          const child = children[i];
+          if (child.clientWidth > 0) {
+            totalChildren += 1;
+            childrenWidth += child.scrollWidth;
+          }
+        }
+        childrenWidth += 1;
+        const width = childrenWidth + gap * (totalChildren - 1) + paddingWidth + (menuContainer?.clientWidth ?? 0);
         filteredWidths.push(width);
       }
     }

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -115,7 +115,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             params: fetchParams,
             cause: originalError
           }));
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
         }
       }
@@ -170,7 +170,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
           params,
           cause: errorThrown
         }));
-      } else if (process.env.NODE_ENV !== 'production') {
+      } else {
         warnOnce(['MUI X: A call to `dataSource.updateRow()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
       }
       throw errorThrown; // Let the caller handle the error further

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

@@ -39,7 +39,9 @@ const EMPTY_DIMENSIONS = {
   rightPinnedWidth: 0,
   headersTotalHeight: 0,
   topContainerHeight: 0,
-  bottomContainerHeight: 0
+  bottomContainerHeight: 0,
+  autoHeight: false,
+  minimalContentHeight: undefined
 };
 export const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;

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

@@ -364,7 +364,7 @@ export const useGridCellEditing = (apiRef, props) => {
         });
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };

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

@@ -448,7 +448,7 @@ export const useGridRowEditing = (apiRef, props) => {
         }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };

package/esm/hooks/features/export/serializers/csvSerializer.js

@@ -76,10 +76,8 @@ const serializeRow = ({
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
-    if (process.env.NODE_ENV !== 'production') {
-      if (String(cellParams.formattedValue) === '[object Object]') {
-        warnOnce(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
-      }
+    if (String(cellParams.formattedValue) === '[object Object]') {
+      warnOnce(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
     }
     row.addValue(serializeCellValue(cellParams, {
       ignoreValueFormatter,

package/esm/hooks/features/filter/gridFilterUtils.js

@@ -41,24 +41,18 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
   const hasSeveralItems = model.items.length > 1;
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
-    if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
-    }
+    warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     items = [model.items[0]];
   } else {
     items = model.items;
   }
   const hasItemsWithoutIds = hasSeveralItems && items.some(item => item.id == null);
   const hasItemWithoutOperator = items.some(item => item.operator == null);
-  if (process.env.NODE_ENV !== 'production') {
-    if (hasItemsWithoutIds) {
-      warnOnce('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
-    }
+  if (hasItemsWithoutIds) {
+    warnOnce('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
   }
-  if (process.env.NODE_ENV !== 'production') {
-    if (hasItemWithoutOperator) {
-      warnOnce('MUI X: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
-    }
+  if (hasItemWithoutOperator) {
+    warnOnce('MUI X: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
   }
   if (hasItemWithoutOperator || hasItemsWithoutIds) {
     return _extends({}, model, {

package/esm/hooks/features/filter/index.d.ts

@@ -1,4 +1,4 @@
 export type { GridFilterState, GridFilterInitialState } from "./gridFilterState.js";
 export { getDefaultGridFilterModel } from "./gridFilterState.js";
-export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from "./gridFilterSelector.js";
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "./gridFilterSelector.js";
 export type { GridFilterActiveItemsLookup } from "./gridFilterSelector.js";

package/esm/hooks/features/filter/index.js

@@ -1,2 +1,2 @@
 export { getDefaultGridFilterModel } from "./gridFilterState.js";
-export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from "./gridFilterSelector.js";
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "./gridFilterSelector.js";

package/esm/hooks/features/rowReorder/gridRowReorderInterfaces.d.ts

@@ -1,3 +1,5 @@
+import type { GridRowId } from "../../../models/gridRows.js";
+import type { RowReorderDropPosition } from "../../../models/api/gridRowApi.js";
 /**
  * The row reorder state.
  */
@@ -6,4 +8,21 @@ export interface GridRowReorderState {
    * Whether a row drag operation is currently active.
    */
   isActive: boolean;
+  /**
+   * The row ID being dragged.
+   */
+  draggedRowId: GridRowId | null;
+  /**
+   * The current drop target information.
+   */
+  dropTarget?: {
+    /**
+     * The row ID where the drop indicator should be shown.
+     */
+    rowId: GridRowId;
+    /**
+     * The position of the drop indicator relative to the target row.
+     */
+    position: RowReorderDropPosition;
+  };
 }

package/esm/hooks/features/rowReorder/gridRowReorderSelector.d.ts

@@ -1,5 +1,24 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import type { GridRowId } from "../../../models/gridRows.js";
 export declare const gridRowReorderStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("./gridRowReorderInterfaces.js").GridRowReorderState>;
 export declare const gridIsRowDragActiveSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => boolean;
+} | null>) => boolean;
+export declare const gridRowDropTargetSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
+  rowId: GridRowId;
+  position: import("../../../internals/index.js").RowReorderDropPosition;
+} | {
+  rowId: null;
+  position: null;
+};
+export declare const gridRowDropTargetRowIdSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridRowId | null;
+export declare const gridRowDropPositionSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>, rowId: GridRowId) => import("../../../internals/index.js").RowReorderDropPosition | null;
+export declare const gridDraggedRowIdSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridRowId | null;

package/esm/hooks/features/rowReorder/gridRowReorderSelector.js

@@ -1,3 +1,21 @@
 import { createRootSelector, createSelector } from "../../../utils/createSelector.js";
 export const gridRowReorderStateSelector = createRootSelector(state => state.rowReorder);
-export const gridIsRowDragActiveSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.isActive ?? false);
+export const gridIsRowDragActiveSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.isActive ?? false);
+
+// Selector for the entire drop target state
+export const gridRowDropTargetSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.dropTarget ?? {
+  rowId: null,
+  position: null
+});
+export const gridRowDropTargetRowIdSelector = createSelector(gridRowDropTargetSelector, dropTarget => dropTarget.rowId ?? null);
+
+// Selector for a specific row's drop position
+export const gridRowDropPositionSelector = createSelector(gridRowDropTargetSelector, (dropTarget, rowId) => {
+  if (dropTarget.rowId === rowId) {
+    return dropTarget.position;
+  }
+  return null;
+});
+
+// Selector for the dragged row ID
+export const gridDraggedRowIdSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.draggedRowId ?? null);

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -100,6 +100,14 @@ export const useGridRowSelection = (apiRef, props) => {
     const currentModel = gridRowSelectionStateSelector(apiRef);
     if (currentModel !== model) {
       logger.debug(`Setting selection model`);
+
+      // clear the reference to the last selected row if that row is not in the model anymore
+      if (lastRowToggled.current !== null) {
+        const isInModel = model.ids.has(lastRowToggled.current);
+        if (model.type === 'include' && !isInModel || model.type === 'exclude' && isInModel) {
+          lastRowToggled.current = null;
+        }
+      }
       apiRef.current.setState(state => _extends({}, state, {
         rowSelection: props.rowSelection ? model : emptyModel
       }), reason);
@@ -128,7 +136,7 @@ export const useGridRowSelection = (apiRef, props) => {
       return;
     }
     const tree = gridRowTreeSelector(apiRef);
-    lastRowToggled.current = id;
+    lastRowToggled.current = isSelected ? id : null;
     if (resetSelection) {
       logger.debug(`Setting selection for row ${id}`);
       const newSelectionModel = {

package/esm/hooks/features/rows/useGridRows.js

@@ -52,7 +52,8 @@ export const useGridRows = (apiRef, props, configuration) => {
 
   // Get overridable methods from configuration
   const {
-    setRowIndex
+    setRowIndex,
+    setRowPosition
   } = configuration.hooks.useGridRowsOverridableMethods(apiRef, props);
   const getRow = React.useCallback(id => {
     const model = gridRowsLookupSelector(apiRef)[id];
@@ -337,6 +338,7 @@ export const useGridRows = (apiRef, props, configuration) => {
   };
   const rowProApi = {
     setRowIndex,
+    setRowPosition,
     setRowChildrenExpansion,
     getRowGroupChildren,
     expandAllRows,

package/esm/hooks/features/rows/useGridRowsOverridableMethods.d.ts

@@ -3,4 +3,5 @@ import { GridRowId } from "../../../models/gridRows.js";
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 export declare const useGridRowsOverridableMethods: (apiRef: RefObject<GridPrivateApiCommunity>) => {
   setRowIndex: (rowId: GridRowId, targetIndex: number) => void;
+  setRowPosition: (sourceRowId: GridRowId, targetRowId: GridRowId, position: import("../../../internals/index.js").RowReorderDropPosition) => void | Promise<void>;
 };