@mui/x-data-grid 5.8.0 → 5.11.0

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;

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", "isProcessingProps"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -50,7 +50,8 @@ function GridEditInputCell(props) {
     colDef,
     hasFocus,
     debounceMs = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME,
-    isProcessingProps
+    isProcessingProps,
+    onValueChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -60,8 +61,13 @@ function GridEditInputCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const handleChange = React.useCallback(event => {
+  const handleChange = React.useCallback(async event => {
     const newValue = event.target.value;
+
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
+
     setValueState(newValue);
     api.setEditCellValue({
       id,
@@ -69,7 +75,7 @@ function GridEditInputCell(props) {
       value: newValue,
       debounceMs
     }, event);
-  }, [api, debounceMs, field, id]);
+  }, [api, debounceMs, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);
@@ -120,7 +126,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * Get the cell value of a row and field.
@@ -148,6 +154,14 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   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.
    */
@@ -156,7 +170,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired
+  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 { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,10 +1,18 @@
 /// <reference types="react" />
-import { SelectProps } from '@mui/material/Select';
+import { SelectProps, SelectChangeEvent } 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;
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'> {
+    /**
+     * Callback called when the value is changed by the user.
+     * @param {SelectChangeEvent<any>} event The event source of the callback.
+     * @param {any} 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: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+}
+declare function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps): JSX.Element;
 declare namespace GridEditSingleSelectCell {
     var propTypes: any;
 }
 export { GridEditSingleSelectCell };
-export declare const renderEditSingleSelectCell: GridColDef['renderEditCell'];
+export declare const renderEditSingleSelectCell: (params: GridEditSingleSelectCellProps) => JSX.Element;

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", "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 { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -8,19 +8,22 @@ import MenuItem from '@mui/material/MenuItem';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
-import { GridEvents } from '../../models/events/gridEvents';
+import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const renderSingleSelectOptions = option => typeof option === 'object' ? /*#__PURE__*/_jsx(MenuItem, {
-  value: option.value,
-  children: option.label
-}, option.value) : /*#__PURE__*/_jsx(MenuItem, {
-  value: option,
-  children: option
-}, option);
+const renderSingleSelectOptions = (option, OptionComponent) => {
+  const isOptionTypeObject = typeof option === 'object';
+  const key = isOptionTypeObject ? option.value : option;
+  const value = isOptionTypeObject ? option.value : option;
+  const content = isOptionTypeObject ? option.label : option;
+  return /*#__PURE__*/_jsx(OptionComponent, {
+    value: value,
+    children: content
+  }, key);
+};
 
 function GridEditSingleSelectCell(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
   const {
     id,
@@ -30,7 +33,8 @@ function GridEditSingleSelectCell(props) {
     row,
     colDef,
     hasFocus,
-    error
+    error,
+    onValueChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -38,6 +42,8 @@ function GridEditSingleSelectCell(props) {
   const inputRef = React.useRef();
   const rootProps = useGridRootProps();
   const [open, setOpen] = React.useState(rootProps.editMode === 'cell');
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   let valueOptionsFormatted;
 
   if (typeof colDef.valueOptions === 'function') {
@@ -72,11 +78,18 @@ function GridEditSingleSelectCell(props) {
     var _rootProps$experiment;
 
     setOpen(false);
-    const target = event.target;
+    const target = event.target; // NativeSelect casts the value to a string.
+
+    const formattedTargetValue = getValueFromValueOptions(target.value, valueOptionsFormatted);
+
+    if (onValueChange) {
+      await onValueChange(event, formattedTargetValue);
+    }
+
     const isValid = await api.setEditCellValue({
       id,
       field,
-      value: target.value
+      value: formattedTargetValue
     }, event);
 
     if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi) {
@@ -99,7 +112,7 @@ function GridEditSingleSelectCell(props) {
       if (event.key) {
         // TODO v6: remove once we stop ignoring events fired from portals
         const params = api.getCellParams(id, field);
-        api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+        api.publishEvent('cellNavigationKeyDown', params, event);
       }
     }
   };
@@ -145,9 +158,10 @@ function GridEditSingleSelectCell(props) {
       onClose: handleClose
     },
     error: error,
+    native: isSelectNative,
     fullWidth: true
-  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect, {
-    children: valueOptionsFormatted.map(renderSingleSelectOptions)
+  }, other, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
+    children: valueOptionsFormatted.map(valueOptions => renderSingleSelectOptions(valueOptions, isSelectNative ? 'option' : MenuItem))
   }));
 }
 
@@ -181,7 +195,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * Get the cell value of a row and field.
@@ -209,6 +223,14 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   isProcessingProps: PropTypes.bool,
   isValidating: PropTypes.bool,
 
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {any} 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.
    */
@@ -217,7 +239,17 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired
+  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 { GridEditSingleSelectCell };
 export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));

package/components/cell/index.d.ts

@@ -1,4 +1,6 @@
 export * from './GridCell';
+export * from './GridEditBooleanCell';
+export * from './GridEditDateCell';
 export * from './GridEditInputCell';
 export * from './GridEditSingleSelectCell';
 export * from './GridActionsCell';

package/components/cell/index.js

@@ -1,4 +1,6 @@
 export * from './GridCell';
+export * from './GridEditBooleanCell';
+export * from './GridEditDateCell';
 export * from './GridEditInputCell';
 export * from './GridEditSingleSelectCell';
 export * from './GridActionsCell';