@mui/x-data-grid 8.18.0 → 8.20.0

package/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/internals/index.js

@@ -46,7 +46,6 @@ var _exportNames = {
   passFilterLogic: true,
   gridFilteredChildrenCountLookupSelector: true,
   gridExpandedSortedRowTreeLevelPositionLookupSelector: true,
-  gridExpandedSortedRowIndexLookupSelector: true,
   gridFilteredSortedDepthRowEntriesSelector: true,
   useGridFocus: true,
   focusStateInitializer: true,
@@ -64,7 +63,7 @@ var _exportNames = {
   rowSpanningStateInitializer: true,
   useGridAriaAttributes: true,
   useGridRowAriaAttributes: true,
-  useGridRowsOverridableMethods: true,
+  useGridRowsOverridableMethodsCommunity: true,
   useGridParamsOverridableMethods: true,
   useIsCellEditable: true,
   useGridRowsPreProcessors: true,
@@ -85,6 +84,8 @@ var _exportNames = {
   useGridRowSelection: true,
   rowSelectionStateInitializer: true,
   gridIsRowDragActiveSelector: true,
+  gridRowDropPositionSelector: true,
+  gridRowDropTargetRowIdSelector: true,
   useGridRowSelectionPreProcessors: true,
   useGridSorting: true,
   sortingStateInitializer: true,
@@ -396,12 +397,6 @@ Object.defineProperty(exports, "gridEditRowsStateSelector", {
     return _gridEditingSelectors.gridEditRowsStateSelector;
   }
 });
-Object.defineProperty(exports, "gridExpandedSortedRowIndexLookupSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridFilterSelector.gridExpandedSortedRowIndexLookupSelector;
-  }
-});
 Object.defineProperty(exports, "gridExpandedSortedRowTreeLevelPositionLookupSelector", {
   enumerable: true,
   get: function () {
@@ -450,6 +445,18 @@ Object.defineProperty(exports, "gridPinnedRowsSelector", {
     return _gridRowsSelector.gridPinnedRowsSelector;
   }
 });
+Object.defineProperty(exports, "gridRowDropPositionSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowReorderSelector.gridRowDropPositionSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowDropTargetRowIdSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowReorderSelector.gridRowDropTargetRowIdSelector;
+  }
+});
 Object.defineProperty(exports, "gridRowGroupsToFetchSelector", {
   enumerable: true,
   get: function () {
@@ -792,7 +799,7 @@ Object.defineProperty(exports, "useGridRowsMeta", {
     return _useGridRowsMeta.useGridRowsMeta;
   }
 });
-Object.defineProperty(exports, "useGridRowsOverridableMethods", {
+Object.defineProperty(exports, "useGridRowsOverridableMethodsCommunity", {
   enumerable: true,
   get: function () {
     return _useGridRowsOverridableMethods.useGridRowsOverridableMethods;

package/material/index.js

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

package/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/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/models/api/index.js

@@ -25,17 +25,6 @@ Object.keys(_gridDensityApi).forEach(function (key) {
     }
   });
 });
-var _gridRowApi = require("./gridRowApi");
-Object.keys(_gridRowApi).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridRowApi[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridRowApi[key];
-    }
-  });
-});
 var _gridRowSelectionApi = require("./gridRowSelectionApi");
 Object.keys(_gridRowSelectionApi).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/models/colDef/gridColDef.d.ts

@@ -257,6 +257,20 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
    * Function that returns the actions to be shown.
    * @param {GridRowParams} params The params for each row.
    * @returns {readonly React.ReactElement<GridActionsCellItemProps>[]} An array of [[GridActionsCell]] elements.
+   * @deprecated Use `renderCell` instead
+   * @example
+   * // Before
+   * getActions: (params) => [
+   *   <GridActionsCellItem icon={...} onClick={...} label="Delete" />,
+   *   <GridActionsCellItem icon={...} onClick={...} label="Print" showInMenu />,
+   * ],
+   * // After
+   * renderCell: (params) => (
+   *   <GridActionsCell {...params}>
+   *     <GridActionsCellItem icon={...} onClick={...} label="Delete" />
+   *     <GridActionsCellItem icon={...} onClick={...} label="Print" showInMenu />
+   *   </GridActionsCell>
+   * ),
    */
   getActions: (params: GridRowParams<R>) => readonly React.ReactElement<GridActionsCellItemProps>[];
 }

package/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/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/models/events/gridEventLookup.d.ts

@@ -516,6 +516,11 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
    * @ignore - do not document
    */
   sortedRowsSet: {};
+  /**
+   * Fired when the aggregations are done
+   * @ignore - do not document
+   */
+  aggregationLookupSet: {};
   /**
    * Fired when the expansion of a row is changed. Called with a [[GridGroupNode]] object.
    */

package/models/gridStateCommunity.d.ts

@@ -13,7 +13,7 @@ import type { GridRowReorderState } from "../hooks/features/rowReorder/gridRowRe
  * Some props are passed on the state to enable grid selectors to select
  * and react to them.
  */
