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

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -16,6 +16,13 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const getGridFilter = col => ({
+  columnField: col.field,
+  operatorValue: col.filterOperators[0].value,
+  id: Math.round(Math.random() * 1e5)
+});
+
 const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -26,7 +33,8 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const {
     linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
     columnsSort,
-    filterFormProps
+    filterFormProps,
+    getColumnForNewFilter
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -36,37 +44,67 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const applyFilterLinkOperator = React.useCallback(operator => {
     apiRef.current.setFilterLinkOperator(operator);
   }, [apiRef]);
-  const getDefaultItem = React.useCallback(() => {
-    const firstColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
+  const getDefaultFilter = React.useCallback(() => {
+    let nextColumnWithOperator;
+
+    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
+      // To allow override the column for default (first) filter
+      const nextColumnFieldName = getColumnForNewFilter({
+        currentFilters: filterModel?.items || [],
+        columns: filterableColumns
+      });
+      nextColumnWithOperator = filterableColumns.find(({
+        field
+      }) => field === nextColumnFieldName);
+    } else {
+      nextColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
+    }
 
-    if (!firstColumnWithOperator) {
+    if (!nextColumnWithOperator) {
       return null;
     }
 
-    return {
-      columnField: firstColumnWithOperator.field,
-      operatorValue: firstColumnWithOperator.filterOperators[0].value,
-      id: Math.round(Math.random() * 1e5)
-    };
-  }, [filterableColumns]);
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel?.items, filterableColumns, getColumnForNewFilter]);
+  const getNewFilter = React.useCallback(() => {
+    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
+      return getDefaultFilter();
+    }
+
+    const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean); // If no items are there in filterModel, we have to pass defaultFilter
+
+    const nextColumnFieldName = getColumnForNewFilter({
+      currentFilters: currentFilters,
+      columns: filterableColumns
+    });
+    const nextColumnWithOperator = filterableColumns.find(({
+      field
+    }) => field === nextColumnFieldName);
+
+    if (!nextColumnWithOperator) {
+      return null;
+    }
+
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
   const items = React.useMemo(() => {
     if (filterModel.items.length) {
       return filterModel.items;
     }
 
-    const defaultItem = getDefaultItem();
-    return defaultItem ? [defaultItem] : [];
-  }, [filterModel.items, getDefaultItem]);
+    const defaultFilter = getDefaultFilter();
+    return defaultFilter ? [defaultFilter] : [];
+  }, [filterModel.items, getDefaultFilter]);
   const hasMultipleFilters = items.length > 1;
 
   const addNewFilter = () => {
-    const defaultItem = getDefaultItem();
+    const newFilter = getNewFilter();
 
-    if (!defaultItem) {
+    if (!newFilter) {
       return;
     }
 
-    apiRef.current.upsertFilterItems([...items, defaultItem]);
+    apiRef.current.upsertFilterItems([...items, newFilter]);
   };
 
   const deleteFilter = React.useCallback(item => {
@@ -143,6 +181,13 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     valueInputProps: PropTypes.any
   }),
 
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter.
+   */
+  getColumnForNewFilter: PropTypes.func,
+
   /**
    * Sets the available logic operators.
    * @default [GridLinkOperator.And, GridLinkOperator.Or]

package/modern/hooks/features/editing/index.js

@@ -0,0 +1 @@
+export * from './gridEditingSelectors';

package/modern/hooks/features/{editRows/useGridCellEditing.new.js → editing/useGridCellEditing.js}

@@ -8,7 +8,7 @@ import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
@@ -121,7 +121,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
       if (reason) {
         const newParams = _extends({}, params, {
-          reason
+          reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', newParams, event);
@@ -132,14 +133,21 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -270,10 +278,17 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
+    let newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     const newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

package/modern/hooks/features/{editRows/useGridEditing.new.js → editing/useGridEditing.js}

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridCellEditing } from './useGridCellEditing.new';
+import { useGridCellEditing } from './useGridCellEditing';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
-import { useGridRowEditing } from './useGridRowEditing.new';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { useGridRowEditing } from './useGridRowEditing';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isAutoGeneratedRow } from '../rows/gridRowsUtils';
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}

package/modern/hooks/features/{editRows/useGridRowEditing.new.js → editing/useGridRowEditing.js}

@@ -8,7 +8,7 @@ import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditRowsSelector';
+import { gridEditRowsStateSelector } from './gridEditingSelectors';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
@@ -179,6 +179,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
         const newParams = _extends({}, rowParams, {
           field: params.field,
+          key: event.key,
           reason
         });
 
@@ -190,14 +191,21 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -337,7 +345,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       fieldToFocus,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
@@ -347,9 +356,14 @@ export const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
 
-      const shouldDeleteValue = deleteValue && fieldToFocus === field;
+      let newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

package/modern/hooks/features/index.js

@@ -3,7 +3,7 @@ export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
 export * from './density';
-export * from './editRows';
+export * from './editing';
 export * from './filter';
 export * from './focus';
 export * from './pagination';

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -9,7 +9,7 @@ import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
-import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
+import { gridEditRowsStateSelector } from '../editing/gridEditingSelectors';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.2
+/** @license MUI v6.0.0-alpha.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/internals/index.js

@@ -22,8 +22,7 @@ export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/use
 export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 export { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
-export { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
+export { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 export { getTreeNodeDescendants, buildRootGroup } from '../hooks/features/rows/gridRowsUtils';

package/modern/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/node/DataGrid/DataGrid.js

@@ -219,8 +219,6 @@ DataGridRaw.propTypes = {
    */
   experimentalFeatures: _propTypes.default.shape({
     columnGrouping: _propTypes.default.bool,
-    newEditingApi: _propTypes.default.bool,
-    preventCommitWhileValidating: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
 
@@ -397,14 +395,6 @@ DataGridRaw.propTypes = {
    */
   onCellDoubleClick: _propTypes.default.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.default.func,
-
   /**
    * Callback fired when the cell turns to edit mode.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -505,15 +495,6 @@ DataGridRaw.propTypes = {
    */
   onColumnVisibilityModelChange: _propTypes.default.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.default.func,
-
   /**
    * Callback fired when the `editRowsModel` changes.
    * @param {GridEditRowsModel} editRowsModel With all properties from [[GridEditRowsModel]].
@@ -700,7 +681,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/node/DataGrid/useDataGridComponent.js

@@ -31,9 +31,7 @@ var _useGridPagination = require("../hooks/features/pagination/useGridPagination
 
 var _useGridPreferencesPanel = require("../hooks/features/preferencesPanel/useGridPreferencesPanel");
 
-var _useGridEditing = require("../hooks/features/editRows/useGridEditing.old");
-
-var _useGridEditing2 = require("../hooks/features/editRows/useGridEditing.new");
+var _useGridEditing = require("../hooks/features/editing/useGridEditing");
 
 var _useGridRows = require("../hooks/features/rows/useGridRows");
 
@@ -64,8 +62,6 @@ var _useGridColumnGrouping = require("../hooks/features/columnGrouping/useGridCo
 var _useGridColumnGroupingPreProcessors = require("../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors");
 
 const useDataGridComponent = props => {
-  var _props$experimentalFe, _props$experimentalFe2;
-
   const apiRef = (0, _useGridInitialization.useGridInitialization)(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
@@ -82,7 +78,7 @@ const useDataGridComponent = props => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnGrouping.columnGroupsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? _useGridEditing2.editingStateInitializer : _useGridEditing.editingStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridEditing.editingStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridFocus.focusStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridSorting.sortingStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPreferencesPanel.preferencePanelStateInitializer, apiRef, props);
@@ -98,8 +94,7 @@ const useDataGridComponent = props => {
   (0, _useGridParamsApi.useGridParamsApi)(apiRef);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   (0, _useGridColumnGrouping.useGridColumnGrouping)(apiRef, props);
-  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _useGridEditing2.useGridEditing : _useGridEditing.useGridEditing;
-  useGridEditing(apiRef, props);
+  (0, _useGridEditing.useGridEditing)(apiRef, props);
   (0, _useGridFocus.useGridFocus)(apiRef, props);
   (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef, props);
   (0, _useGridFilter.useGridFilter)(apiRef, props);

package/node/components/cell/GridEditInputCell.js

@@ -29,8 +29,6 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _index = require("../icons/index");
 
-var _GridFilterInputValue = require("../panel/filterPanel/GridFilterInputValue");
-
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -65,8 +63,6 @@ const GridEditInputCellRoot = (0, _styles.styled)(_InputBase.default, {
   }
 }));
 const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$experiment, _rootProps$experiment3;
-
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     id,
@@ -74,7 +70,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     field,
     colDef,
     hasFocus,
-    debounceMs = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : _GridFilterInputValue.SUBMIT_FILTER_STROKE_TIME,
+    debounceMs = 200,
     isProcessingProps,
     onValueChange
   } = props,
@@ -87,8 +83,6 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback(async event => {
-    var _rootProps$experiment2;
-
     const newValue = event.target.value;
 
     if (onValueChange) {
@@ -98,7 +92,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
 
-    if (column.valueParser && (_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+    if (column.valueParser) {
       parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
     }
 
@@ -110,7 +104,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       debounceMs,
       unstable_skipValueParser: true
     }, event);
-  }, [apiRef, debounceMs, field, id, onValueChange, (_rootProps$experiment3 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment3.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/node/components/cell/GridEditSingleSelectCell.js

@@ -107,8 +107,6 @@ function GridEditSingleSelectCell(props) {
   }
 
   const handleChange = async event => {
-    var _rootProps$experiment;
-
     setOpen(false);
     const target = event.target; // NativeSelect casts the value to a string.
 
@@ -118,35 +116,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$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 === _gridEditRowModel.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) => {
@@ -156,17 +130,11 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || (0, _keyboardUtils.isEscapeKey)(event.key)) {
-      var _rootProps$experiment2;
-
-      if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
-        apiRef.current.stopCellEditMode({
-          id,
-          field,
-          ignoreModifications: true
-        });
-      } else {
-        apiRef.current.setCellMode(id, field, 'view');
-      }
+      apiRef.current.stopCellEditMode({
+        id,
+        field,
+        ignoreModifications: true
+      });
     }
   };
 

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

@@ -33,6 +33,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
 
+var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
+
 var _useGridSelector = require("../../../hooks/utils/useGridSelector");
 
 var _gridFilterItem = require("../../../models/gridFilterItem");
@@ -45,7 +47,7 @@ var _gridClasses = require("../../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -151,6 +153,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     focusElementRef,
     linkOperators = [_gridFilterItem.GridLinkOperator.And, _gridFilterItem.GridLinkOperator.Or],
     columnsSort,
+    filterColumns,
     deleteIconProps = {},
     linkOperatorInputProps = {},
     operatorInputProps = {},
@@ -160,6 +163,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
+  const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
   const columnSelectId = (0, _utils.unstable_useId)();
   const columnSelectLabelId = (0, _utils.unstable_useId)();
   const operatorSelectId = (0, _utils.unstable_useId)();
@@ -180,18 +184,30 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     InputComponentProps
   } = valueInputProps,
         valueInputPropsOther = (0, _objectWithoutPropertiesLoose2.default)(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 == null ? void 0 : filterModel.items) || []
+    });
+    return filterableColumns.filter(column => filteredFields.includes(column.field));
+  }, [filterColumns, filterModel == null ? void 0 : 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(() => {
     var _currentColumn$filter;
@@ -320,7 +336,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeColumn,
         native: isBaseSelectNative
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -415,6 +431,13 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   disableMultiFilterOperator: _propTypes.default.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.default.func,
+
   /**
    * A ref allowing to set imperative focus.
    * It can be passed to the el