@mui/x-data-grid 5.6.0 → 5.8.0

package/components/GridNoResultsOverlay.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-import { GridOverlayProps } from './containers/GridOverlay';
-export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<GridOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/components/GridNoRowsOverlay.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { GridOverlayProps } from './containers/GridOverlay';
-export declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<GridOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridNoRowsOverlay };

package/components/GridNoRowsOverlay.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay } from './containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
   const apiRef = useGridApiContext();
   const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
@@ -11,4 +12,12 @@ export const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRo
   }, props, {
     children: noRowsLabel
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridNoRowsOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridNoRowsOverlay };

package/components/GridRow.js

@@ -16,6 +16,7 @@ import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
@@ -83,6 +84,7 @@ function GridRow(props) {
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const {
     hasScrollX,
@@ -150,12 +152,36 @@ function GridRow(props) {
     publish(GridEvents.rowClick, onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
 
-  const style = _extends({
+  const style = _extends({}, styleProp, {
     maxHeight: rowHeight,
     minHeight: rowHeight
-  }, styleProp);
+  });
+
+  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+
+  if (sizes != null && sizes.spacingTop) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes != null && sizes.spacingBottom) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+    style[property] = sizes.spacingBottom;
+  }
+
+  let rowClassName = null;
+
+  if (typeof rootProps.getRowClassName === 'function') {
+    const indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
+
+    const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+    });
+
+    rowClassName = rootProps.getRowClassName(rowParams);
+  }
 
-  const rowClassName = typeof rootProps.getRowClassName === 'function' && rootProps.getRowClassName(apiRef.current.getRowParams(rowId));
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {
@@ -260,7 +286,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
   rowHeight: PropTypes.number.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/components/base/GridErrorHandler.d.ts

@@ -1,2 +1,8 @@
-/// <reference types="react" />
-export declare function GridErrorHandler(props: any): JSX.Element;
+import * as React from 'react';
+declare function GridErrorHandler(props: {
+    children: React.ReactNode;
+}): JSX.Element;
+declare namespace GridErrorHandler {
+    var propTypes: any;
+}
+export { GridErrorHandler };

package/components/base/GridErrorHandler.js

@@ -1,21 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridLogger } from '../../hooks/utils/useGridLogger';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridAutoSizer } from '../GridAutoSizer';
-import { GridEvents } from '../../models/events/gridEvents';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ErrorOverlayWrapper = styled('div')({
-  position: 'absolute',
-  top: 0,
-  width: '100%',
-  height: '100%'
-});
-export function GridErrorHandler(props) {
+
+function GridErrorHandler(props) {
   const {
     children
   } = props;
@@ -23,28 +16,27 @@ export function GridErrorHandler(props) {
   const logger = useGridLogger(apiRef, 'GridErrorHandler');
   const rootProps = useGridRootProps();
   const error = apiRef.current.state.error;
-  const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent(GridEvents.resize, size);
-  }, [apiRef]);
   return /*#__PURE__*/_jsx(ErrorBoundary, {
     hasError: error != null,
     componentProps: error,
     api: apiRef,
     logger: logger,
-    render: errorProps => /*#__PURE__*/_jsx(GridMainContainer, {
-      children: /*#__PURE__*/_jsx(GridAutoSizer, {
-        nonce: rootProps.nonce,
-        disableHeight: rootProps.autoHeight,
-        onResize: handleResize,
-        children: () => {
-          var _rootProps$components;
+    render: errorProps => {
+      var _rootProps$components;
 
-          return /*#__PURE__*/_jsx(ErrorOverlayWrapper, {
-            children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
-          });
-        }
-      })
-    }),
+      return /*#__PURE__*/_jsx(GridMainContainer, {
+        children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
+      });
+    },
     children: children
   });
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridErrorHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node
+} : void 0;
+export { GridErrorHandler };

package/components/cell/GridBooleanCell.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
 }
 export declare const GridBooleanCell: React.MemoExoticComponent<(props: GridBooleanCellProps) => JSX.Element>;
-export declare const renderBooleanCell: (params: GridBooleanCellProps) => "" | JSX.Element;
+export declare const renderBooleanCell: GridColDef['renderCell'];
 export {};

package/components/cell/GridCell.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { GridCellMode, GridCellValue, GridRowId } from '../../models';
+import { GridCellMode, GridRowId } from '../../models';
 import { GridAlignment } from '../../models/colDef/gridColDef';
