@mui/x-data-grid 6.16.3 → 6.18.0

package/modern/hooks/features/filter/gridFilterUtils.js

@@ -17,7 +17,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 +69,12 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
 export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => filteringState => _extends({}, filteringState, {
   filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
+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;
@@ -84,6 +90,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
   });
@@ -106,7 +118,10 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
       v7: true,
       item: newFilterItem,
       fn: row => {
-        const value = apiRef.current.getRowValue(row, column);
+        let value = apiRef.current.getRowValue(row, column);
+        if (ignoreDiacritics) {
+          value = removeDiacritics(value);
+        }
         return applyFilterOnRow(value, row, column, apiRef);
       }
     };
@@ -121,6 +136,9 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
     fn: rowId => {
       const params = apiRef.current.getCellParams(rowId, newFilterItem.field);
       GLOBAL_API_REF.current = apiRef;
+      if (ignoreDiacritics) {
+        params.value = removeDiacritics(params.value);
+      }
       const result = applyFilterOnRow(params);
       GLOBAL_API_REF.current = null;
       return result;
@@ -131,12 +149,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;
@@ -151,7 +168,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;
@@ -167,14 +184,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;
@@ -182,12 +199,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) => {
   const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
@@ -195,6 +211,9 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
   const quickFilterExcludeHiddenColumns = filterModel.quickFilterExcludeHiddenColumns ?? false;
   const columnFields = quickFilterExcludeHiddenColumns ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
   const appliersPerField = [];
+  const {
+    ignoreDiacritics
+  } = apiRef.current.rootProps;
   columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);
     const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
@@ -204,18 +223,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, apiRef)
+          };
+        })
       });
     } 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, apiRef)
+          };
+        })
       });
     }
   });
@@ -238,18 +263,24 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
           continue;
         }
         const applier = appliers[v];
