@mui/x-data-grid 8.19.0 → 8.21.0

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

@@ -1,20 +1,69 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { gridRowTreeSelector, gridRowNodeSelector } from "./gridRowsSelector.js";
+import { gridExpandedSortedRowIndexLookupSelector } from "../filter/gridFilterSelector.js";
 import { GRID_ROOT_GROUP_ID } from "./gridRowsUtils.js";
 export const useGridRowsOverridableMethods = apiRef => {
+  const setRowPosition = React.useCallback((sourceRowId, targetRowId, position) => {
+    const sourceNode = gridRowNodeSelector(apiRef, sourceRowId);
+    const targetNode = gridRowNodeSelector(apiRef, targetRowId);
+    if (!sourceNode) {
+      throw new Error(`MUI X: No row with id #${sourceRowId} found.`);
+    }
+    if (!targetNode) {
+      throw new Error(`MUI X: No row with id #${targetRowId} found.`);
+    }
+    if (sourceNode.type !== 'leaf') {
+      throw new Error(`MUI X: The row reordering does not support reordering of footer or grouping rows.`);
+    }
+    if (position === 'inside') {
+      throw new Error(`MUI X: The 'inside' position is only supported for tree data. Use 'above' or 'below' for flat data.`);
+    }
+
+    // Get the target index from the targetRowId using the lookup selector
+    const sortedFilteredRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(apiRef);
+    const targetRowIndexUnadjusted = sortedFilteredRowIndexLookup[targetRowId];
+    if (targetRowIndexUnadjusted === undefined) {
+      throw new Error(`MUI X: Target row with id #${targetRowId} not found in current view.`);
+    }
+    const sourceRowIndex = sortedFilteredRowIndexLookup[sourceRowId];
+    if (sourceRowIndex === undefined) {
+      throw new Error(`MUI X: Source row with id #${sourceRowId} not found in current view.`);
+    }
+    const dragDirection = targetRowIndexUnadjusted < sourceRowIndex ? 'up' : 'down';
+    let targetRowIndex;
+    if (dragDirection === 'up') {
+      targetRowIndex = position === 'above' ? targetRowIndexUnadjusted : targetRowIndexUnadjusted + 1;
+    } else {
+      targetRowIndex = position === 'above' ? targetRowIndexUnadjusted - 1 : targetRowIndexUnadjusted;
+    }
+    if (targetRowIndex === sourceRowIndex) {
+      return;
+    }
+    apiRef.current.setState(state => {
+      const group = gridRowTreeSelector(apiRef)[GRID_ROOT_GROUP_ID];
+      const allRows = group.children;
+      const updatedRows = [...allRows];
+      updatedRows.splice(targetRowIndex, 0, updatedRows.splice(sourceRowIndex, 1)[0]);
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          tree: _extends({}, state.rows.tree, {
+            [GRID_ROOT_GROUP_ID]: _extends({}, group, {
+              children: updatedRows
+            })
+          })
+        })
+      });
+    });
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef]);
   const setRowIndex = React.useCallback((rowId, targetIndex) => {
     const node = gridRowNodeSelector(apiRef, rowId);
     if (!node) {
       throw new Error(`MUI X: No row with id #${rowId} found.`);
     }
-
-    // TODO: Remove irrelevant checks
-    if (node.parent !== GRID_ROOT_GROUP_ID) {
-      throw new Error(`MUI X: The row reordering do not support reordering of grouped rows yet.`);
-    }
     if (node.type !== 'leaf') {
-      throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
+      throw new Error(`MUI X: The row reordering does not support reordering of footer or grouping rows.`);
     }
     apiRef.current.setState(state => {
       const group = gridRowTreeSelector(apiRef)[GRID_ROOT_GROUP_ID];
@@ -38,6 +87,7 @@ export const useGridRowsOverridableMethods = apiRef => {
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef]);
   return {
-    setRowIndex
+    setRowIndex,
+    setRowPosition
   };
 };

package/esm/hooks/features/sorting/gridSortingUtils.js

@@ -3,9 +3,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { gridRowNodeSelector } from "../rows/gridRowsSelector.js";
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
-    if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` 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 `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     return [model[0]];
   }
   return model;

package/esm/hooks/features/virtualization/useGridVirtualization.d.ts

@@ -1,10 +1,10 @@
 import { RefObject } from '@mui/x-internals/types';
-import { Virtualization } from '@mui/x-virtualizer';
+import { Virtualization, LayoutDataGridLegacy } from '@mui/x-virtualizer';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 type RootProps = DataGridProcessedProps;
-export type GridVirtualizationState = { [K in keyof Virtualization.State['virtualization']]: Virtualization.State['virtualization'][K] };
+export type GridVirtualizationState = { [K in keyof Virtualization.State<LayoutDataGridLegacy>['virtualization']]: Virtualization.State<LayoutDataGridLegacy>['virtualization'][K] };
 export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridVirtualization(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
 export {};

package/esm/hooks/utils/useGridSelector.js

@@ -31,10 +31,8 @@ const createRefs = () => ({
 const EMPTY = [];
 const emptyGetSnapshot = () => null;
 export function useGridSelector(apiRef, selector, args = undefined, equals = defaultCompare) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
-    }
+  if (!apiRef.current.state) {
+    warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
   }
   const refs = useLazyRef(createRefs);
   const didInit = refs.current.selector !== null;

package/esm/index.js

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

package/esm/internals/index.d.ts

@@ -41,7 +41,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
 export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
-export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 export type { GridAggregatedFilterItemApplier, GridAggregatedFilterItemApplierResult } from "../hooks/features/filter/gridFilterState.js";
 export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";
@@ -54,7 +54,7 @@ export { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGri
 export { useGridRowSpanning, rowSpanningStateInitializer } from "../hooks/features/rows/useGridRowSpanning.js";
 export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
-export { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
+export { useGridRowsOverridableMethods as useGridRowsOverridableMethodsCommunity } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
 export { useGridParamsOverridableMethods } from "../hooks/features/rows/useGridParamsOverridableMethods.js";
 export { useIsCellEditable } from "../hooks/features/editing/useGridCellEditable.js";
 export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
@@ -66,7 +66,7 @@ export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hoo
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
-export { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+export { gridIsRowDragActiveSelector, gridRowDropPositionSelector, gridRowDropTargetRowIdSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
 export type { GridRowReorderState } from "../hooks/features/rowReorder/gridRowReorderInterfaces.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
@@ -121,4 +121,5 @@ export type { GridConfiguration } from "../models/configuration/gridConfiguratio
 export type { CellEditableConditionFn } from "../models/configuration/gridCellEditableConfiguration.js";
 export * from "../hooks/features/pivoting/index.js";
 export { createSvgIcon } from "../material/icons/createSvgIcon.js";
-export { useGridPanelContext } from "../components/panel/GridPanelContext.js";
+export { useGridPanelContext } from "../components/panel/GridPanelContext.js";
+export type { RowReorderDropPosition, RowReorderDragDirection } from "../models/api/gridRowApi.js";

package/esm/internals/index.js

@@ -31,7 +31,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
 export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
-export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";
 export { useGridKeyboardNavigation } from "../hooks/features/keyboardNavigation/useGridKeyboardNavigation.js";
@@ -43,7 +43,7 @@ export { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGri
 export { useGridRowSpanning, rowSpanningStateInitializer } from "../hooks/features/rows/useGridRowSpanning.js";
 export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
-export { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
+export { useGridRowsOverridableMethods as useGridRowsOverridableMethodsCommunity } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
 export { useGridParamsOverridableMethods } from "../hooks/features/rows/useGridParamsOverridableMethods.js";
 export { useIsCellEditable } from "../hooks/features/editing/useGridCellEditable.js";
 export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
@@ -54,7 +54,7 @@ export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hoo
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
-export { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+export { gridIsRowDragActiveSelector, gridRowDropPositionSelector, gridRowDropTargetRowIdSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
 export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";

package/esm/material/index.js

@@ -589,10 +589,7 @@ function BasePopper(props) {
     if (flip) {
       result.push({
         name: 'flip',
-        enabled: true,
-        options: {
-          rootBoundary: 'document'
-        }
+        enabled: true
       });
     }
     if (onDidShow || onDidHide) {

package/esm/models/api/gridRowApi.d.ts

@@ -1,4 +1,6 @@
 import { GridRowModel, GridRowId, GridRowModelUpdate, GridValidRowModel, GridTreeNode } from "../gridRows.js";
+export type RowReorderDropPosition = 'above' | 'below' | 'inside';
+export type RowReorderDragDirection = 'up' | 'down';
 export interface GridRowGroupChildrenGetterParams {
   /**
    * The row id of the group
@@ -96,10 +98,21 @@ export interface GridRowApi {
 export interface GridRowProApi {
   /**
    * Moves a row from its original position to the position given by `targetIndex`.
+   * Doesn't support tree data ordering. Use `setRowPosition()` instead.
    * @param {GridRowId} rowId The row id
    * @param {number} targetIndex The new position (0-based).
+   * @returns {void | Promise<void>} Returns a Promise when async operations are involved (e.g., processRowUpdate)
+   * @deprecated Use `setRowPosition()` instead. This method will be removed in the next major version.
    */
-  setRowIndex: (rowId: GridRowId, targetIndex: number) => void;
+  setRowIndex: (rowId: GridRowId, targetIndex: number) => void | Promise<void>;
+  /**
+   * Moves a row to a new position relative to another row.
+   * @param {GridRowId} sourceRowId The ID of the row to move
+   * @param {GridRowId} targetRowId The ID of the row to position relative to
+   * @param {DropPosition} position Where to place the source row: 'above', 'below', or 'over' (for tree data)
+   * @returns {void | Promise<void>} Returns a Promise when async operations are involved (e.g., processRowUpdate)
+   */
+  setRowPosition: (sourceRowId: GridRowId, targetRowId: GridRowId, position: RowReorderDropPosition) => void | Promise<void>;
   /**
    * Gets the rows of a grouping criteria.
    * Only contains the rows provided to the grid, not the rows automatically generated by it.

package/esm/models/api/index.d.ts

@@ -3,7 +3,7 @@ export type { GridParamsApi } from "./gridParamsApi.js";
 export type { GridCoreApi } from "./gridCoreApi.js";
 export * from "./gridColumnApi.js";
 export * from "./gridDensityApi.js";
-export * from "./gridRowApi.js";
+export type { GridRowGroupChildrenGetterParams, GridRowApi, GridRowProApi, GridRowProPrivateApi } from "./gridRowApi.js";
 export type { GridRowsMetaApi } from "./gridRowsMetaApi.js";
 export * from "./gridRowSelectionApi.js";
 export * from "./gridSortApi.js";

package/esm/models/api/index.js

@@ -1,6 +1,5 @@
 export * from "./gridColumnApi.js";
 export * from "./gridDensityApi.js";
-export * from "./gridRowApi.js";
 export * from "./gridRowSelectionApi.js";
 export * from "./gridSortApi.js";
 export * from "./gridCsvExportApi.js";

package/esm/models/configuration/gridConfiguration.d.ts

@@ -3,14 +3,14 @@ import type { GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInter
 import type { GridAggregationInternalHooks } from "./gridAggregationConfiguration.js";
 import type { GridCellEditableInternalHook } from "./gridCellEditableConfiguration.js";
 import type { GridCSSVariablesInterface } from "../../constants/cssVariables.js";
-import { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridPrivateApiCommon } from "../api/gridApiCommon.js";
 import type { GridPrivateApiCommunity } from "../api/gridApiCommunity.js";
+import type { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridParamsOverridableMethodsInternalHook } from "./gridParamsConfiguration.js";
 export interface GridAriaAttributesInternalHook {
   useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
 }
-export interface GridInternalHook<Api, Props> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridCellEditableInternalHook<Api, Props>, GridAggregationInternalHooks<Api, Props>, GridRowsOverridableMethodsInternalHook<Api>, GridParamsOverridableMethodsInternalHook<Api> {
+export interface GridInternalHook<Api, Props> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridCellEditableInternalHook<Api, Props>, GridAggregationInternalHooks<Api, Props>, GridRowsOverridableMethodsInternalHook<Api, Props>, GridParamsOverridableMethodsInternalHook<Api> {
   useCSSVariables: () => {
     id: string;
     variables: GridCSSVariablesInterface;

package/esm/models/configuration/gridRowConfiguration.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
-import { GridTreeNode, GridRowId } from "../gridRows.js";
-import { DataGridProcessedProps } from "../props/DataGridProps.js";
+import { GridTreeNode } from "../gridRows.js";
+import { GridRowProApi } from "../api/index.js";
 /**
  * Get the ARIA attributes for a row
  * @param {GridTreeNode} rowNode The row node
@@ -15,8 +15,9 @@ export interface GridRowAriaAttributesInternalHook {
 /**
  * Overridable row methods interface, these methods could be overriden in a higher plan package.
  */
-export interface GridRowsOverridableMethodsInternalHook<Api> {
-  useGridRowsOverridableMethods: (apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, 'processRowUpdate' | 'onProcessRowUpdateError' | 'dataSource'>) => {
-    setRowIndex: (rowId: GridRowId, targetIndex: number) => void;
+export interface GridRowsOverridableMethodsInternalHook<Api, Props> {
+  useGridRowsOverridableMethods: (apiRef: RefObject<Api>, props: Props) => {
+    setRowIndex: GridRowProApi['setRowIndex'];
+    setRowPosition: GridRowProApi['setRowPosition'];
   };
 }

package/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/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/hooks/core/useGridVirtualizer.js

@@ -99,6 +99,8 @@ function useGridVirtualizer() {
     rightPinnedWidth,
     topPinnedHeight: headersTotalHeight,
     bottomPinnedHeight: 0,
+    autoHeight,
+    minimalContentHeight: _gridRowsUtils.minimalContentHeight,
     scrollbarSize: rootProps.scrollbarSize
   };
   const addGridDimensions = (0, _useLazyRef.default)(addGridDimensionsCreator).current;
@@ -121,13 +123,14 @@ function useGridVirtualizer() {
   const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.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
   (0, _utils.eslintUseValue)(focusedVirtualCell);
+  const layout = (0, _useLazyRef.default)(() => new _xVirtualizer.LayoutDataGridLegacy({
+    container: apiRef.current.mainElementRef,
+    scroller: apiRef.current.virtualScrollerRef,
+    scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+    scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+  })).current;
   const virtualizer = (0, _xVirtualizer.useVirtualizer)({
-    refs: {
-      container: apiRef.current.mainElementRef,
-      scroller: apiRef.current.virtualScrollerRef,
-      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
-      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
-    },
+    layout,
     dimensions: dimensionsParams,
     virtualization: {
       isRtl,
@@ -156,10 +159,8 @@ function useGridVirtualizer() {
     columns: visibleColumns,
     pinnedRows,
     pinnedColumns,
-    autoHeight,
     disableHorizontalScroll: listView,
     disableVerticalScroll: overlayState.overlayType === 'noColumnsOverlay' || overlayState.loadingOverlayVariant === 'skeleton',
-    minimalContentHeight: _gridRowsUtils.minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {
         return undefined;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -149,15 +149,24 @@ function extractColumnWidths(apiRef, options, columns) {
     if (options.includeHeaders) {
       const header = (0, _domUtils.findGridHeader)(apiRef.current, column.field);
       if (header) {
-        const title = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitle}`);
-        const content = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`);
-        const iconContainer = header.querySelector(`.${_gridClasses.gridClasses.iconButtonContainer}`);
+        const titleContainer = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainer}`);
+        const children = Array.from(titleContainer.children);
         const menuContainer = header.querySelector(`.${_gridClasses.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/hooks/features/dataSource/useGridDataSourceBase.js

@@ -122,7 +122,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
             params: fetchParams,
             cause: originalError
           }));
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           (0, _warning.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');
         }
       }
@@ -177,7 +177,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           params,
           cause: errorThrown
         }));
-      } else if (process.env.NODE_ENV !== 'production') {
+      } else {
         (0, _warning.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/hooks/features/dimensions/useGridDimensions.js

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

package/hooks/features/editing/useGridCellEditing.js

@@ -371,7 +371,7 @@ const useGridCellEditing = (apiRef, props) => {
         });
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           (0, _warning.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/hooks/features/editing/useGridRowEditing.js

@@ -455,7 +455,7 @@ const useGridRowEditing = (apiRef, props) => {
         }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           (0, _warning.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/hooks/features/export/serializers/csvSerializer.js

@@ -84,10 +84,8 @@ const serializeRow = ({
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
-    if (process.env.NODE_ENV !== 'production') {
-      if (String(cellParams.formattedValue) === '[object Object]') {
-        (0, _warning.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]') {
+      (0, _warning.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/hooks/features/filter/gridFilterUtils.js

@@ -49,24 +49,18 @@ const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiRef) =>
   const hasSeveralItems = model.items.length > 1;
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
-    if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.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');
-    }
+    (0, _warning.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) {
-      (0, _warning.warnOnce)('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
-    }
+  if (hasItemsWithoutIds) {
+    (0, _warning.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) {
-      (0, _warning.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) {
+    (0, _warning.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 (0, _extends2.default)({}, model, {

package/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/hooks/features/filter/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "gridExpandedSortedRowIdsSelector", {
     return _gridFilterSelector.gridExpandedSortedRowIdsSelector;
   }
 });
+Object.defineProperty(exports, "gridExpandedSortedRowIndexLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridFilterSelector.gridExpandedSortedRowIndexLookupSelector;
+  }
+});
 Object.defineProperty(exports, "gridFilterActiveItemsLookupSelector", {
   enumerable: true,
   get: function () {

package/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;
+  };
 }