-export type GridStateProps = Pick<DataGridProcessedProps, 'getRowId' | 'listView' | 'isCellEditable'>;
+export type GridStateProps = Pick<DataGridProcessedProps, 'getRowId' | 'listView' | 'isCellEditable' | 'isRowSelectable'>;
 /**
  * The state of Data Grid.
  */

package/models/params/gridCellParams.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { GridCellMode } from "../gridCell.js";
 import { GridRowId, GridRowModel, GridTreeNode, GridTreeNodeWithRender, GridValidRowModel } from "../gridRows.js";
 import type { GridStateColDef } from "../colDef/gridColDef.js";
@@ -58,9 +57,6 @@ export interface GridCellParams<R extends GridValidRowModel = any, V = unknown,
    */
   api: GridApiCommunity;
 }
-export interface FocusElement {
-  focus(): void;
-}
 /**
  * GridCellParams containing api.
  */
@@ -69,12 +65,6 @@ export interface GridRenderCellParams<R extends GridValidRowModel = any, V = any
    * GridApi that let you manipulate the grid.
    */
   api: GridApiCommunity;
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef?: React.Ref<FocusElement>;
 }
 /**
  * GridEditCellProps containing api.

package/models/props/DataGridProps.d.ts

@@ -79,13 +79,11 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
  */
 export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = any> {
   /**
-   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and takes as much space as it needs to display all rows.
+   * Use it instead of a flex parent container approach, if:
+   * - you don't need to set a minimum or maximum height for the Data Grid
+   * - you want to avoid the scrollbar flickering when the content changes
    * @default false
-   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
-   * @example
-   * <div style={{ display: 'flex', flexDirection: 'column' }}>
-   *   <DataGrid />
-   * </div>
    */
   autoHeight: boolean;
   /**
@@ -381,6 +379,15 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default false
    */
   virtualizeColumnsWithAutoRowHeight: boolean;
+  /**
+   * Sets the tab navigation behavior for the Data Grid.
+   * - "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence.
+   * - "content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header.
+   * - "header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content.
+   * - "all": Combines the "content" and "header" behavior.
+   * @default "none"
+   */
+  tabNavigation: 'none' | 'content' | 'header' | 'all';
 }
 /**
  * The Data Grid props with no default value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.18.0",
+  "version": "8.20.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "8.18.0",
-    "@mui/x-virtualizer": "0.2.8"
+    "@mui/x-internals": "8.19.0",
+    "@mui/x-virtualizer": "0.2.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/keyboardUtils.d.ts

@@ -1,14 +1,7 @@
 import * as React from 'react';
 export declare function isPrintableKey(event: React.KeyboardEvent<HTMLElement>): boolean;
-export declare const GRID_MULTIPLE_SELECTION_KEYS: string[];
-export declare const GRID_CELL_EXIT_EDIT_MODE_KEYS: string[];
-export declare const GRID_CELL_EDIT_COMMIT_KEYS: string[];
-export declare const isMultipleKey: (key: string) => boolean;
-export declare const isCellEnterEditModeKeys: (event: React.KeyboardEvent<HTMLElement>) => boolean;
-export declare const isCellExitEditModeKeys: (key: string) => boolean;
-export declare const isCellEditCommitKeys: (key: string) => boolean;
 export declare const isNavigationKey: (key: string) => boolean;
 export declare const isKeyboardEvent: (event: any) => event is React.KeyboardEvent<HTMLElement>;
-export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is "Escape" | "Tab";
+export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is "Tab" | "Escape";
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;
 export declare function isCopyShortcut(event: KeyboardEvent): boolean;

package/utils/keyboardUtils.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isCellExitEditModeKeys = exports.isCellEnterEditModeKeys = exports.isCellEditCommitKeys = exports.GRID_MULTIPLE_SELECTION_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = void 0;
 exports.isCopyShortcut = isCopyShortcut;
-exports.isNavigationKey = exports.isMultipleKey = exports.isKeyboardEvent = exports.isHideMenuKey = void 0;
+exports.isNavigationKey = exports.isKeyboardEvent = exports.isHideMenuKey = void 0;
 exports.isPasteShortcut = isPasteShortcut;
 exports.isPrintableKey = isPrintableKey;
 // Non printable keys have a name, for example "ArrowRight", see the whole list:
@@ -18,17 +17,6 @@ exports.isPrintableKey = isPrintableKey;
 function isPrintableKey(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
 }
-const GRID_MULTIPLE_SELECTION_KEYS = exports.GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
-const GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
-const GRID_CELL_EDIT_COMMIT_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
-const isMultipleKey = key => GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;
-exports.isMultipleKey = isMultipleKey;
-const isCellEnterEditModeKeys = event => isPrintableKey(event) || event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete';
-exports.isCellEnterEditModeKeys = isCellEnterEditModeKeys;
-const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;
-exports.isCellExitEditModeKeys = isCellExitEditModeKeys;
-const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
-exports.isCellEditCommitKeys = isCellEditCommitKeys;
 const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page') === 0 || key === ' ' || key === 'Home' || key === 'End';
 exports.isNavigationKey = isNavigationKey;
 const isKeyboardEvent = event => !!event.key;