@mui/x-data-grid 6.0.0-alpha.2 → 6.0.0-alpha.3

package/models/api/gridEditingApi.d.ts

@@ -1,8 +1,8 @@
 import { GridCellMode, GridRowMode } from '../gridCell';
-import { GridEditRowsModel, GridEditCellProps, GridCellModes, GridRowModes } from '../gridEditRowModel';
+import { GridCellModes, GridRowModes } from '../gridEditRowModel';
 import { GridRowId, GridRowModel } from '../gridRows';
 import { GridCellParams } from '../params/gridCellParams';
-import { GridCommitCellChangeParams, GridEditCellValueParams, GridEditCellPropsParams } from '../params/gridEditCellParams';
+import { GridEditCellValueParams } from '../params/gridEditCellParams';
 import { MuiBaseEvent } from '../muiEvent';
 export declare type GridCellModesModelProps = ({
     mode: GridCellModes.View;
@@ -19,7 +19,7 @@ export declare type GridRowModesModel = Record<GridRowId, GridRowModesModelProps
 export interface GridEditCellMeta {
     changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
 }
-export interface GridNewEditingSharedApi {
+export interface GridEditingSharedApi {
     /**
      * Controls if a cell is editable.
      * @param {GridCellParams} params The cell params.
@@ -31,7 +31,7 @@ export interface GridNewEditingSharedApi {
      * Commonly used inside the edit cell component.
      * @param {GridEditCellValueParams} params Contains the id, field and value to set.
      * @param {React.SyntheticEvent} event The event to pass forward.
-     * @returns {Promise<boolean> | void} A promise with the validation status if `preventCommitWhileValidating` is `true`. Otherwise, void.
+     * @returns {Promise<boolean> | void} A promise with the validation status.
      */
     setEditCellValue: (params: GridEditCellValueParams, event?: MuiBaseEvent) => Promise<boolean> | void;
     /**
@@ -57,116 +57,6 @@ export interface GridNewEditingSharedApi {
      */
     unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta;
 }
-/**
- * The shared methods used by the cell and row editing API.
- */
-export interface GridEditingSharedApi {
-    /**
-     * Set the edit rows model of the grid.
-     * @param {GridEditRowsModel} model The new edit rows model.
-     * @deprecated Prefer the new editing API.
-     */
-    setEditRowsModel: (model: GridEditRowsModel) => void;
-    /**
-     * Gets the edit rows model of the grid.
-     * @returns {GridEditRowsModel} The edit rows model.
-     * @deprecated Prefer the new editing API.
-     */
-    getEditRowsModel: () => GridEditRowsModel;
-    /**
-     * Controls if a cell is editable.
-     * @param {GridCellParams} params The cell params.
-     * @returns {boolean} A boolean value determining if the cell is editable.
-     */
-    isCellEditable: (params: GridCellParams) => boolean;
-    /**
-     * Sets the value of the edit cell.
-     * Commonly used inside the edit cell component.
-     * @param {GridEditCellValueParams} params Contains the id, field and value to set.
-     * @param {React.SyntheticEvent} event The event to pass forward.
-     * @returns {Promise<boolean> | void} A promise with the validation status if `preventCommitWhileValidating` is `true`. Otherwise, void.
-     */
-    setEditCellValue: (params: GridEditCellValueParams, event?: MuiBaseEvent) => Promise<boolean> | void;
-    /**
-     * Immediatelly updates the value of the cell, without waiting for the debounce.
-     * @param {GridRowId} id The row id.
-     * @param {string} field The field to update. If not passed, updates all fields in the given row id.
-     * @ignore - do not document.
-     */
-    unstable_runPendingEditCellValueMutation: (id: GridRowId, field?: string) => void;
-    /**
-     * @ignore - do not document.
-     */
-    unstable_setEditCellProps: (params: GridEditCellPropsParams) => GridEditCellProps;
-    /**
-     * @ignore - do not document.
-     */
-    unstable_parseValue: (id: GridRowId, field: string, value: any) => any;
-}
-/**
- * The row editing API interface.
- */
-export interface GridRowEditingApi extends GridEditingSharedApi {
-    /**
-     * Sets the mode of a row.
-     * @param {GridRowId} id The id of the row.
-     * @param {GridRowMode} mode Can be: `"edit"`, `"view"`.
-     */
-    setRowMode: (id: GridRowId, mode: GridRowMode) => void;
-    /**
-     * Gets the mode of a row.
-     * @param {GridRowId} id The id of the row.
-     * @returns {GridRowMode} Returns `"edit"` or `"view"`.
-     */
-    getRowMode: (id: GridRowId) => GridRowMode;
-    /**
-     * Updates the row corresponding to the given id with the values stored in the edit row model.
-     * @param {GridRowId} id The id to commit to.
-     * @param {React.SyntheticEvent} event The event to pass forward.
-     * @returns {boolean} A boolean indicating if there is an error.
-     */
-    commitRowChange: (id: GridRowId, event?: MuiBaseEvent) => boolean | Promise<boolean>;
-    /**
-     * Updates the value of a cell and calls all `preProcessEditCellProps` if necessary.
-     * @param {GridCommitCellChangeParams} params Object with the new value and id and field to update.
-     * @returns {Promise<boolean>} Resolves with `true` when all values in the row are valid.
-     * @ignore - do not document.
-     */
-    unstable_setRowEditingEditCellValue: (params: GridEditCellValueParams) => Promise<boolean>;
-}
-/**
- * The cell editing API interface.
- */
-export interface GridCellEditingApi extends GridEditingSharedApi {
-    /**
-     * Updates the field corresponding to the given id with the value stored in the edit row model.
-     * @param {GridCommitCellChangeParams} params The id and field to commit to.
-     * @param {React.SyntheticEvent} event The event to pass forward.
-     * @returns {boolean} A boolean indicating if there is an error.
-     */
-    commitCellChange: (params: GridCommitCellChangeParams, event?: MuiBaseEvent) => boolean | Promise<boolean>;
-    /**
-     * Sets the mode of a cell.
-     * @param {GridRowId} id The id of the row.
-     * @param {string} field The field to change the mode.
-     * @param {GridCellMode} mode Can be: `"edit"`, `"view"`.
-     */
-    setCellMode: (id: GridRowId, field: string, mode: GridCellMode) => void;
-    /**
-     * Gets the mode of a cell.
-     * @param {GridRowId} id The id of the row.
-     * @param {string} field The field to get the mode.
-     * @returns {GridCellMode} Returns `"edit"` or `"view"`.
-     */
-    getCellMode: (id: GridRowId, field: string) => GridCellMode;
-    /**
-     * Updates the value of a cell and calls `preProcessEditCellProps` if necessary.
-     * @param {GridCommitCellChangeParams} params Object with the new value and id and field to update.
-     * @returns {Promise<boolean>} Resolves with `true` when the new value is valid.
-     * @ignore - do not document.
-     */
-    unstable_setCellEditingEditCellValue: (params: GridEditCellValueParams) => Promise<boolean>;
-}
 /**
  * Params passed to `apiRef.current.startCellEditMode`.
  */
@@ -183,6 +73,11 @@ export interface GridStartCellEditModeParams {
      * If `true`, the value will be deleted before entering the edit mode.
      */
     deleteValue?: boolean;
+    /**
+     * The initial value for the field.
+     * If `deleteValue` is also true, this value is not used.
+     */
+    initialValue?: any;
 }
 /**
  * Params passed to `apiRef.current.stopCellEditMode`.
@@ -223,6 +118,11 @@ export interface GridStartRowEditModeParams {
      * If `true`, the value in `fieldToFocus` will be deleted before entering the edit mode.
      */
     deleteValue?: boolean;
+    /**
+     * The initial value for the given `fieldToFocus`.
+     * If `deleteValue` is also true, this value is not used.
+     */
+    initialValue?: string;
 }
 /**
  * Params passed to `apiRef.current.stopRowEditMode`.
@@ -249,7 +149,17 @@ export interface GridStopRowEditModeParams {
      */
     cellToFocusAfter?: 'none' | 'below' | 'right' | 'left';
 }
-export interface GridNewCellEditingApi extends GridNewEditingSharedApi, Pick<GridCellEditingApi, 'getCellMode'> {
+/**
+ * The cell editing API interface.
+ */
+export interface GridCellEditingApi extends GridEditingSharedApi {
+    /**
+     * Gets the mode of a cell.
+     * @param {GridRowId} id The id of the row.
+     * @param {string} field The field to get the mode.
+     * @returns {GridCellMode} Returns `"edit"` or `"view"`.
+     */
+    getCellMode: (id: GridRowId, field: string) => GridCellMode;
     /**
      * Puts the cell corresponding to the given row id and field into edit mode.
      * @param {GridStartCellEditModeParams} params The row id and field of the cell to edit.
@@ -277,7 +187,16 @@ export interface GridNewCellEditingApi extends GridNewEditingSharedApi, Pick<Gri
      */
     unstable_getRowWithUpdatedValuesFromCellEditing: (id: GridRowId, field: string) => GridRowModel;
 }
-export interface GridNewRowEditingApi extends GridNewEditingSharedApi, Pick<GridRowEditingApi, 'getRowMode'> {
+/**
+ * The row editing API interface.
+ */
+export interface GridRowEditingApi extends GridEditingSharedApi {
+    /**
+     * Gets the mode of a row.
+     * @param {GridRowId} id The id of the row.
+     * @returns {GridRowMode} Returns `"edit"` or `"view"`.
+     */
+    getRowMode: (id: GridRowId) => GridRowMode;
     /**
      * Puts the row corresponding to the given id into edit mode.
      * @param {GridStartCellEditModeParams} params The row id edit.
@@ -307,9 +226,5 @@ export interface GridNewRowEditingApi extends GridNewEditingSharedApi, Pick<Grid
 /**
  * The editing API interface that is available in the grid `apiRef`.
  */
-export interface GridEditingApi extends GridCellEditingApi, GridRowEditingApi, GridNewCellEditingApi, GridNewRowEditingApi {
-}
-export interface GridOldEditingApi extends GridCellEditingApi, GridRowEditingApi {
-}
-export interface GridNewEditingApi extends GridNewCellEditingApi, GridNewRowEditingApi {
+export interface GridEditingApi extends GridCellEditingApi, GridRowEditingApi {
 }

package/models/api/index.d.ts

@@ -21,5 +21,5 @@ export * from './gridCallbackDetails';
 export * from './gridScrollApi';
 export * from './gridVirtualScrollerApi';
 export * from './gridApiCommon';
-export type { GridEditingApi, GridOldEditingApi, GridNewEditingApi, GridCellModesModel, GridRowModesModel, } from './gridEditingApi';
+export type { GridEditingApi, GridCellModesModel, GridRowModesModel } from './gridEditingApi';
 export declare type GridEditRowApi = GridEditingApi;

package/models/events/gridEventLookup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRenderedRowsIntervalChangeParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
+import type { GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRenderedRowsIntervalChangeParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
 import { GridCellEditStartParams, GridCellEditStopParams } from '../params/gridEditCellParams';
 import { GridCellParams } from '../params/gridCellParams';
 import type { GridFilterModel } from '../gridFilterModel';
@@ -433,20 +433,6 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridCellEditStopParams;
         event: MuiBaseEvent;
     };
-    /**
-     * Fired when the props of the edit input are committed.
-     */
-    cellEditCommit: {
-        params: GridCellEditCommitParams;
-        event: MuiBaseEvent;
-    };
-    /**
-     * Fired when the props of the edit cell changes.
-     */
-    editCellPropsChange: {
-        params: GridEditCellPropsParams;
-        event: React.SyntheticEvent<HTMLElement> | {};
-    };
     /**
      * Fired when the row turns to edit mode.
      */

package/models/params/gridEditCellParams.d.ts

@@ -1,11 +1,5 @@
-import { GridEditCellProps } from '../gridEditRowModel';
 import { GridRowId, GridValidRowModel } from '../gridRows';
 import { GridCellParams } from './gridCellParams';
-export interface GridEditCellPropsParams {
-    id: GridRowId;
-    field: string;
-    props: GridEditCellProps;
-}
 /**
  * Params passed to `apiRef.current.setEditCellValue`.
  */
@@ -31,15 +25,6 @@ export interface GridEditCellValueParams {
      */
     unstable_skipValueParser?: boolean;
 }
-export interface GridCommitCellChangeParams {
-    id: GridRowId;
-    field: string;
-}
-export interface GridCellEditCommitParams {
-    id: GridRowId;
-    field: string;
-    value: any;
-}
 declare enum GridCellEditStartReasons {
     enterKeyDown = "enterKeyDown",
     cellDoubleClick = "cellDoubleClick",
@@ -52,9 +37,12 @@ declare enum GridCellEditStartReasons {
 export interface GridCellEditStartParams<V = any, R extends GridValidRowModel = any, F = V> extends GridCellParams<V, R, F> {
     /**
      * The reason for this event to be triggered.
-     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
      */
     reason?: GridCellEditStartReasons;
+    /**
+     * If the reason is related to a keyboard event, it contains which key was pressed.
+     */
+    key?: string;
 }
 declare enum GridCellEditStopReasons {
     cellFocusOut = "cellFocusOut",
@@ -69,7 +57,6 @@ declare enum GridCellEditStopReasons {
 export interface GridCellEditStopParams<V = any, R extends GridValidRowModel = any, F = V> extends GridCellParams<V, R, F> {
     /**
      * The reason for this event to be triggered.
-     * Only available if `props.experimentalFeatures.newEditingApi: true`.
      */
     reason?: GridCellEditStopReasons;
 }

package/models/params/gridEditCellParams.js

@@ -1,10 +1,6 @@
-// TODO v6 - remove
-
 /**
  * Params passed to `apiRef.current.setEditCellValue`.
  */
-// TODO v6 - remove
-// TODO v6 - remove
 var GridCellEditStartReasons;
 /**
  * Params passed to the `cellEditStart` event.

package/models/params/gridRowParams.d.ts

@@ -70,14 +70,16 @@ declare enum GridRowEditStartReasons {
 export interface GridRowEditStartParams<R extends GridValidRowModel = any> extends GridRowParams<R> {
     /**
      * Which field triggered this event.
-     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
      */
     field?: string;
     /**
      * The reason for this event to be triggered.
-     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
      */
     reason?: GridRowEditStartReasons;
+    /**
+     * If the reason is related to a keyboard event, it contains which key was pressed.
+     */
+    key?: string;
 }
 declare enum GridRowEditStopReasons {
     rowFocusOut = "rowFocusOut",
@@ -89,12 +91,10 @@ declare enum GridRowEditStopReasons {
 export interface GridRowEditStopParams<R extends GridValidRowModel = any> extends GridRowParams<R> {
     /**
      * Which field triggered this event.
-     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
      */
     field?: string;
     /**
      * The reason for this event to be triggered.
-     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
      */
     reason?: GridRowEditStopReasons;
 }

package/models/props/DataGridProps.d.ts

@@ -25,14 +25,6 @@ import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColu
 import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
 export interface GridExperimentalFeatures {
-    /**
-     * Will be part of the premium-plan when fully ready.
-     */
-    preventCommitWhileValidating: boolean;
-    /**
-     * Enables the new API for cell editing and row editing.
-     */
-    newEditingApi: boolean;
     /**
      * Enables the column grouping.
      */
@@ -391,21 +383,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @returns {boolean} A boolean indicating if the cell is selectable.
      */
     isRowSelectable?: (params: GridRowParams<R>) => boolean;
-    /**
-     * Callback fired when the edit cell value changes.
-     * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
-     * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
-     * @param {GridCallbackDetails} details Additional details for this callback.
-     * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
-     */
-    onEditCellPropsChange?: GridEventListener<'editCellPropsChange'>;
-    /**
-     * Callback fired when the cell changes are committed.
-     * @param {GridCellEditCommitParams} params With all properties from [[GridCellEditCommitParams]].
-     * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
-     * @param {GridCallbackDetails} details Additional details for this callback.
-     */
-    onCellEditCommit?: GridEventListener<'cellEditCommit'>;
     /**
      * Callback fired when the cell turns to edit mode.
      * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -725,7 +702,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     experimentalFeatures?: Partial<GridExperimentalFeatures>;
     /**
      * Callback called before updating a row with new values in the row and cell editing.
-     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
      * @template R
      * @param {R} newRow Row object with the new values.
      * @param {R} oldRow Row object with the old values.

package/modern/DataGrid/DataGrid.js

@@ -196,8 +196,6 @@ DataGridRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
-    newEditingApi: PropTypes.bool,
-    preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -374,14 +372,6 @@ DataGridRaw.propTypes = {
    */
   onCellDoubleClick: PropTypes.func,
 
-  /**
-   * Callback fired when the cell changes are committed.
-   * @param {GridCellEditCommitParams} params With all properties from [[GridCellEditCommitParams]].
-   * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   */
-  onCellEditCommit: PropTypes.func,
-
   /**
    * Callback fired when the cell turns to edit mode.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -482,15 +472,6 @@ DataGridRaw.propTypes = {
    */
   onColumnVisibilityModelChange: PropTypes.func,
 
-  /**
-   * Callback fired when the edit cell value changes.
-   * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
-   * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
-   */
-  onEditCellPropsChange: PropTypes.func,
-
   /**
    * Callback fired when the `editRowsModel` changes.
    * @param {GridEditRowsModel} editRowsModel With all properties from [[GridEditRowsModel]].
@@ -677,7 +658,6 @@ DataGridRaw.propTypes = {
 
   /**
    * Callback called before updating a row with new values in the row and cell editing.
-   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.

package/modern/DataGrid/useDataGridComponent.js

@@ -11,8 +11,7 @@ import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/use
 import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-import { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
-import { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
+import { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
 import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 import { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
@@ -44,7 +43,7 @@ export const useDataGridComponent = props => {
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState(props.experimentalFeatures?.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -60,7 +59,6 @@ export const useDataGridComponent = props => {
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
-  const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);

package/modern/components/cell/GridEditInputCell.js

@@ -10,7 +10,6 @@ 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 { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -46,7 +45,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     field,
     colDef,
     hasFocus,
-    debounceMs = rootProps.experimentalFeatures?.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME,
+    debounceMs = 200,
     isProcessingProps,
     onValueChange
   } = props,
@@ -69,7 +68,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
 
-    if (column.valueParser && rootProps.experimentalFeatures?.newEditingApi) {
+    if (column.valueParser) {
       parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
     }
 
@@ -81,7 +80,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       debounceMs,
       unstable_skipValueParser: true
     }, event);
-  }, [apiRef, debounceMs, field, id, onValueChange, rootProps.experimentalFeatures?.newEditingApi]);
+  }, [apiRef, debounceMs, field, id, onValueChange]);
   const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
   React.useEffect(() => {
     if (meta.changeReason !== 'debouncedSetEditCellValue') {

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -90,35 +90,11 @@ function GridEditSingleSelectCell(props) {
       await onValueChange(event, formattedTargetValue);
     }
 
-    const isValid = await apiRef.current.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: formattedTargetValue
     }, event);
-
-    if (rootProps.experimentalFeatures?.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;
-    }
-
-    const canCommit = await Promise.resolve(apiRef.current.commitCellChange({
-      id,
-      field
-    }, event));
-
-    if (canCommit) {
-      apiRef.current.setCellMode(id, field, 'view');
-
-      if (event.key) {
-        // TODO v6: remove once we stop ignoring events fired from portals
-        const params = apiRef.current.getCellParams(id, field);
-        apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
-      }
-    }
   };
 
   const handleClose = (event, reason) => {
@@ -128,15 +104,11 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      if (rootProps.experimentalFeatures?.newEditingApi) {
-        apiRef.current.stopCellEditMode({
-          id,
-          field,
-          ignoreModifications: true
-        });
-      } else {
-        apiRef.current.setCellMode(id, field, 'view');
-      }
+      apiRef.current.stopCellEditMode({
+        id,
+        field,
+        ignoreModifications: true
+      });
     }
   };
 

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "filterColumns", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
       _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,6 +13,7 @@ import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
@@ -118,6 +119,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     focusElementRef,
     linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
     columnsSort,
+    filterColumns,
     deleteIconProps = {},
     linkOperatorInputProps = {},
     operatorInputProps = {},
@@ -128,6 +130,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
 
   const apiRef = useGridApiContext();
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const columnSelectId = useId();
   const columnSelectLabelId = useId();
   const operatorSelectId = useId();
@@ -150,18 +153,30 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   } = valueInputProps,
         valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
 
-  const sortedFilterableColumns = React.useMemo(() => {
+  const filteredColumns = React.useMemo(() => {
+    if (filterColumns === undefined || typeof filterColumns !== 'function') {
+      return filterableColumns;
+    }
+
+    const filteredFields = filterColumns({
+      field: item.columnField,
+      columns: filterableColumns,
+      currentFilters: filterModel?.items || []
+    });
+    return filterableColumns.filter(column => filteredFields.includes(column.field));
+  }, [filterColumns, filterModel?.items, filterableColumns, item.columnField]);
+  const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
-        return filterableColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b)));
+        return filteredColumns.sort((a, b) => collator.compare(getColumnLabel(a), getColumnLabel(b)));
 
       case 'desc':
-        return filterableColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b)));
+        return filteredColumns.sort((a, b) => -collator.compare(getColumnLabel(a), getColumnLabel(b)));
 
       default:
-        return filterableColumns;
+        return filteredColumns;
     }
-  }, [filterableColumns, columnsSort]);
+  }, [filteredColumns, columnsSort]);
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentOperator = React.useMemo(() => {
     if (!item.operatorValue || !currentColumn) {
@@ -286,7 +301,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeColumn,
         native: isBaseSelectNative
       }, rootProps.componentsProps?.baseSelect, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -380,6 +395,13 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   disableMultiFilterOperator: PropTypes.bool,
 
+  /**
+   * Allows to filter the columns displayed in the filter form.
+   * @param {FilterColumnsArgs} args The columns of the grid and name of field.
+   * @returns {GridColDef['field'][]} The filtered fields array.
+   */
+  filterColumns: PropTypes.func,
+
   /**
    * A ref allowing to set imperative focus.
    * It can be passed to the el