@mui/x-data-grid 5.9.0 → 5.11.1

package/colDef/gridStringOperators.d.ts

@@ -1,2 +1,4 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import { GridCellParams } from '../models';
+export declare const getGridStringQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridStringOperators: () => GridFilterOperator<any, number | string | null, any>[];

package/colDef/gridStringOperators.js

@@ -1,6 +1,18 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { escapeRegExp } from '../utils/utils';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+export const getGridStringQuickFilterFn = value => {
+  if (!value) {
+    return null;
+  }
+
+  const filterRegex = new RegExp(escapeRegExp(value), 'i');
+  return ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
+  };
+};
 export const getGridStringOperators = () => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {

package/components/GridFooter.d.ts

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

package/components/GridFooter.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
 import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
@@ -11,7 +12,7 @@ import { GridFooterContainer } from './containers/GridFooterContainer';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   var _rootProps$components;
 
   const apiRef = useGridApiContext();
@@ -34,4 +35,12 @@ export const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(prop
   }, props, {
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridFooter.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 { GridFooter };

package/components/GridRow.js

@@ -9,7 +9,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { GridEvents } from '../models/events';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -136,6 +135,11 @@ function GridRow(props) {
 
       if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
+      } // User reorders a row
+
+
+      if (field === '__reorder__') {
+        return;
       } // User is editing a cell
 
 
@@ -151,7 +155,7 @@ function GridRow(props) {
       }
     }
 
-    publish(GridEvents.rowClick, onClick)(event);
+    publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
 
   const style = _extends({}, styleProp, {
@@ -282,9 +286,9 @@ function GridRow(props) {
     "aria-selected": selected,
     style: style,
     onClick: publishClick,
-    onDoubleClick: publish(GridEvents.rowDoubleClick, onDoubleClick),
-    onMouseEnter: publish(GridEvents.rowMouseEnter, onMouseEnter),
-    onMouseLeave: publish(GridEvents.rowMouseLeave, onMouseLeave)
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   }, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth,

package/components/GridRowCount.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 interface RowCountProps {
     rowCount: number;
     visibleRowCount: number;
 }
-declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridRowCount };

package/components/GridRowCount.js

@@ -65,6 +65,7 @@ process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   rowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   visibleRowCount: PropTypes.number.isRequired
 } : void 0;
 export { GridRowCount };

package/components/GridScrollArea.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { GridEvents } from '../models/events';
 import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -100,9 +99,9 @@ function GridScrollAreaRaw(props) {
   const toggleDragging = React.useCallback(() => {
     setDragging(prevDragging => !prevDragging);
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScrolling);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, toggleDragging);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, toggleDragging);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleScrolling);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', toggleDragging);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', toggleDragging);
   return dragging ? /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
     ref: rootRef,
     className: clsx(classes.root),

package/components/GridSelectedRowCount.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 interface SelectedRowCountProps {
     selectedRowCount: number;
 }
-declare const GridSelectedRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridSelectedRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridSelectedRowCount };

package/components/GridSelectedRowCount.js

@@ -66,6 +66,7 @@ process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  selectedRowCount: PropTypes.number.isRequired
+  selectedRowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridSelectedRowCount };

