@mui/x-data-grid 6.17.0 → 6.18.1

package/CHANGELOG.md

@@ -3,6 +3,125 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.1
+
+_Nov 9, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Fix aggregation label not showing when `renderHeader` is used (#10961) @cherniavskii
+- 📘 Server side data source [early documentation](https://mui.com/x/react-data-grid/server-side-data/) published
+- 📈 `<ChartsReferenceLine />` component is now available
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.1`
+
+- [DataGrid] Fix cell value type in quick filtering v7 (#10884) @cherniavskii
+- [DataGrid] Fix keyboard navigation for actions cell with disabled buttons (#10947) @michelengelen
+- [DataGrid] Fix `undefined` slot values (#10934) @romgrk
+
+#### `@mui/x-data-grid-pro@6.18.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.1`, plus:
+
+- [DataGridPro] Add data source interface and basic documentation (#10543) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.18.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.1`, plus:
+
+- [DataGridPremium] Render aggregation label when `renderHeader` is used (#10961) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.1`
+
+- [fields] Fix multi input date time field section selection (#10915) @noraleonte
+- [pickers] Always use up-to-date `defaultView` (#10889) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.1`.
+
+### Charts / `@mui/x-charts@6.18.1`
+
+- [charts] Add `<ChartsReferenceLine />` component (#10597) @wascou
+- [charts] Improve properties JSDoc (#10931) @alexfauquette
+
+### Docs
+
+- [docs] Fix charts docs as stable (#10888) @alexfauquette
+- [docs] Document how to hide the legend (#10954) @alexfauquette
+
+### Core
+
+- [core] Adds new alpha version to version select on the docs (#10944) @michelengelen
+- [core] Fix GitHub title tag consistency @oliviertassinari
+
+## 6.18.0
+
+_Nov 3, 2023_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 The Charts package is now officially stable!
+- 🥧 Pie charts are now animated.
+- 📈 Line charts now support partial data, and can interpolate missing data.
+
+<img width="380" alt="line charts with partial data" src="https://github.com/mui/mui-x/assets/45398769/385ecf77-19b2-4a03-8aef-5d547db1d9ad">
+
+- ✨ Allow to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.0`
+
+- [DataGrid] Allow to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering (#10569) @cherniavskii
+- [DataGrid] Fix a typo in `gridFilterApi` (#10786) @vu-dao-93
+- [DataGrid] Fix `undefined` row id (#10670) @romgrk
+- [DataGrid] Make column autosizing work with dynamic row height (#10693) @cherniavskii
+- [l10n] Allow to customize sorting label per column (#10839) @JerryWu1234
+
+#### `@mui/x-data-grid-pro@6.18.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.0`.
+
+#### `@mui/x-data-grid-premium@6.18.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.0`
+
+- [pickers] Add reference links to calendar components (#10644) @michelengelen
+
+#### `@mui/x-date-pickers-pro@6.18.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.0`.
+
+### Charts / `@mui/x-charts@6.18.0`
+
+- [charts] Add animation on pie chart (#10782) @alexfauquette
+- [charts] Add reference links to shared/misc chart components (#10660) @michelengelen
+- [charts] Allows to connect nulls (#10803) @alexfauquette
+- [charts] Fix axis highlight in dark mode (#10820) @LukasTy
+
+### Docs
+
+- [docs] Add a data grid recipe for autosizing columns after fetching row-data (#10822) @michelengelen
+- [docs] Add a data grid recipe showing how to remove cell outline on `focus` (#10843) @michelengelen
+- [docs] Add demo about how to use charts margin (#10886) @alexfauquette
+- [docs] Improve custom field input demos readability (#10559) @LukasTy
+
+### Core
+
+- [core] Generate `slot` API descriptions based on `slots` or `components` (#10879) @LukasTy
+
 ## 6.17.0
 
 _Oct 27, 2023_
@@ -296,7 +415,7 @@ Same changes as in `@mui/x-date-pickers@6.16.1`, plus:
 
 - [core] Fix casing consistency with legal and marketing content @oliviertassinari
 - [core] Revert the link in the priority support ticket description (#10517) @michelengelen
-- [CHANGELOG] Polish image @oliviertassinari
+- [changelog] Polish image @oliviertassinari
 
 ## 6.16.0
 
@@ -1088,7 +1207,7 @@ Same changes as in `@mui/x-date-pickers@6.10.1`.
 ### Core
 
 - [core] Add `validate` command (#9714) @romgrk
-- [CHANGELOG] Update generator to new format @oliviertassinari
+- [changelog] Update generator to new format @oliviertassinari
 
 ## 6.10.0
 
@@ -1146,7 +1265,7 @@ Same changes as in `@mui/x-date-pickers@6.10.0`.
 
 - [core] Disambiguate eslint plugin name @oliviertassinari
 - [core] Update priority support issue template and prompt (#9574) @DanailH
-- [CHANGELOG] Clarify each plan (#9446) @oliviertassinari
+- [changelog] Clarify each plan (#9446) @oliviertassinari
 - [license] Fix error terminology (#9614) @oliviertassinari
 
 ## 6.9.2
@@ -1295,8 +1414,8 @@ Same changes as in `@mui/x-date-pickers@6.9.1`.
 - [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
+- [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

package/DataGrid/DataGrid.js

@@ -278,6 +278,12 @@ DataGridRaw.propTypes = {
    * @default false
    */
   hideFooterSelectedRowCount: PropTypes.bool,
+  /**
+   * If `true`, the diacritics (accents) are ignored when filtering or quick filtering.
+   * E.g. when filter value is `cafe`, the rows with `café` will be visible.
+   * @default false
+   */
+  ignoreDiacritics: PropTypes.bool,
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.

package/DataGrid/useDataGridProps.js

@@ -51,6 +51,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   hideFooterPagination: false,
   hideFooterRowCount: false,
   hideFooterSelectedRowCount: false,
+  ignoreDiacritics: false,
   logger: console,
   logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
   pagination: false,

package/colDef/gridStringOperators.js

@@ -2,13 +2,17 @@ import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilter
 import { escapeRegExp } from '../utils/utils';
 import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
 import { convertLegacyOperators, tagInternalFilter } from './utils';
+import { removeDiacritics } from '../hooks/features/filter/gridFilterUtils';
 export const getGridStringQuickFilterFn = tagInternalFilter(value => {
   if (!value) {
     return null;
   }
   const filterRegex = new RegExp(escapeRegExp(value), 'i');
   return (_, row, column, apiRef) => {
-    const columnValue = apiRef.current.getRowFormattedValue(row, column);
+    let columnValue = apiRef.current.getRowFormattedValue(row, column);
+    if (apiRef.current.ignoreDiacritics) {
+      columnValue = removeDiacritics(columnValue);
+    }
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
 });

package/components/cell/GridActionsCell.js

@@ -73,10 +73,12 @@ function GridActionsCell(props) {
     focus() {
       // If ignoreCallToFocus is true, then one of the buttons was clicked and the focus is already set
       if (!ignoreCallToFocus.current) {
-        setFocusedButtonIndex(0);
+        // find the first focusable button and pass the index to the state
+        const focusableButtonIndex = options.findIndex(o => !o.props.disabled);
+        setFocusedButtonIndex(focusableButtonIndex);
       }
     }
-  }), []);
+  }), [options]);
   React.useEffect(() => {
     if (focusedButtonIndex >= numberOfButtons) {
       setFocusedButtonIndex(numberOfButtons - 1);
@@ -104,19 +106,24 @@ function GridActionsCell(props) {
     if (numberOfButtons <= 1) {
       return;
     }
+    const getNewIndex = (index, direction) => {
+      var _options;
+      if (index < 0 || index > options.length) {
+        return index;
+      }
+
+      // for rtl mode we need to reverse the direction
+      const rtlMod = theme.direction === 'rtl' ? -1 : 1;
+      const indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
+
+      // if the button that should receive focus is disabled go one more step
+      return (_options = options[index + indexMod]) != null && _options.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
+    };
     let newIndex = focusedButtonIndex;
     if (event.key === 'ArrowRight') {
-      if (theme.direction === 'rtl') {
-        newIndex -= 1;
-      } else {
-        newIndex += 1;
-      }
+      newIndex = getNewIndex(focusedButtonIndex, 'right');
     } else if (event.key === 'ArrowLeft') {
-      if (theme.direction === 'rtl') {
-        newIndex += 1;
-      } else {
-        newIndex -= 1;
-      }
+      newIndex = getNewIndex(focusedButtonIndex, 'left');
     }
     if (newIndex < 0 || newIndex >= numberOfButtons) {
       return; // We're already in the first or last item = do nothing and let the grid listen the event

package/components/cell/GridCell.js

@@ -386,7 +386,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
 } : void 0;
 export { MemoizedCellWrapper as GridCellWrapper, GridCell };
 const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$unstable_c, _rootProps$experiment3, _rootProps$experiment4;
+  var _getActions, _ref, _rootProps$unstable_c, _rootProps$experiment3, _rootProps$experiment4;
   const {
       column,
       rowId,
@@ -441,8 +441,8 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
     value,
     formattedValue
   } = cellParamsWithAPI;
-  const managesOwnFocus = column.type === 'actions';
-  const tabIndex = (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  const canManageOwnFocus = column.type === 'actions' && ((_getActions = (_ref = column).getActions) == null ? void 0 : _getActions.call(_ref, apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled));
+  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
   const {
     classes: rootClasses,
     getCellClassName
@@ -580,7 +580,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: valueString
     });
   }
-  if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+  if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
     children = /*#__PURE__*/React.cloneElement(children, {
       focusElementRef
     });

package/components/containers/GridRootStyles.js

@@ -191,7 +191,8 @@ export const GridRootStyles = styled('div', {
         overflow: 'visible !important'
       },
       [`& .${gridClasses.cell} > *`]: {
-        overflow: 'visible !important'
+        overflow: 'visible !important',
+        whiteSpace: 'nowrap'
       }
     },
     [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -34,6 +34,10 @@ function GridColumnMenuSortItem(props) {
   if (!colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
     return null;
   }
+  const getLabel = key => {
+    const label = apiRef.current.getLocaleText(key);
+    return typeof label === 'function' ? label(colDef) : label;
+  };
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsxs(MenuItem, {
       onClick: onSortMenuItemClick,
@@ -43,7 +47,7 @@ function GridColumnMenuSortItem(props) {
           fontSize: "small"
         })
       }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('columnMenuSortAsc')
+        children: getLabel('columnMenuSortAsc')
       })]
     }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsxs(MenuItem, {
       onClick: onSortMenuItemClick,
@@ -53,7 +57,7 @@ function GridColumnMenuSortItem(props) {
           fontSize: "small"
         })
       }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('columnMenuSortDesc')
+        children: getLabel('columnMenuSortDesc')
       })]
     }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsxs(MenuItem, {
       onClick: onSortMenuItemClick,

package/hooks/core/useGridInitialization.d.ts

@@ -4,4 +4,4 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon<any, any>>(inputApiRef: React.MutableRefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature' | 'logger' | 'logLevel' | 'localeText'>) => React.MutableRefObject<PrivateApi>;
+export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon<any, any>>(inputApiRef: React.MutableRefObject<Api> | undefined, props: DataGridProcessedProps) => React.MutableRefObject<PrivateApi>;

package/hooks/core/useGridInitialization.js

@@ -15,5 +15,8 @@ export const useGridInitialization = (inputApiRef, props) => {
   useGridPipeProcessing(privateApiRef);
   useGridStrategyProcessing(privateApiRef);
   useGridLocaleText(privateApiRef, props);
+  privateApiRef.current.register('private', {
+    rootProps: props
+  });
   return privateApiRef;
 };

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -1,38 +1,22 @@
 import * as React from 'react';
-import { GridFilterItem, GridFilterModel, GridRowIdGetter, GridValidRowModel } from '../../../models';
-import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridFilterItem, GridFilterModel } from '../../../models';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from './gridFilterState';
-type GridFilterItemApplierNotAggregated = (row: GridValidRowModel, shouldApplyItem?: (field: string) => boolean) => GridFilterItemResult;
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
-export declare const cleanFilterItem: (item: GridFilterItem, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItem;
-export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterModel;
-export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['filter'];
-/**
- * Generates a method to easily check if a row is matching the current filter model.
- * @param {GridRowIdGetter | undefined} getRowId The getter for row's id.
- * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
- * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
- */
-export declare const buildAggregatedFilterItemsApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>, disableEval: boolean) => GridFilterItemApplierNotAggregated | null;
-/**
- * Generates a method to easily check if a row is matching the current quick filter.
- * @param {GridRowIdGetter | undefined} getRowId The getter for row's id.
- * @param {any[]} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
- * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
- */
-export declare const buildAggregatedQuickFilterApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
-export declare const buildAggregatedFilterApplier: (getRowId: GridRowIdGetter | undefined, filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
+export declare const cleanFilterItem: (item: GridFilterItem, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => GridFilterItem;
+export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => GridFilterModel;
+export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['filter'];
+export declare const removeDiacritics: (value: unknown) => unknown;
+export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
 type FilterCache = {
     cleanedFilterItems?: GridFilterItem[];
 };
-export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>, cache: FilterCache) => boolean;
+export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridPrivateApiCommunity>, cache: FilterCache) => boolean;
 export {};

package/hooks/features/filter/gridFilterUtils.js

@@ -3,6 +3,7 @@ import { GridLogicOperator } from '../../../models';
 import { GLOBAL_API_REF, isInternalFilter } from '../../../colDef/utils';
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
+import { getPublicApiRef } from '../../../utils/getPublicApiRef';
 import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from '../columns';
 
 // Fixes https://github.com/mui/mui-x/issues/10056
@@ -17,7 +18,7 @@ try {
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
@@ -69,6 +70,12 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
 export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => filteringState => _extends({}, filteringState, {
   filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
+export const removeDiacritics = value => {
+  if (typeof value === 'string') {
+    return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+  }
+  return value;
+};
 const getFilterCallbackFromItem = (filterItem, apiRef) => {
   if (!filterItem.field || !filterItem.operator) {
     return null;
@@ -85,6 +92,12 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   } else {
     parsedValue = filterItem.value;
   }
+  const {
+    ignoreDiacritics
+  } = apiRef.current.rootProps;
+  if (ignoreDiacritics) {
+    parsedValue = removeDiacritics(parsedValue);
+  }
   const newFilterItem = _extends({}, filterItem, {
     value: parsedValue
   });
@@ -98,6 +111,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   }
   const hasUserFunctionLegacy = !isInternalFilter(filterOperator.getApplyFilterFn);
   const hasUserFunctionV7 = !isInternalFilter(filterOperator.getApplyFilterFnV7);
+  const publicApiRef = getPublicApiRef(apiRef);
   if (filterOperator.getApplyFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) {
     const applyFilterOnRow = filterOperator.getApplyFilterFnV7(newFilterItem, column);
     if (typeof applyFilterOnRow !== 'function') {
@@ -107,8 +121,11 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
       v7: true,
       item: newFilterItem,
       fn: row => {
-        const value = apiRef.current.getRowValue(row, column);
-        return applyFilterOnRow(value, row, column, apiRef);
+        let value = apiRef.current.getRowValue(row, column);
+        if (ignoreDiacritics) {
+          value = removeDiacritics(value);
+        }
+        return applyFilterOnRow(value, row, column, publicApiRef);
       }
     };
   }
@@ -121,7 +138,10 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
     item: newFilterItem,
     fn: rowId => {
       const params = apiRef.current.getCellParams(rowId, newFilterItem.field);
-      GLOBAL_API_REF.current = apiRef;
+      GLOBAL_API_REF.current = publicApiRef;
+      if (ignoreDiacritics) {
+        params.value = removeDiacritics(params.value);
+      }
       const result = applyFilterOnRow(params);
       GLOBAL_API_REF.current = null;
       return result;
@@ -132,12 +152,11 @@ let filterItemsApplierId = 1;
 
 /**
  * Generates a method to easily check if a row is matching the current filter model.
- * @param {GridRowIdGetter | undefined} getRowId The getter for row's id.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disableEval) => {
+const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
   const {
     items
   } = filterModel;
@@ -152,7 +171,7 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
       for (let i = 0; i < appliers.length; i += 1) {
         const applier = appliers[i];
         if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
-          resultPerItemId[applier.item.id] = applier.v7 ? applier.fn(row) : applier.fn(getRowId ? getRowId(row) : row.id);
+          resultPerItemId[applier.item.id] = applier.v7 ? applier.fn(row) : applier.fn(apiRef.current.getRowId(row));
         }
       }
       return resultPerItemId;
@@ -168,14 +187,14 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
       ${appliers.map((applier, i) => `${JSON.stringify(String(applier.item.id))}:
           !shouldApply${i} ?
             false :
-            ${applier.v7 ? `appliers[${i}].fn(row)` : `appliers[${i}].fn(${getRowId ? 'getRowId(row)' : 'row.id'})`},
+            ${applier.v7 ? `appliers[${i}].fn(row)` : `appliers[${i}].fn(getRowId(row))`},
       `).join('\n')}};
 
       return result$$;
     })`;
   const filterItemCore = evalCode(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
   const filterItem = (row, shouldApplyItem) => {
-    return filterItemCore(getRowId, appliers, row, shouldApplyItem);
+    return filterItemCore(apiRef.current.getRowId, appliers, row, shouldApplyItem);
   };
   filterItemsApplierId += 1;
   return filterItem;
@@ -183,12 +202,11 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
 
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
- * @param {GridRowIdGetter | undefined} getRowId The getter for row's id.
  * @param {any[]} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
+const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   var _filterModel$quickFil, _filterModel$quickFil2, _filterModel$quickFil3;
   const quickFilterValues = (_filterModel$quickFil = (_filterModel$quickFil2 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil2.filter(Boolean)) != null ? _filterModel$quickFil : [];
   if (quickFilterValues.length === 0) {
@@ -197,6 +215,10 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
   const quickFilterExcludeHiddenColumns = (_filterModel$quickFil3 = filterModel.quickFilterExcludeHiddenColumns) != null ? _filterModel$quickFil3 : false;
   const columnFields = quickFilterExcludeHiddenColumns ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
   const appliersPerField = [];
+  const {
+    ignoreDiacritics
+  } = apiRef.current.rootProps;
+  const publicApiRef = getPublicApiRef(apiRef);
   columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);
     const getApplyQuickFilterFn = column == null ? void 0 : column.getApplyQuickFilterFn;
@@ -206,18 +228,24 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
     if (getApplyQuickFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) {
       appliersPerField.push({
         column,
-        appliers: quickFilterValues.map(value => ({
-          v7: true,
-          fn: getApplyQuickFilterFnV7(value, column, apiRef)
-        }))
+        appliers: quickFilterValues.map(quickFilterValue => {
+          const value = ignoreDiacritics ? removeDiacritics(quickFilterValue) : quickFilterValue;
+          return {
+            v7: true,
+            fn: getApplyQuickFilterFnV7(value, column, publicApiRef)
+          };
+        })
       });
     } else if (getApplyQuickFilterFn) {
       appliersPerField.push({
         column,
-        appliers: quickFilterValues.map(value => ({
-          v7: false,
-          fn: getApplyQuickFilterFn(value, column, apiRef)
-        }))
+        appliers: quickFilterValues.map(quickFilterValue => {
+          const value = ignoreDiacritics ? removeDiacritics(quickFilterValue) : quickFilterValue;
+          return {
+            v7: false,
+            fn: getApplyQuickFilterFn(value, column, publicApiRef)
+          };
+        })
       });
     }
   });
@@ -240,19 +268,25 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
           continue;
         }
         const applier = appliers[v];
-        const value = apiRef.current.getRowValue(row, column);
+        let value = apiRef.current.getRowValue(row, column);
         if (applier.fn === null) {
           continue;
         }
         if (applier.v7) {
-          const isMatching = applier.fn(value, row, column, apiRef);
+          if (ignoreDiacritics) {
+            value = removeDiacritics(value);
+          }
+          const isMatching = applier.fn(value, row, column, publicApiRef);
           if (isMatching) {
             result[filterValue] = true;
             continue outer;
           }
         } else {
           var _usedCellParams$field;
-          const cellParams = (_usedCellParams$field = usedCellParams[field]) != null ? _usedCellParams$field : apiRef.current.getCellParams(getRowId ? getRowId(row) : row.id, field);
+          const cellParams = (_usedCellParams$field = usedCellParams[field]) != null ? _usedCellParams$field : apiRef.current.getCellParams(apiRef.current.getRowId(row), field);
+          if (ignoreDiacritics) {
+            cellParams.value = removeDiacritics(cellParams.value);
+          }
           usedCellParams[field] = cellParams;
           const isMatching = applier.fn(cellParams);
           if (isMatching) {
@@ -268,9 +302,9 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
     return result;
   };
 };
-export const buildAggregatedFilterApplier = (getRowId, filterModel, apiRef, disableEval) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef, disableEval);
-  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef);
+export const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
   return function isRowMatchingFilters(row, shouldApplyFilter, result) {
     var _isRowMatchingFilterI, _isRowMatchingQuickFi;
     result.passingFilterItems = (_isRowMatchingFilterI = isRowMatchingFilterItems == null ? void 0 : isRowMatchingFilterItems(row, shouldApplyFilter)) != null ? _isRowMatchingFilterI : null;

package/hooks/features/filter/useGridFilter.d.ts

@@ -8,4 +8,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'initialState' | 'filterModel' | 'getRowId' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'slots' | 'slotProps' | 'disableColumnFilter' | 'disableEval'>) => void;
+export declare const useGridFilter: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'initialState' | 'filterModel' | 'getRowId' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'slots' | 'slotProps' | 'disableColumnFilter' | 'disableEval' | 'ignoreDiacritics'>) => void;

package/hooks/features/filter/useGridFilter.js

@@ -61,7 +61,7 @@ export const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(props.getRowId, filterModel, apiRef, props.disableEval) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
       const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
@@ -75,7 +75,7 @@ export const useGridFilter = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('filteredRowsSet');
-  }, [apiRef, props.filterMode, props.getRowId, props.disableEval]);
+  }, [apiRef, props.filterMode, props.disableEval]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
@@ -215,7 +215,8 @@ export const useGridFilter = (apiRef, props) => {
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
-    setQuickFilterValues
+    setQuickFilterValues,
+    ignoreDiacritics: props.ignoreDiacritics
   };
   useGridApiMethod(apiRef, filterApi, 'public');
 

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.17.0
+ * @mui/x-data-grid v6.18.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the