-export interface GridCellProps {
+export interface GridCellProps<V = any, F = V> {
     align: GridAlignment;
     className?: string;
     colIndex: number;
     field: string;
     rowId: GridRowId;
-    formattedValue?: GridCellValue;
+    formattedValue?: F;
     hasFocus?: boolean;
     height: number;
     isEditable?: boolean;
     showRightBorder?: boolean;
-    value?: GridCellValue;
+    value?: V;
     width: number;
     cellMode?: GridCellMode;
     children: React.ReactNode;

package/components/cell/GridCell.js

@@ -48,6 +48,8 @@ const useUtilityClasses = ownerState => {
 let warnedOnce = false;
 
 function GridCell(props) {
+  var _rootProps$experiment;
+
   const {
     align,
     children,
@@ -141,7 +143,7 @@ function GridCell(props) {
   }, [hasFocus, cellMode, apiRef]);
   let handleFocus = other.onFocus;
 
-  if (process.env.NODE_ENV === 'test') {
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
       const focusedCell = gridFocusCellSelector(apiRef);
 
@@ -154,7 +156,7 @@ function GridCell(props) {
       }
 
       if (!warnedOnce) {
-        console.error([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, 'In the next render, the focus will be changed to match the state.', 'Call `fireEvent.mouseUp` and `fireEvent.click` before to sync the focus with the state.'].join('\n'));
+        console.warn([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
         warnedOnce = true;
       }
     };
@@ -196,7 +198,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
   field: PropTypes.string.isRequired,
-  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,
   height: PropTypes.number.isRequired,
   isEditable: PropTypes.bool,
@@ -210,7 +212,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   showRightBorder: PropTypes.bool,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  value: PropTypes.any,
   width: PropTypes.number.isRequired
 } : void 0;
 export { GridCell };

package/components/cell/GridEditBooleanCell.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 export declare function GridEditBooleanCell(props: GridRenderEditCellParams & Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'id'>): JSX.Element;
-export declare const renderEditBooleanCell: (params: any) => JSX.Element;
+export declare const renderEditBooleanCell: GridColDef['renderEditCell'];

package/components/cell/GridEditBooleanCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';

package/components/cell/GridEditDateCell.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 export declare function GridEditDateCell(props: GridRenderEditCellParams & Omit<InputBaseProps, 'id'>): JSX.Element;
-export declare const renderEditDateCell: (params: any) => JSX.Element;
+export declare const renderEditDateCell: GridColDef['renderEditCell'];

package/components/cell/GridEditDateCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps"];
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';

package/components/cell/GridEditInputCell.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 interface GridEditInputCellProps {
     debounceMs?: number;
 }
@@ -9,4 +10,4 @@ declare namespace GridEditInputCell {
     var propTypes: any;
 }
 export { GridEditInputCell };
-export declare const renderEditInputCell: (params: any) => JSX.Element;
+export declare const renderEditInputCell: GridColDef['renderEditCell'];

package/components/cell/GridEditInputCell.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -9,6 +9,7 @@ import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -37,6 +38,10 @@ const GridEditInputCellRoot = styled(InputBase, {
 }));
 
 function GridEditInputCell(props) {
+  var _rootProps$experiment;
+
+  const rootProps = useGridRootProps();
+
   const {
     id,
     value,
@@ -44,13 +49,13 @@ function GridEditInputCell(props) {
     field,
     colDef,
     hasFocus,
-    debounceMs = SUBMIT_FILTER_STROKE_TIME
+    debounceMs = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME,
+    isProcessingProps
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
-  const rootProps = useGridRootProps();
   const ownerState = {
     classes: rootProps.classes
   };
@@ -79,7 +84,8 @@ function GridEditInputCell(props) {
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
-    onChange: handleChange
+    onChange: handleChange,
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
   }, other));
 }
 
@@ -94,8 +100,63 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
   debounceMs: PropTypes.number,
-  isValidating: PropTypes.bool
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any.isRequired,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired
 } : void 0;
 export { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { SelectProps } from '@mui/material/Select';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 declare function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectProps, 'id'>): JSX.Element;
 declare namespace GridEditSingleSelectCell {
     var propTypes: any;
 }
 export { GridEditSingleSelectCell };
-export declare const renderEditSingleSelectCell: (params: any) => JSX.Element;
+export declare const renderEditSingleSelectCell: GridColDef['renderEditCell'];

package/components/cell/GridEditSingleSelectCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -69,12 +69,20 @@ function GridEditSingleSelectCell(props) {
   }
 
   const handleChange = async event => {
+    var _rootProps$experiment;
+
     setOpen(false);
+    const target = event.target;
     const isValid = await api.setEditCellValue({
       id,
       field,
-      value: event.target.value
-    }, event); // We use isValid === false because the default return is undefined which evaluates to true with !isValid
+      value: target.value
+    }, event);
+
+    if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi) {
+      return;
+    } // We use isValid === false because the default return is undefined which evaluates to true with !isValid
+
 
     if (rootProps.editMode === GridEditModes.Row || isValid === false) {
       return;
@@ -103,7 +111,17 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      api.setCellMode(id, field, 'view');
+      var _rootProps$experiment2;
+
+      if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+        api.stopCellEditMode({
+          id,
+          field,
+          ignoreModifications: true
+        });
+      } else {
+        api.setCellMode(id, field, 'view');
+      }
     }
   };
 
@@ -144,7 +162,62 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: PropTypes.any.isRequired,
-  isValidating: PropTypes.bool
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any.isRequired,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired
 } : void 0;
 export { GridEditSingleSelectCell };
 export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));

package/components/columnHeaders/GridColumnHeaderFilterIconButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
+export interface ColumnHeaderFilterIconButtonProps {
+    field: string;
+    counter?: number;
+    onClick?: (params: GridColumnHeaderParams, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonProps): JSX.Element | null;
+declare namespace GridColumnHeaderFilterIconButton {
+    var propTypes: any;
+}
+export { GridColumnHeaderFilterIconButton };

package/components/columnHeaders/{ColumnHeaderFilterIcon.js → GridColumnHeaderFilterIconButton.js}

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
@@ -22,11 +23,13 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   var _rootProps$components;
 
   const {
-    counter
+    counter,
+    field,
+    onClick
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -49,7 +52,11 @@ export function ColumnHeaderFilterIcon(props) {
     } else {
       apiRef.current.showFilterPanel();
     }
-  }, [apiRef]);
+
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick]);
 
   if (!counter) {
     return null;
@@ -79,4 +86,15 @@ export function ColumnHeaderFilterIcon(props) {
       }), counter === 1 && iconButton]
     })
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnHeaderFilterIconButton };