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

package/CHANGELOG.md

@@ -3,6 +3,214 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v6.0.0-alpha.3
+
+_Oct 13, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ⌚️ New components to edit date and time with <kbd>keyboard</kbd>—without using any modal or dropdown UI.
+  Please check out our [documentation](https://next.mui.com/x/react-date-pickers/fields/) to discover those new components.
+  - [`DateField`](https://next.mui.com/x/react-date-pickers/date-field/) to edit date
+  - [`TimeField`](https://next.mui.com/x/react-date-pickers/time-field/)  to edit time
+  - [`DateTimeField`](https://next.mui.com/x/react-date-pickers/date-time-field/)  to edit date and time
+  - [`MultiInputDateRangeField` / `SingleInputDateRangeField`](https://next.mui.com/x/react-date-pickers/date-range-field/) to edit date range
+  - [`MultiInputTimeRangeField`](https://next.mui.com/x/react-date-pickers/time-range-field/) to edit time range with two inputs
+  - [`MultiInputDateTimeRangeField`](https://next.mui.com/x/react-date-pickers/date-time-range-field/) to edit date and time range with two inputs
+  
+  ⚠️ These components are unstable.
+  They might receive breaking changes on their props to have the best components possible by the time of the stable release.
+
+- 📝 Allow to limit to one filter per column for `DataGridPro` and `DataGridPremium` (#6333) @MBilalShafi
+- 📚 New [page describing the validation props on each picker](https://next.mui.com/x/react-date-pickers/validation/) (#6064) @flaviendelangle
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.3` / `@mui/x-data-grid-pro@v6.0.0-alpha.3` / `@mui/x-data-grid-premium@v6.0.0-alpha.3`
+
+#### Breaking changes
+
+- [DataGrid] Remove legacy editing API
+
+  The editing API that is enabled by default was replaced with a new API that contains better support for server-side persistence, validation and customization. This new editing feature was already available in v5 under the `newEditingApi` experimental flag. In v6, this flag can be removed.
+
+  ```diff
+   <DataGrid
+  -  experimentalFeatures={{ newEditingApi: true }}
+   />
+  ```
+
+  For users that didn't migrate to the new editing API in v5, additional work may be needed because the new API is not equivalent to the legacy API. Although, some migration steps are available to help in this task.
+
+  - The `editCellPropsChange` event was removed. If you still need it please file a new issue so we can propose an alternative.
+  - The `cellEditCommit` event was removed and the `processRowUpdate` prop can be used in place. More information, check the [docs](https://next.mui.com/x/react-data-grid/editing/#persistence) section about the topic.
+  - The `editRowsModel` and `onEditRowsModelChange` props were removed. The [`cellModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) or [`rowModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) props can be used to achieve the same goal.
+  - The following API methods were removed:
+    - Use `apiRef.current.stopCellEditMode` to replace `apiRef.current.commitCellChange`
+    - Use `apiRef.current.startCellEditMode` to replace `apiRef.current.setCellMode(id, field, 'edit')`
+    - Use `apiRef.current.stopRowEditMode` to replace `apiRef.current.commitRowChange`
+    - Use `apiRef.current.startRowMode` to replace `apiRef.current.setRowMode(id, 'edit')`
+    - Use the [`cellModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) or [`rowModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) props to replace `apiRef.current.setEditRowsModel`
+
+#### Changes
+
+- [DataGrid] Fix start edit mode with printable character in React 18 (#6257) @m4theushw
+- [DataGrid] Remove legacy editing API (#6016) @m4theushw
+- [DataGrid] Simplify `useGridApiContext` and `useGridApiRef` type overrides (#6423) @cherniavskii
+- [DataGrid] Use generics instead of verbose state overrides (#6409) @cherniavskii
+- [DataGridPro] Allow to limit to one filter per column (#6333) @MBilalShafi
+
+### `@mui/x-date-pickers@v6.0.0-alpha.3` / `@mui/x-date-pickers-pro@v6.0.0-alpha.3`
+
+#### Breaking changes
+
+- All the props used by the mobile and desktop wrappers to override components or components' props have been replaced by component slots. You can find more information about this pattern in the [MUI Base documentation](https://mui.com/base/getting-started/usage/#shared-props).
+
+  Some of the names have also been prefixed by `desktop` when it was unclear that the behavior was only applied on the desktop version of the pickers (or the responsive version when used on a desktop).
+
+  The `DialogProps` prop has been replaced by a `dialog` component props slot on responsive and mobile pickers:
+
+  ```diff
+  // Same on MobileDatePicker, DateTimePicker, MobileDateTimePicker, 
+  // TimePicker, MobileTimePicker, DateRangePicker and MobileDateRangePicker.
+  <DatePicker
+  -  DialogProps={{ backgroundColor: 'red' }}
+  +  componentsProps={{ dialog: { backgroundColor: 'red }}}
+  />
+  ```
+
+  The `PaperProps` prop has been replaced by a `desktopPaper` component props slot on all responsive and desktop pickers:
+
+  ```diff
+  // Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker, 
+  // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
+  <DatePicker
+  -  PaperProps={{ backgroundColor: 'red' }}
+  +  componentsProps={{ desktopPaper: { backgroundColor: 'red }}}
+  />
+  ```
+
+  The `PopperProps` prop has been replaced by a `popper` component props slot on all responsive and desktop pickers:
+
+  ```diff
+  // Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker, 
+  // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
+  <DatePicker
+  -  PopperProps={{ onClick: handleClick }}
+  +  componentsProps={{ popper: { onClick: handleClick }}}
+  />
+  ```
+
+  The `TransitionComponent` prop has been replaced by a `DesktopTransition` component slot on all responsive and desktop pickers:
+
+  ```diff
+  // Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker, 
+  // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
+  <DatePicker
+  -  TransitionComponent={Fade}
+  +  components={{ DesktopTransition: Fade }}
+  />
+  ```
+
+  The `TrapFocusProps` prop has been replaced by a `desktopTrapFocus` component props slot on all responsive and desktop pickers:
+
+  ```diff
+  // Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker, 
+  // TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
+  <DatePicker
+  -  TrapFocusProps={{ isEnabled: () => false }}
+  +  componentsProps={{ desktopTrapFocus: { isEnabled: () => false }}}
+  />
+  ```
+  
+- The view components allowing to pick a date or parts of a date without an input have been renamed to better fit their usage:
+
+  ```diff
+  -<CalendarPicker {...props} />
+  +<DateCalendar  {...props} />
+  ```
+
+  ```diff
+  -<DayPicker {...props} />
+  +<DayCalendar  {...props} />
+  ```
+
+  ```diff
+  -<CalendarPickerSkeleton {...props} />
+  +<DayCalendarSkeleton  {...props} />
+  ```
+
+  ```diff
+  -<MonthPicker {...props} />
+  +<MonthCalendar  {...props} />
+  ```
+
+  ```diff
+  -<YearPicker {...props} />
+  +<YearCalendar  {...props} />
+  ```
+
+- Component names in the theme have changed as well:
+
+  ```diff
+  -MuiCalendarPicker: {
+  +MuiDateCalendar: {
+  ```
+
+  ```diff
+  -MuiDayPicker: {
+  +MuiDayCalendar: {
+  ```
+
+  ```diff
+  -MuiCalendarPickerSkeleton: {
+  +MuiDayCalendarSkeleton: {
+  ```
+
+  ```diff
+  -MuiMonthPicker: {
+  +MuiMonthCalendar: {
+  ```
+
+  ```diff
+  -MuiYearPicker: {
+  +MuiYearCalendar: {
+  ```
+
+#### Changes
+
+- [DatePicker] Allows to fix the number of week displayed (#6299) @alexfauquette
+- [DateRangePicker] Fix calendar day outside of month layout shifting on hover (#6448) @alexfauquette
+- [fields] New components: `MultiInputDateTimeRangePicker` and `MultiInputTimeRangePicker` (#6392) @alexfauquette
+- [fields] Prepare the field exports for the public release (#6467) @flaviendelangle
+- [fields] Support paste in single section (#6422) @alexfauquette
+- [pickers] Add field placeholders to the locale (#6337) @flaviendelangle
+- [pickers] Do not use `Partial` for `components` and `componentsProps` props (#6463) @flaviendelangle
+- [pickers] New component: `DateRangeCalendar` (#6416) @flaviendelangle
+- [pickers] Replace the `Picker` prefix in the view component by `Calendar` (eg: `MonthPicker` => `MonthCalendar`) (#6389) @flaviendelangle
+- [pickers] Support pasting on fields (#6364) @flaviendelangle
+- [pickers] Use slots in the mobile and desktop wrappers instead of `XXXComponent` and `XXXProps` (#6381) @flaviendelangle
+
+### Docs
+
+- [docs] Add migration to DataGrid v6 page (#6235) @m4theushw
+- [docs] Create first publishable version of the field doc (#6323) @flaviendelangle
+- [docs] Fix trailing spaces in the readme @oliviertassinari
+- [docs] New page for the pickers: Validation (#6064) @flaviendelangle
+- [docs] Organize migration pages (#6480) @flaviendelangle
+
+### Core
+
+- [core] Add CodeQL workflow (#6387) @DanailH
+- [core] Add missing breaking change to the changelog (#6471) @flaviendelangle
+- [core] Fix playground structure (#6466) @LukasTy
+- [core] Fix tests for pasting on fields (#6465) @flaviendelangle
+- [core] Remove absolute link (#6420) @flaviendelangle
+- [core] Remove unused `react-text-mask` package (#6408) @LukasTy
+- [core] Send explicit warning when dayjs locale is not found (#6424) @alexfauquette
+- [core] Test validation on textfield and date views (#6265) @alexfauquette
+- [test] Sync comment with monorepo @oliviertassinari
+
 ## v6.0.0-alpha.2
 
 _Oct 7, 2022_
@@ -24,9 +232,9 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
   You can now use the aggregation without the `experimentalFeatures.aggregation` flag enabled.
 
   ```diff
-  <DataGridPremium
+   <DataGridPremium
   -  experimentalFeatures={{ aggregation: true }}
-  />
+   />
   ```
 
   The aggregation of the columns through the column menu is now enabled by default on `DataGridPremium`. You can set `disableAggregation={true}` to disable it.
@@ -49,10 +257,10 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
   ```diff
   // Same for any other date, date time or date range picker.
-  <DatePicker
+   <DatePicker
   -  renderDay={(_, dayProps) => <CustomDay {...dayProps} />}
   +  components={{ Day: CustomDay }}
-  />
+   />
   ```
 
 #### Changes
@@ -114,7 +322,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
   Here is an example of the old and new approach showing how to apply a custom value formatter in groups for the grouping column:
 
   ```diff
-   <DataGridPremium 
+   <DataGridPremium
      groupingColDef={() => ({
        valueFormatter: (params) => {
          if (params.id == null) {
@@ -155,9 +363,8 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 #### Breaking changes
 
-- [pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle
+- The `value` prop of the pickers now expects a parsed value.
 
-  The `value` prop of the pickers now expects a parsed value.
   Until now, it was possible to provide any format that your date management library was able to parse.
   For instance, you could pass `value={new Date()}` when using `AdapterDayjs`.
 
@@ -296,12 +503,24 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 You can find more information about the new api, including how to set those translations on all your components at once in the [documentation](https://next.mui.com/x/react-date-pickers/localization/)
 
+- The deprecated `locale` prop of the `LocalizationProvider` component have been renamed `adapterLocale`:
+
+  ```diff
+  <LocalizationProvider 
+    dateAdapter={AdapterDayjs}
+  -  locale="fr" 
+  +  adapterLocale="fr"
+  >
+    {children}
+  </LocalizationProvider>
+  ```
+
 - The component slots `LeftArrowButton` and `RightArrowButton` have been renamed `PreviousIconButton` and `NextIconButton` to better describe there usage:
 
   ```diff
-  <DatePicker 
+  <DatePicker
     components={{
-  -   LeftArrowButton: CustomButton,  
+  -   LeftArrowButton: CustomButton,
   +   PreviousIconButton: CustomButton,
 
   -   RightArrowButton: CustomButton,
@@ -309,7 +528,7 @@ You can find more information about the new api, including how to set those tran
     }}
 
     componentsProps={{
-  -   leftArrowButton: {},  
+  -   leftArrowButton: {},
   +   previousIconButton: {},
 
   -   rightArrowButton: {},
@@ -2496,8 +2715,8 @@ _Nov 23, 2021_
 
 🎉 We are excited to introduce [MUI X v5.0.0](https://mui.com/blog/mui-x-v5/) 🎉!
 
-If you want to migrate the DataGrid or DataGridPro from v4 to v5, take a look at the [migration guide](https://mui.com/x/react-data-grid/migration-v4/).
-This version is fully compatible with `@mui/material@5.X` and can be used with `@material-ui/core@4.x` with some [additional steps](https://mui.com/x/react-data-grid/migration-v4/#using-mui-x-v5-with-mui-core-v4).
+If you want to migrate the DataGrid or DataGridPro from v4 to v5, take a look at the [migration guide](https://mui.com/x/migration/migration-data-grid-v4/).
+This version is fully compatible with `@mui/material@5.X` and can be used with `@material-ui/core@4.x` with some [additional steps](https://mui.com/x/migration/migration-data-grid-v4/#using-mui-x-v5-with-mui-core-v4).
 
 A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
 

package/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/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';
@@ -28,8 +27,6 @@ import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSp
 import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
 import { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export const useDataGridComponent = props => {
-  var _props$experimentalFe, _props$experimentalFe2;
-
   const apiRef = useGridInitialization(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
@@ -46,7 +43,7 @@ export const useDataGridComponent = props => {
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -62,7 +59,6 @@ export const useDataGridComponent = props => {
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
-  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);

package/colDef/gridNumericOperators.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams } from '../models';
-export declare const getGridNumericQuickFilterFn: (value: any) => (({ value }: GridCellParams) => boolean) | null;
+export declare const getGridNumericQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
 /**
  * @deprecated Use `getGridNumericOperators` instead.

package/colDef/gridSingleSelectOperators.d.ts

@@ -1,5 +1,5 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams, GridColDef } from '../models';
 import { GridApiCommunity } from '../models/api/gridApiCommunity';
-export declare const getGridSingleSelectQuickFilterFn: (value: any, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => (({ value }: GridCellParams) => boolean) | null;
+export declare const getGridSingleSelectQuickFilterFn: (value: any, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => (({ value: columnValue }: GridCellParams) => boolean) | null;
 export declare const getGridSingleSelectOperators: () => GridFilterOperator[];

package/colDef/gridStringOperators.d.ts

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

package/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";
 
@@ -38,8 +37,6 @@ const GridEditInputCellRoot = styled(InputBase, {
   }
 }));
 const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$experiment, _rootProps$experiment3;
-
   const rootProps = useGridRootProps();
 
   const {
@@ -48,7 +45,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     field,
     colDef,
     hasFocus,
-    debounceMs = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME,
+    debounceMs = 200,
     isProcessingProps,
     onValueChange
   } = props,
@@ -62,8 +59,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) {
@@ -73,7 +68,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));
     }
 
@@ -85,7 +80,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/components/cell/GridEditSingleSelectCell.js

@@ -83,8 +83,6 @@ function GridEditSingleSelectCell(props) {
   }
 
   const handleChange = async event => {
-    var _rootProps$experiment;
-
     setOpen(false);
     const target = event.target; // NativeSelect casts the value to a string.
 
@@ -94,35 +92,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 === 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) => {
@@ -132,17 +106,11 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || 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/components/panel/filterPanel/GridFilterForm.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
 import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem';
+import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+export interface FilterColumnsArgs {
+    field: GridColDef['field'];
+    columns: GridStateColDef[];
+    currentFilters: GridFilterItem[];
+}
 export interface GridFilterFormProps {
     /**
      * The [[GridFilterItem]] representing this form.
@@ -42,6 +48,12 @@ export interface GridFilterFormProps {
      * @param {GridFilterItem} item The deleted [[GridFilterItem]].
      */
     deleteFilter: (item: GridFilterItem) => void;
+    /**
+     * 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?: (args: FilterColumnsArgs) => GridColDef['field'][];
     /**
      * Sets the available logic operators.
      * @default [GridLinkOperator.And, GridLinkOperator.Or]

package/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';
@@ -120,6 +121,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     focusElementRef,
     linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
     columnsSort,
+    filterColumns,
     deleteIconProps = {},
     linkOperatorInputProps = {},
     operatorInputProps = {},
@@ -130,6 +132,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();
@@ -152,18 +155,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 == 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;
@@ -292,7 +307,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__*/_jsx(OptionComponent, {
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -386,6 +401,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