-        const value = apiRef.current.getRowValue(row, column);
+        let value = apiRef.current.getRowFormattedValue(row, column);
         if (applier.fn === null) {
           continue;
         }
         if (applier.v7) {
+          if (ignoreDiacritics) {
+            value = removeDiacritics(value);
+          }
           const isMatching = applier.fn(value, row, column, apiRef);
           if (isMatching) {
             result[filterValue] = true;
             continue outer;
           }
         } else {
-          const cellParams = usedCellParams[field] ?? apiRef.current.getCellParams(getRowId ? getRowId(row) : row.id, field);
+          const cellParams = 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) {
@@ -265,9 +296,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) {
     result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;
     result.passingQuickFilterValues = isRowMatchingQuickFilter?.(row, shouldApplyFilter) ?? null;

package/modern/hooks/features/filter/useGridFilter.js

@@ -59,7 +59,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 ?? getDefaultGridFilterModel()
@@ -73,7 +73,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;

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -174,7 +174,7 @@ export const useGridRowsMeta = (apiRef, props) => {
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
-  const debouncedHydrateRowsMeta = React.useMemo(() => debounce(hydrateRowsMeta), [hydrateRowsMeta]);
+  const debouncedHydrateRowsMeta = React.useMemo(() => debounce(hydrateRowsMeta, props.rowPositionsDebounceMs), [hydrateRowsMeta, props.rowPositionsDebounceMs]);
   const storeMeasuredRowHeight = React.useCallback((id, height, position) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;

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

@@ -464,6 +464,7 @@ export const useGridVirtualScroller = props => {
       rowStyleCache.current = Object.create(null);
     }
     const rows = [];
+    let isRowWithFocusedCellRendered = false;
     for (let i = 0; i < renderedRows.length; i += 1) {
       const {
         id,
@@ -498,6 +499,13 @@ export const useGridVirtualScroller = props => {
         const style = _extends({}, rowStyle, rootRowStyle);
         rowStyleCache.current[id] = style;
       }
+      let index = rowIndexOffset + (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i;
+      if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) {
+        index = indexOfRowWithFocusedCell;
+        isRowWithFocusedCellRendered = true;
+      } else if (isRowWithFocusedCellRendered) {
+        index -= 1;
+      }
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -511,7 +519,7 @@ export const useGridVirtualScroller = props => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
-        index: rowIndexOffset + (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i,
+        index: index,
         containerWidth: availableSpace,
         isLastVisible: lastVisibleRowIndex,
         position: position

package/modern/index.js

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

package/modern/locales/ptBR.js

@@ -60,13 +60,12 @@ const ptBRGrid = {
   filterOperatorIsEmpty: 'está vazio',
   filterOperatorIsNotEmpty: 'não está vazio',
   filterOperatorIsAnyOf: 'é qualquer um dos',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': 'igual à',
+  'filterOperator!=': 'diferente de',
+  'filterOperator>': 'maior que',
+  'filterOperator>=': 'maior ou igual que',
+  'filterOperator<': 'menor que',
+  'filterOperator<=': 'menor ou igual que',
   // Header filter operators text
   headerFilterOperatorContains: 'Contém',
   headerFilterOperatorEquals: 'Igual',
@@ -74,13 +73,13 @@ const ptBRGrid = {
   headerFilterOperatorEndsWith: 'Termina com',
   headerFilterOperatorIs: 'É',
   headerFilterOperatorNot: 'Não é',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
+  headerFilterOperatorAfter: 'Depois de',
+  headerFilterOperatorOnOrAfter: 'Está entre ou depois de',
+  headerFilterOperatorBefore: 'Antes de',
+  headerFilterOperatorOnOrBefore: 'Está entre ou antes de',
+  headerFilterOperatorIsEmpty: 'É vazio',
+  headerFilterOperatorIsNotEmpty: 'Não é vazio',
+  headerFilterOperatorIsAnyOf: 'É algum',
   'headerFilterOperator=': 'Igual',
   'headerFilterOperator!=': 'Não igual',
   'headerFilterOperator>': 'Maior que',

package/modern/utils/utils.js

@@ -1,5 +1,5 @@
 export function isNumber(value) {
-  return typeof value === 'number';
+  return typeof value === 'number' && !Number.isNaN(value);
 }
 export function isFunction(value) {
   return typeof value === 'function';

package/node/DataGrid/DataGrid.js

@@ -286,6 +286,12 @@ DataGridRaw.propTypes = {
    * @default false
    */
   hideFooterSelectedRowCount: _propTypes.default.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.default.bool,
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.
@@ -604,6 +610,13 @@ DataGridRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: _propTypes.default.object,
+  /**
+   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
+   * Setting it to a lower value could be useful when using dynamic row height,
+   * but might reduce performance when displaying a large number of rows.
+   * @default 166
+   */
+  rowPositionsDebounceMs: _propTypes.default.number,
   /**
    * Set of rows of type [[GridRowsProp]].
    */

package/node/DataGrid/useDataGridProps.js

@@ -60,6 +60,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.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,
@@ -77,7 +78,8 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   keepNonExistentRowsSelected: false,
   keepColumnPositionIfDraggedOutside: false,
   unstable_ignoreValueFormatterDuringExport: false,
-  clipboardCopyCellDelimiter: '\t'
+  clipboardCopyCellDelimiter: '\t',
+  rowPositionsDebounceMs: 166
 };
 const defaultSlots = (0, _utils.uncapitalizeObjectKeys)(_defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 const useDataGridProps = inProps => {

package/node/colDef/gridStringOperators.js

@@ -13,8 +13,7 @@ const getGridStringQuickFilterFn = exports.getGridStringQuickFilterFn = (0, _uti
     return null;
   }
   const filterRegex = new RegExp((0, _utils.escapeRegExp)(value), 'i');
-  return (_, row, column, apiRef) => {
-    const columnValue = apiRef.current.getRowFormattedValue(row, column);
+  return columnValue => {
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
 });

package/node/components/containers/GridRootStyles.js

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

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

@@ -41,6 +41,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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
       onClick: onSortMenuItemClick,
@@ -50,7 +54,7 @@ function GridColumnMenuSortItem(props) {
           fontSize: "small"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: apiRef.current.getLocaleText('columnMenuSortAsc')
+        children: getLabel('columnMenuSortAsc')
       })]
     }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
       onClick: onSortMenuItemClick,
@@ -60,7 +64,7 @@ function GridColumnMenuSortItem(props) {
           fontSize: "small"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: apiRef.current.getLocaleText('columnMenuSortDesc')
+        children: getLabel('columnMenuSortDesc')
       })]
     }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
       onClick: onSortMenuItemClick,

package/node/hooks/core/useGridInitialization.js

@@ -20,6 +20,9 @@ const useGridInitialization = (inputApiRef, props) => {
   (0, _pipeProcessing.useGridPipeProcessing)(privateApiRef);
   (0, _strategyProcessing.useGridStrategyProcessing)(privateApiRef);
   (0, _useGridLocaleText.useGridLocaleText)(privateApiRef, props);
+  privateApiRef.current.register('private', {
+    rootProps: props
+  });
   return privateApiRef;
 };
 exports.useGridInitialization = useGridInitialization;

package/node/hooks/features/filter/gridFilterUtils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sanitizeFilterModel = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedQuickFilterApplier = exports.buildAggregatedFilterItemsApplier = exports.buildAggregatedFilterApplier = void 0;
+exports.sanitizeFilterModel = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedFilterApplier = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _models = require("../../../models");
 var _utils = require("../../../colDef/utils");
@@ -23,7 +23,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.
  */
@@ -78,6 +78,12 @@ const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering,
   filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
 exports.mergeStateWithFilterModel = mergeStateWithFilterModel;
+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;
@@ -93,6 +99,12 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   } else {
     parsedValue = filterItem.value;
   }
+  const {
+    ignoreDiacritics
+  } = apiRef.current.rootProps;
+  if (ignoreDiacritics) {
+    parsedValue = removeDiacritics(parsedValue);
+  }
   const newFilterItem = (0, _extends2.default)({}, filterItem, {
     value: parsedValue
   });
@@ -115,7 +127,10 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
       v7: true,
       item: newFilterItem,
       fn: row => {
-        const value = apiRef.current.getRowValue(row, column);
+        let value = apiRef.current.getRowValue(row, column);
+        if (ignoreDiacritics) {
+          value = removeDiacritics(value);
+        }
         return applyFilterOnRow(value, row, column, apiRef);
       }
     };
@@ -130,6 +145,9 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
     fn: rowId => {
       const params = apiRef.current.getCellParams(rowId, newFilterItem.field);
       _utils.GLOBAL_API_REF.current = apiRef;
+      if (ignoreDiacritics) {
+        params.value = removeDiacritics(params.value);
+      }
       const result = applyFilterOnRow(params);
       _utils.GLOBAL_API_REF.current = null;
       return result;
@@ -140,12 +158,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.
  */
-const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disableEval) => {
+const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
   const {
     items
   } = filterModel;
@@ -160,7 +177,7 @@ const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disabl
       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;
@@ -176,14 +193,14 @@ const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disabl
       ${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;
@@ -191,13 +208,11 @@ const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disabl
 
 /**
  * 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.
  */
-exports.buildAggregatedFilterItemsApplier = buildAggregatedFilterItemsApplier;
-const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
+const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
@@ -205,6 +220,9 @@ const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
   const quickFilterExcludeHiddenColumns = filterModel.quickFilterExcludeHiddenColumns ?? false;
   const columnFields = quickFilterExcludeHiddenColumns ? (0, _columns.gridVisibleColumnFieldsSelector)(apiRef) : (0, _columns.gridColumnFieldsSelector)(apiRef);
   const appliersPerField = [];
+  const {
+    ignoreDiacritics
+  } = apiRef.current.rootProps;
   columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);
     const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
@@ -214,18 +232,24 @@ 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, apiRef)
+          };
+        })
       });
     } 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, apiRef)
