@mui/x-data-grid 6.9.0 → 6.9.2

package/CHANGELOG.md

@@ -3,23 +3,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.9.2
+
+_Jul 6, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Auto-scroll when making range selection (#8661) @m4theushw
+
+- 📚 New page: Components lifecycle (#8372) @flaviendelangle
+
+  Clarify pickers events and value updates in a [single docs page](https://mui.com/x/react-date-pickers/lifecycle/).
+
+- 🥧 Add pie chart component
+
+  They are fresh from the code editor. You can visit [pie charts docs](https://mui.com/x/react-charts/pie/) or their [demo page](https://mui.com/x/react-charts/pie-demo/).
+
+  <img width="380" alt="pie-charts" src="https://github.com/mui/mui-x/assets/13808724/fe908c45-803c-4316-b913-dbd2f9f0551e">
+
+- 🐞 Bugfixes
+
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.9.2` / `@mui/x-data-grid-pro@v6.9.2` / `@mui/x-data-grid-premium@v6.9.2`
+
+#### Changes
+
+- [DataGrid] Fix `RangeError` when using flex columns (#9554) @cherniavskii
+- [DataGrid] Fix React 17 editing bug (#9530) @romgrk
+- [DataGrid] Use `getRowId` in filtering (#9564) @romgrk
+- [DataGrid] Correctly reflect `TablePagination`'s `rowsPerPageOptions` shape to `pageSizeOptions` (#9438) @burakkgunduzz
+- [DataGridPremium] Auto-scroll when making range selection (#8661) @m4theushw
+- [l10n] Improve Spanish (es-ES) locale (#9500) @fufex
+
+### `@mui/x-date-pickers@v6.9.2` / `@mui/x-date-pickers-pro@v6.9.2`
+
+#### Changes
+
+- [pickers] Forward digital clock classes (#9555) @YoonjiJang
+- [pickers] Rename `internal` folder to `internals` on `@mui/x-date-picker-pro` (#9571) @flaviendelangle
+
+### `@mui/x-charts@6.0.0-alpha.2`
+
+#### Changes
+
+- [charts] Add pie chart component (#9395) @alexfauquette
+
+### Docs
+
+- [docs] Add pickers playground (#9164) @LukasTy
+- [docs] Fix API links for pickers (#9573) @alexfauquette
+- [docs] Fix demos with `ToggleButtonGroup` (#9548) @flaviendelangle
+- [docs] Fix typos in pagination documentation page (#9332) @RatherBeLunar
+- [docs] Hide ads on paid content @oliviertassinari
+- [docs] Move the charts in the sidebar (#9437) @flaviendelangle
+- [docs] New page: Components lifecycle (#8372) @flaviendelangle
+- [docs] Remove outdated header tag @oliviertassinari
+
+### Core
+
+- [core] Fix typo in priority support @oliviertassinari
+- [core] Remove mention of Crowdin @oliviertassinari
+
+## 6.9.1
+
+_Jun 30, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add experimental API for faster filtering performance
+- 🌍 Add Chinese (Hong Kong) (zh-HK) locale on the pickers
+- 🌍 Improve Romanian (ro-RO) and Hungarian (hu-HU) translations on the pickers and the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.9.1` / `@mui/x-data-grid-pro@v6.9.1` / `@mui/x-data-grid-premium@v6.9.1`
+
+#### Changes
+
+- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii
+- [DataGrid] Add section about enabling pagination on Pro and Premium (#8759) @joserodolfofreitas
+- [DataGrid] Don't forward `editCellState` prop to DOM element (#9501) @m4theushw
+- [DataGrid] Add experimental API for faster filtering performance (#9254) @romgrk
+- [DataGrid] Fix `nextFieldToFocus` to always be a visible column field when <kbd>Tab</kbd> key is pressed (#8314) @yaredtsy
+- [DataGrid] Fix `Maximum call stack size exceeded` error when using fractional width (#9516) @cherniavskii
+- [DataGridPro] Don't throw error in column pinning (#9507) @romgrk
+- [DataGridPro] Fix bug with `checkboxSelection` and treeData/grouping (#9418) @romgrk
+- [l10n] Improve Romanian (ro-RO) and Hungarian (hu-HU) translations (#9436) @noraleonte
+
+### `@mui/x-date-pickers@v6.9.1` / `@mui/x-date-pickers-pro@v6.9.1`
+
+#### Changes
+
+- [DateTimePicker] Scroll to Digital Clock section only when selection changes (#9434) @LukasTy
+- [pickers] Handle `keyDown` only when input is focused (#9481) @LukasTy
+- [pickers] Add `referenceDate` prop on `TimeClock`, `DigitalClock` and `MultiSectionDigitalClock` (#9356) @flaviendelangle
+- [l10n] Add Chinese (Hong Kong) (zh-HK) locale (#9468) @samchiu90
+- [l10n] Improve Romanian (ro-RO) translations (#9436) @noraleonte
+
+### `@mui/x-charts@6.0.0-alpha.1`
+
+#### Changes
+
+- [charts] Take responsive container from data grid (#9497) @alexfauquette
+- [charts] Update README.md (#9426) @alexfauquette
+- [charts] Fix typo and small refactor (#9526) @flaviendelangle
+
+### Docs
+
+- [docs] Add a recipe limiting to one expanded detail panel at a time (#9488) @cherniavskii
+- [docs] Add missing upcoming flag without issue (#9449) @oliviertassinari
+- [docs] Fix 301 when opening the charts @oliviertassinari
+- [docs] Fix 404 link (#9435) @alexfauquette
+- [docs] Fix `productId` logic (#9451) @oliviertassinari
+- [docs] Update charts overview.md (#9429) @brentertz
+- [docs] Avoid systematic usage of `"bg": "inline"` (#9499) @alexfauquette
+- [docs] Display plan icon in ToC (#9490) @cherniavskii
+- [docs] Remove "product" markdown header (#9517) @oliviertassinari
+
+### Core
+
+- [core] Add `edit-mode` to priority support action (#9483) @DanailH
+- [core] Fix priority support prompt action (#9472) @DanailH
+- [core] Update `uses` for priority support action (#9480) @DanailH
+- [core] Bumb update monorepo (#9476) @alexfauquette
+- [CHANGELOG] Fix media quality (#9439) @oliviertassinari
+- [CHANGELOG] Remove height img attribute @oliviertassinari
+- [test] Skip flaky row pinning tests in JSDOM (#9511) @cherniavskii
+
 ## 6.9.0
 
 _Jun 22, 2023_
 
 We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 We release a new package `@mui/x-charts`.
-  This package aims at simplifying the integration of charts into your dashboards. 📊
+- 🎁 We released a new open-source package: `@mui/x-charts`. This package aims at simplifying the integration of charts into your dashboards. 📊
+
+  <img width="512" alt="charts" src="https://github.com/mui/mui-x/assets/3165635/41201d3c-16a4-442d-a230-68356e6b433d">
+
+  It already contains [line](https://mui.com/x/react-charts/lines/), [bar](https://mui.com/x/react-charts/bars/), and [scatter](https://mui.com/x/react-charts/scatter/) charts, with basic customization features. Check out the [documentation](https://mui.com/x/react-charts/) to see what it can do, and open issues to get the feature you need implemented.
 
-  ![image](https://github.com/mui/mui-x/assets/45398769/613bae2f-537d-4ec3-8046-591d1a504a72)
+- 🚀 Introducing UTC and timezone support for pickers.
 
-  It already contains [lines](https://mui.com/x/react-charts/lines/), [bars](https://mui.com/x/react-charts/bars/), and [scatter](https://mui.com/x/react-charts/scatter/) charts with basic customization features.
-  Please, visit the new [documentation](https://mui.com/x/react-charts/) to know what it does, and open issues to get the feature you need to be implemented.
+  <img width="774" src="https://github.com/mui/mui-x/assets/3165635/ad95a404-ee67-4aff-b996-ad6cbb322348">
 
-- 🚀 Introduce the UTC and timezone support for pickers.
-  ![image](https://github.com/mui/mui-x/assets/3309670/f8b552b0-9ec2-417b-b769-95740308291d)
-  Please visit the [documentation](https://mui.com/x/react-date-pickers/timezone/) to learn how to use it.
+  Visit the [documentation](https://mui.com/x/react-date-pickers/timezone/) to learn how to use it.
 
 - 🌍 Improve Brazilian Portuguese (pt-BR) on the data grid
 - 🌍 Improve Czech (cs-CZ) locale on the pickers

package/DataGrid/DataGrid.js

@@ -513,7 +513,10 @@ DataGridRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   pagination: props => {
     if (props.pagination === false) {
       return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));

package/DataGrid/useDataGridComponent.js

@@ -54,7 +54,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowSelection(privateApiRef, props);
   useGridColumns(privateApiRef, props);
   useGridRows(privateApiRef, props);
-  useGridParamsApi(privateApiRef);
+  useGridParamsApi(privateApiRef, props);
   useGridColumnSpanning(privateApiRef);
   useGridColumnGrouping(privateApiRef, props);
   useGridEditing(privateApiRef, props);

package/README.md

@@ -7,7 +7,7 @@ It's part of MUI X, an open core extension of MUI, with advanced components.
 
 Install the package in your project directory with:
 
-```sh
+```bash
 // with npm
 npm install @mui/x-data-grid
 

package/colDef/gridActionsColDef.js

@@ -14,5 +14,6 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   disableColumnMenu: true,
   disableExport: true,
   renderCell: renderActionsCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined
 });

package/colDef/gridBooleanColDef.js

@@ -36,6 +36,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridBooleanFormatter,
   filterOperators: getGridBooleanOperators(),
   getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   aggregable: false,
   // @ts-ignore

package/colDef/gridBooleanOperators.js

@@ -1,16 +1,15 @@
 import { GridFilterInputBoolean } from '../components/panel/filterPanel/GridFilterInputBoolean';
-export const getGridBooleanOperators = () => [{
+import { convertLegacyOperators } from './utils';
+export const getGridBooleanOperators = () => convertLegacyOperators([{
   value: 'is',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!filterItem.value) {
       return null;
     }
     const valueAsBoolean = filterItem.value === 'true';
-    return ({
-      value
-    }) => {
+    return value => {
       return Boolean(value) === valueAsBoolean;
     };
   },
   InputComponent: GridFilterInputBoolean
-}];
+}]);

package/colDef/gridCheckboxSelectionColDef.js

@@ -19,6 +19,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
   valueGetter: params => {
     const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
     return selectionLookup[params.id] !== undefined;

package/colDef/gridDateColDef.js

@@ -52,6 +52,7 @@ export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridDateOperators(),
   renderEditCell: renderEditDateCell,
   getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });
@@ -62,6 +63,7 @@ export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridDateOperators(true),
   renderEditCell: renderEditDateCell,
   getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });

package/colDef/gridDateOperators.js

@@ -1,4 +1,5 @@
 import { GridFilterInputDate } from '../components/panel/filterPanel/GridFilterInputDate';
+import { convertLegacyOperators } from './utils';
 const dateRegex = /(\d+)-(\d+)-(\d+)/;
 const dateTimeRegex = /(\d+)-(\d+)-(\d+)T(\d+):(\d+)/;
 function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
@@ -7,9 +8,7 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
   }
   const [year, month, day, hour, minute] = filterItem.value.match(showTime ? dateTimeRegex : dateRegex).slice(1).map(Number);
   const time = new Date(year, month - 1, day, hour || 0, minute || 0).getTime();
-  return ({
-    value
-  }) => {
+  return value => {
     if (!value) {
       return false;
     }
@@ -23,9 +22,9 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
     return compareFn(timeToCompare, time);
   };
 }
-export const getGridDateOperators = showTime => [{
+export const getGridDateOperators = showTime => convertLegacyOperators([{
   value: 'is',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 === value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -34,7 +33,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'not',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 !== value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -43,7 +42,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'after',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -52,7 +51,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'onOrAfter',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -61,7 +60,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'before',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, !showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -70,7 +69,7 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'onOrBefore',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
   },
   InputComponent: GridFilterInputDate,
@@ -79,22 +78,18 @@ export const getGridDateOperators = showTime => [{
   }
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value == null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value != null;
     };
   },
   requiresFilterValue: false
-}];
+}]);

package/colDef/gridNumericColDef.js

@@ -3,6 +3,7 @@ import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils
 import { isNumber } from '../utils/utils';
 import { getGridNumericOperators, getGridNumericQuickFilterFn } from './gridNumericOperators';
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { convertQuickFilterV7ToLegacy } from './utils';
 export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'number',
   align: 'right',
@@ -13,5 +14,6 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     value
   }) => isNumber(value) ? value.toLocaleString() : value || '',
   filterOperators: getGridNumericOperators(),
-  getApplyQuickFilterFn: getGridNumericQuickFilterFn
+  getApplyQuickFilterFn: convertQuickFilterV7ToLegacy(getGridNumericQuickFilterFn),
+  getApplyQuickFilterFnV7: getGridNumericQuickFilterFn
 });

package/colDef/gridNumericOperators.d.ts

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

package/colDef/gridNumericOperators.js

@@ -1,30 +1,27 @@
 import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+import { convertLegacyOperators, tagInternalFilter } from './utils';
 const parseNumericValue = value => {
   if (value == null) {
     return null;
   }
   return Number(value);
 };
-export const getGridNumericQuickFilterFn = value => {
+export const getGridNumericQuickFilterFn = tagInternalFilter(value => {
   if (value == null || Number.isNaN(value) || value === '') {
     return null;
   }
-  return ({
-    value: columnValue
-  }) => {
+  return columnValue => {
     return parseNumericValue(columnValue) === parseNumericValue(value);
   };
-};
-export const getGridNumericOperators = () => [{
+});
+export const getGridNumericOperators = () => convertLegacyOperators([{
   value: '=',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       return parseNumericValue(value) === filterItem.value;
     };
   },
@@ -34,13 +31,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '!=',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       return parseNumericValue(value) !== filterItem.value;
     };
   },
@@ -50,13 +45,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '>',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       if (value == null) {
         return false;
       }
@@ -69,13 +62,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '>=',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       if (value == null) {
         return false;
       }
@@ -88,13 +79,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '<',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       if (value == null) {
         return false;
       }
@@ -107,13 +96,11 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: '<=',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       if (value == null) {
         return false;
       }
@@ -126,33 +113,27 @@ export const getGridNumericOperators = () => [{
   }
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value == null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return ({
-      value
-    }) => {
+  getApplyFilterFnV7: () => {
+    return value => {
       return value != null;
     };
   },
   requiresFilterValue: false
 }, {
   value: 'isAnyOf',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
-    return ({
-      value
-    }) => {
+    return value => {
       return value != null && filterItem.value.includes(Number(value));
     };
   },
@@ -160,4 +141,4 @@ export const getGridNumericOperators = () => [{
   InputComponentProps: {
     type: 'number'
   }
-}];
+}]);

package/colDef/gridSingleSelectOperators.js

@@ -1,44 +1,39 @@
 import { GridFilterInputSingleSelect } from '../components/panel/filterPanel/GridFilterInputSingleSelect';
 import { GridFilterInputMultipleSingleSelect } from '../components/panel/filterPanel/GridFilterInputMultipleSingleSelect';
 import { isObject } from '../utils/utils';
+import { convertLegacyOperators } from './utils';
 const parseObjectValue = value => {
   if (value == null || !isObject(value)) {
     return value;
   }
   return value.value;
 };
-export const getGridSingleSelectOperators = () => [{
+export const getGridSingleSelectOperators = () => convertLegacyOperators([{
   value: 'is',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || filterItem.value === '') {
       return null;
     }
-    return ({
-      value
-    }) => parseObjectValue(value) === parseObjectValue(filterItem.value);
+    return value => parseObjectValue(value) === parseObjectValue(filterItem.value);
   },
   InputComponent: GridFilterInputSingleSelect
 }, {
   value: 'not',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (filterItem.value == null || filterItem.value === '') {
       return null;
     }
-    return ({
-      value
-    }) => parseObjectValue(value) !== parseObjectValue(filterItem.value);
+    return value => parseObjectValue(value) !== parseObjectValue(filterItem.value);
   },
   InputComponent: GridFilterInputSingleSelect
 }, {
   value: 'isAnyOf',
-  getApplyFilterFn: filterItem => {
+  getApplyFilterFnV7: filterItem => {
     if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
     const filterItemValues = filterItem.value.map(parseObjectValue);
-    return ({
-      value
-    }) => filterItemValues.includes(parseObjectValue(value));
+    return value => filterItemValues.includes(parseObjectValue(value));
   },
   InputComponent: GridFilterInputMultipleSingleSelect
-}];
+}]);

package/colDef/gridStringColDef.js

@@ -1,6 +1,7 @@
 import { renderEditInputCell } from '../components/cell/GridEditInputCell';
 import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
+import { convertQuickFilterV7ToLegacy } from './utils';
 
 /**
  * TODO: Move pro and premium properties outside of this Community file
@@ -23,5 +24,6 @@ export const GRID_STRING_COL_DEF = {
   align: 'left',
   filterOperators: getGridStringOperators(),
   renderEditCell: renderEditInputCell,
-  getApplyQuickFilterFn: getGridStringQuickFilterFn
+  getApplyQuickFilterFn: convertQuickFilterV7ToLegacy(getGridStringQuickFilterFn),
+  getApplyQuickFilterFnV7: getGridStringQuickFilterFn
 };

package/colDef/gridStringOperators.d.ts

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