package/components/base/GridBody.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridEvents } from '../../models/events';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
@@ -46,7 +45,7 @@ function GridBody(props) {
   apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization
 
   const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent(GridEvents.resize, size);
+    apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/_jsxs(GridMainContainer, {
     children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(ColumnHeadersComponent, {

package/components/base/GridOverlays.js

@@ -7,7 +7,6 @@ import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/featu
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
-import { GridEvents } from '../../models/events';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridOverlayWrapper(props) {
@@ -27,7 +26,7 @@ function GridOverlayWrapper(props) {
     setViewportInnerSize((_apiRef$current$getRo3 = (_apiRef$current$getRo4 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo4.viewportInnerSize) != null ? _apiRef$current$getRo3 : null);
   }, [apiRef]);
   useEnhancedEffect(() => {
-    return apiRef.current.subscribeEvent(GridEvents.viewportInnerSizeChange, handleViewportSizeChange);
+    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
   }, [apiRef, handleViewportSizeChange]);
   let height = (_viewportInnerSize$he = viewportInnerSize == null ? void 0 : viewportInnerSize.height) != null ? _viewportInnerSize$he : 0;
 
@@ -72,7 +71,7 @@ export function GridOverlays() {
     overlay = /*#__PURE__*/_jsx(rootProps.components.NoResultsOverlay, _extends({}, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.noResultsOverlay));
   }
 
-  if (rootProps.loading) {
+  if (loading) {
     var _rootProps$components3;
 
     overlay = /*#__PURE__*/_jsx(rootProps.components.LoadingOverlay, _extends({}, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.loadingOverlay));

package/components/cell/GridActionsCell.js

@@ -46,12 +46,16 @@ const GridActionsCell = props => {
     }
   }, [hasFocus]);
   React.useEffect(() => {
-    if (focusedButtonIndex >= 0) {
-      var _rootRef$current;
+    if (focusedButtonIndex < 0 || !rootRef.current) {
+      return;
+    }
 
-      const child = (_rootRef$current = rootRef.current) == null ? void 0 : _rootRef$current.children[focusedButtonIndex];
-      child.focus();
+    if (focusedButtonIndex >= rootRef.current.children.length) {
+      return;
     }
+
+    const child = rootRef.current.children[focusedButtonIndex];
+    child.focus();
   }, [focusedButtonIndex]);
   React.useEffect(() => {
     if (!hasFocus) {
@@ -77,6 +81,11 @@ const GridActionsCell = props => {
   const iconButtons = options.filter(option => !option.props.showInMenu);
   const menuButtons = options.filter(option => option.props.showInMenu);
   const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
+  React.useEffect(() => {
+    if (focusedButtonIndex >= numberOfButtons) {
+      setFocusedButtonIndex(numberOfButtons - 1);
+    }
+  }, [focusedButtonIndex, numberOfButtons]);
 
   const showMenu = () => {
     setOpen(true);

package/components/cell/GridCell.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { ownerDocument, capitalize } from '@mui/material/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { GridEvents, GridCellModes } from '../../models';
+import { GridCellModes } from '../../models';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
@@ -194,13 +194,13 @@ function GridCell(props) {
     "aria-colspan": colSpan,
     style: style,
     tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
-    onClick: publish(GridEvents.cellClick, onClick),
-    onDoubleClick: publish(GridEvents.cellDoubleClick, onDoubleClick),
-    onMouseDown: publish(GridEvents.cellMouseDown, onMouseDown),
-    onMouseUp: publishMouseUp(GridEvents.cellMouseUp),
-    onKeyDown: publish(GridEvents.cellKeyDown, onKeyDown),
-    onDragEnter: publish(GridEvents.cellDragEnter, onDragEnter),
-    onDragOver: publish(GridEvents.cellDragOver, onDragOver)
+    onClick: publish('cellClick', onClick),
+    onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+    onMouseDown: publish('cellMouseDown', onMouseDown),
+    onMouseUp: publishMouseUp('cellMouseUp'),
+    onKeyDown: publish('cellKeyDown', onKeyDown),
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
   }, other, {
     onFocus: handleFocus,
     children: renderChildren()

package/components/cell/GridEditBooleanCell.d.ts

@@ -1,5 +1,17 @@
 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: GridColDef['renderEditCell'];
+export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'id' | 'tabIndex'> {
+    /**
+     * Callback called when the value is changed by the user.
+     * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+     * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+     * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+     */
+    onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => Promise<void> | void;
+}
+declare function GridEditBooleanCell(props: GridEditBooleanCellProps): JSX.Element;
+declare namespace GridEditBooleanCell {
+    var propTypes: any;
+}
+export { GridEditBooleanCell };
+export declare const renderEditBooleanCell: (params: GridEditBooleanCellProps) => JSX.Element;

package/components/cell/GridEditBooleanCell.js

@@ -1,7 +1,8 @@
 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", "isProcessingProps", "error"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -19,7 +20,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function GridEditBooleanCell(props) {
+function GridEditBooleanCell(props) {
   var _rootProps$components;
 
   const {
@@ -28,7 +29,8 @@ export function GridEditBooleanCell(props) {
     api,
     field,
     className,
-    hasFocus
+    hasFocus,
+    onValueChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -40,15 +42,20 @@ export function GridEditBooleanCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const handleChange = React.useCallback(event => {
+  const handleChange = React.useCallback(async event => {
     const newValue = event.target.checked;
+
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
+
     setValueState(newValue);
-    api.setEditCellValue({
+    await api.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
-  }, [api, field, idProp]);
+  }, [api, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);
@@ -70,4 +77,92 @@ export function GridEditBooleanCell(props) {
     }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseCheckbox))
   }));
 }
+
+process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @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,
+
+  /**
+   * 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,
+
+  /**
+   * 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,
+
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
+  /**
+   * 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,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditBooleanCell };
 export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));

package/components/cell/GridEditDateCell.d.ts

@@ -1,6 +1,18 @@
-/// <reference types="react" />
+import * as React from '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: GridColDef['renderEditCell'];
+export interface GridEditDateCellProps extends GridRenderEditCellParams, Omit<InputBaseProps, 'id' | 'value' | 'tabIndex'> {
+    /**
+     * Callback called when the value is changed by the user.
+     * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+     * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+     * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+     */
+    onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: Date | null) => Promise<void> | void;
+}
+declare function GridEditDateCell(props: GridEditDateCellProps): JSX.Element;
+declare namespace GridEditDateCell {
+    var propTypes: any;
+}
+export { GridEditDateCell };
+export declare const renderEditDateCell: (params: GridRenderEditCellParams) => JSX.Element;

package/components/cell/GridEditDateCell.js

@@ -1,7 +1,8 @@
 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", "isProcessingProps"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase from '@mui/material/InputBase';
@@ -19,7 +20,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function GridEditDateCell(props) {
+function GridEditDateCell(props) {
   const {
     id,
     value: valueProp,
@@ -27,7 +28,8 @@ export function GridEditDateCell(props) {
     field,
     colDef,
     hasFocus,
-    inputProps
+    inputProps,
+    onValueChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -64,7 +66,7 @@ export function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const handleChange = React.useCallback(event => {
+  const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
     let newParsedDate;
 
@@ -83,6 +85,10 @@ export function GridEditDateCell(props) {
       }
     }
 
+    if (onValueChange) {
+      await onValueChange(event, newParsedDate);
+    }
+
     setValueState({
       parsed: newParsedDate,
       formatted: newFormattedDate
@@ -92,7 +98,7 @@ export function GridEditDateCell(props) {
       field,
       value: newParsedDate
     }, event);
-  }, [api, field, id]);
+  }, [api, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(state => {
       var _valueTransformed$par, _state$parsed;
@@ -121,4 +127,92 @@ export function GridEditDateCell(props) {
     onChange: handleChange
   }, other));
 }
+
+process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @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,
+
+  /**
+   * 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,
+
+  /**
+   * 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,
+
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
+  /**
+   * 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,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditDateCell };
 export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));

package/components/cell/GridEditInputCell.d.ts

@@ -1,13 +1,19 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
-import { GridColDef } from '../../models/colDef/gridColDef';
-interface GridEditInputCellProps {
+export interface GridEditInputCellProps extends GridRenderEditCellParams, Omit<InputBaseProps, 'id' | 'value' | 'tabIndex'> {
     debounceMs?: number;
+    /**
+     * Callback called when the value is changed by the user.
+     * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+     * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+     * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+     */
+    onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
 }
-declare function GridEditInputCell(props: GridEditInputCellProps & GridRenderEditCellParams & Omit<InputBaseProps, 'id'>): JSX.Element;
+declare function GridEditInputCell(props: GridEditInputCellProps): JSX.Element;
 declare namespace GridEditInputCell {
     var propTypes: any;
 }
 export { GridEditInputCell };
-export declare const renderEditInputCell: GridColDef['renderEditCell'];
+export declare const renderEditInputCell: (params: GridEditInputCellProps) => JSX.Element;