+          };
+        })
       });
     }
   });
@@ -248,18 +272,24 @@ const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
           continue;
         }
         const applier = appliers[v];
-        const value = apiRef.current.getRowValue(row, column);
+        let value = apiRef.current.getRowFormattedValue(row, column);
         if (applier.fn === null) {
           continue;
         }
         if (applier.v7) {
+          if (ignoreDiacritics) {
+            value = removeDiacritics(value);
+          }
           const isMatching = applier.fn(value, row, column, apiRef);
           if (isMatching) {
             result[filterValue] = true;
             continue outer;
           }
         } else {
-          const cellParams = usedCellParams[field] ?? apiRef.current.getCellParams(getRowId ? getRowId(row) : row.id, field);
+          const cellParams = 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) {
@@ -275,10 +305,9 @@ const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
     return result;
   };
 };
-exports.buildAggregatedQuickFilterApplier = buildAggregatedQuickFilterApplier;
-const buildAggregatedFilterApplier = (getRowId, filterModel, apiRef, disableEval) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef, disableEval);
-  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef);
+const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
   return function isRowMatchingFilters(row, shouldApplyFilter, result) {
     result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;
     result.passingQuickFilterValues = isRowMatchingQuickFilter?.(row, shouldApplyFilter) ?? null;

package/node/hooks/features/filter/useGridFilter.js

@@ -69,7 +69,7 @@ const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(props.getRowId, filterModel, apiRef, props.disableEval) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef, props.disableEval) : null;
       const filteringResult = apiRef.current.applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)()
@@ -83,7 +83,7 @@ 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;

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -184,7 +184,7 @@ const useGridRowsMeta = (apiRef, props) => {
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
-  const debouncedHydrateRowsMeta = React.useMemo(() => (0, _utils.unstable_debounce)(hydrateRowsMeta), [hydrateRowsMeta]);
+  const debouncedHydrateRowsMeta = React.useMemo(() => (0, _utils.unstable_debounce)(hydrateRowsMeta, props.rowPositionsDebounceMs), [hydrateRowsMeta, props.rowPositionsDebounceMs]);
   const storeMeasuredRowHeight = React.useCallback((id, height, position) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;