@mui/x-data-grid 6.17.0 → 6.18.1

package/internals/index.d.ts

@@ -72,6 +72,7 @@ export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
+export * from '../utils/getPublicApiRef';
 export type { GridPrivateOnlyApiCommon } from '../models/api/gridApiCommon';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 export * from '../hooks/utils/useOnMount';

package/internals/index.js

@@ -59,6 +59,7 @@ export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
+export * from '../utils/getPublicApiRef';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 export * from '../hooks/utils/useOnMount';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';

package/internals/utils/computeSlots.js

@@ -13,5 +13,12 @@ export function computeSlots({
   if (!overrides || Object.keys(overrides).length === 0) {
     return defaultSlots;
   }
-  return _extends({}, defaultSlots, overrides);
+  const result = _extends({}, defaultSlots);
+  Object.keys(overrides).forEach(key => {
+    const k = key;
+    if (overrides[k] !== undefined) {
+      result[k] = overrides[k];
+    }
+  });
+  return result;
 }

package/legacy/DataGrid/DataGrid.js

@@ -280,6 +280,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/legacy/DataGrid/useDataGridProps.js

@@ -52,6 +52,7 @@ export var 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/legacy/colDef/gridStringOperators.js

@@ -2,6 +2,7 @@ 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 var getGridStringQuickFilterFn = tagInternalFilter(function (value) {
   if (!value) {
     return null;
@@ -9,6 +10,9 @@ export var getGridStringQuickFilterFn = tagInternalFilter(function (value) {
   var filterRegex = new RegExp(escapeRegExp(value), 'i');
   return function (_, row, column, apiRef) {
     var columnValue = apiRef.current.getRowFormattedValue(row, column);
+    if (apiRef.current.ignoreDiacritics) {
+      columnValue = removeDiacritics(columnValue);
+    }
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
 });

package/legacy/components/cell/GridActionsCell.js

@@ -97,11 +97,15 @@ function GridActionsCell(props) {
       focus: function 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
+          var focusableButtonIndex = options.findIndex(function (o) {
+            return !o.props.disabled;
+          });
+          setFocusedButtonIndex(focusableButtonIndex);
         }
       }
     };
-  }, []);
+  }, [options]);
   React.useEffect(function () {
     if (focusedButtonIndex >= numberOfButtons) {
       setFocusedButtonIndex(numberOfButtons - 1);
@@ -133,19 +137,24 @@ function GridActionsCell(props) {
     if (numberOfButtons <= 1) {
       return;
     }
+    var getNewIndex = function getNewIndex(index, direction) {
+      var _options;
+      if (index < 0 || index > options.length) {
+        return index;
+      }
+
+      // for rtl mode we need to reverse the direction
+      var rtlMod = theme.direction === 'rtl' ? -1 : 1;
+      var 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;
+    };
     var 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/legacy/components/cell/GridCell.js

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

package/legacy/components/containers/GridRootStyles.js

@@ -64,7 +64,8 @@ export var GridRootStyles = styled('div', {
   })), _defineProperty(_extends2, "&.".concat(gridClasses.autosizing), (_$concat2 = {}, _defineProperty(_$concat2, "& .".concat(gridClasses.columnHeaderTitleContainerContent, " > *"), {
     overflow: 'visible !important'
   }), _defineProperty(_$concat2, "& .".concat(gridClasses.cell, " > *"), {
-    overflow: 'visible !important'
+    overflow: 'visible !important',
+    whiteSpace: 'nowrap'
   }), _$concat2)), _defineProperty(_extends2, "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
     borderBottomColor: 'transparent'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {

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

@@ -36,6 +36,10 @@ function GridColumnMenuSortItem(props) {
   })) {
     return null;
   }
+  var getLabel = function getLabel(key) {
+    var 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,
@@ -45,7 +49,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,
@@ -55,7 +59,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/legacy/hooks/core/useGridInitialization.js

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

package/legacy/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.
  */
@@ -79,6 +80,12 @@ export var mergeStateWithFilterModel = function mergeStateWithFilterModel(filter
     });
   };
 };
+export var removeDiacritics = function removeDiacritics(value) {
+  if (typeof value === 'string') {
+    return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+  }
+  return value;
+};
 var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, apiRef) {
   if (!filterItem.field || !filterItem.operator) {
     return null;
@@ -97,6 +104,10 @@ var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, a
   } else {
     parsedValue = filterItem.value;
   }
+  var ignoreDiacritics = apiRef.current.rootProps.ignoreDiacritics;
+  if (ignoreDiacritics) {
+    parsedValue = removeDiacritics(parsedValue);
+  }
   var newFilterItem = _extends({}, filterItem, {
     value: parsedValue
   });
@@ -112,6 +123,7 @@ var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, a
   }
   var hasUserFunctionLegacy = !isInternalFilter(filterOperator.getApplyFilterFn);
   var hasUserFunctionV7 = !isInternalFilter(filterOperator.getApplyFilterFnV7);
+  var publicApiRef = getPublicApiRef(apiRef);
   if (filterOperator.getApplyFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) {
     var _applyFilterOnRow = filterOperator.getApplyFilterFnV7(newFilterItem, column);
     if (typeof _applyFilterOnRow !== 'function') {
@@ -122,7 +134,10 @@ var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, a
       item: newFilterItem,
       fn: function fn(row) {
         var value = apiRef.current.getRowValue(row, column);
-        return _applyFilterOnRow(value, row, column, apiRef);
+        if (ignoreDiacritics) {
+          value = removeDiacritics(value);
+        }
+        return _applyFilterOnRow(value, row, column, publicApiRef);
       }
     };
   }
@@ -135,7 +150,10 @@ var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, a
     item: newFilterItem,
     fn: function fn(rowId) {
       var params = apiRef.current.getCellParams(rowId, newFilterItem.field);
-      GLOBAL_API_REF.current = apiRef;
+      GLOBAL_API_REF.current = publicApiRef;
+      if (ignoreDiacritics) {
+        params.value = removeDiacritics(params.value);
+      }
       var result = applyFilterOnRow(params);
       GLOBAL_API_REF.current = null;
       return result;
@@ -146,12 +164,11 @@ var 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 var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef, disableEval) {
+var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval) {
   var items = filterModel.items;
   var appliers = items.map(function (item) {
     return getFilterCallbackFromItem(item, apiRef);
@@ -168,7 +185,7 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
       for (var i = 0; i < appliers.length; i += 1) {
         var 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;
@@ -180,11 +197,11 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
   var filterItemTemplate = "(function filterItem$$(getRowId, appliers, row, shouldApplyFilter) {\n      ".concat(appliers.map(function (applier, i) {
     return "const shouldApply".concat(i, " = !shouldApplyFilter || shouldApplyFilter(").concat(JSON.stringify(applier.item.field), ");");
   }).join('\n'), "\n\n      const result$$ = {\n      ").concat(appliers.map(function (applier, i) {
-    return "".concat(JSON.stringify(String(applier.item.id)), ":\n          !shouldApply").concat(i, " ?\n            false :\n            ").concat(applier.v7 ? "appliers[".concat(i, "].fn(row)") : "appliers[".concat(i, "].fn(").concat(getRowId ? 'getRowId(row)' : 'row.id', ")"), ",\n      ");
+    return "".concat(JSON.stringify(String(applier.item.id)), ":\n          !shouldApply").concat(i, " ?\n            false :\n            ").concat(applier.v7 ? "appliers[".concat(i, "].fn(row)") : "appliers[".concat(i, "].fn(getRowId(row))"), ",\n      ");
   }).join('\n'), "};\n\n      return result$$;\n    })");
   var filterItemCore = evalCode(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
   var filterItem = function filterItem(row, shouldApplyItem) {
-    return filterItemCore(getRowId, appliers, row, shouldApplyItem);
+    return filterItemCore(apiRef.current.getRowId, appliers, row, shouldApplyItem);
   };
   filterItemsApplierId += 1;
   return filterItem;
@@ -192,12 +209,11 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
 
 /**
  * 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 var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef) {
+var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilterApplier(filterModel, apiRef) {
   var _filterModel$quickFil, _filterModel$quickFil2, _filterModel$quickFil3;
   var quickFilterValues = (_filterModel$quickFil = (_filterModel$quickFil2 = filterModel.quickFilterValues) == null ? void 0 : _filterModel$quickFil2.filter(Boolean)) != null ? _filterModel$quickFil : [];
   if (quickFilterValues.length === 0) {
@@ -206,6 +222,8 @@ export var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilt
   var quickFilterExcludeHiddenColumns = (_filterModel$quickFil3 = filterModel.quickFilterExcludeHiddenColumns) != null ? _filterModel$quickFil3 : false;
   var columnFields = quickFilterExcludeHiddenColumns ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
   var appliersPerField = [];
+  var ignoreDiacritics = apiRef.current.rootProps.ignoreDiacritics;
+  var publicApiRef = getPublicApiRef(apiRef);
   columnFields.forEach(function (field) {
     var column = apiRef.current.getColumn(field);
     var getApplyQuickFilterFn = column == null ? void 0 : column.getApplyQuickFilterFn;
@@ -215,20 +233,22 @@ export var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilt
     if (getApplyQuickFilterFnV7 && !(hasUserFunctionLegacy && !hasUserFunctionV7)) {
       appliersPerField.push({
         column: column,
-        appliers: quickFilterValues.map(function (value) {
+        appliers: quickFilterValues.map(function (quickFilterValue) {
+          var value = ignoreDiacritics ? removeDiacritics(quickFilterValue) : quickFilterValue;
           return {
             v7: true,
-            fn: getApplyQuickFilterFnV7(value, column, apiRef)
+            fn: getApplyQuickFilterFnV7(value, column, publicApiRef)
           };
         })
       });
     } else if (getApplyQuickFilterFn) {
       appliersPerField.push({
         column: column,
-        appliers: quickFilterValues.map(function (value) {
+        appliers: quickFilterValues.map(function (quickFilterValue) {
+          var value = ignoreDiacritics ? removeDiacritics(quickFilterValue) : quickFilterValue;
           return {
             v7: false,
-            fn: getApplyQuickFilterFn(value, column, apiRef)
+            fn: getApplyQuickFilterFn(value, column, publicApiRef)
           };
         })
       });
@@ -255,14 +275,20 @@ export var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilt
           continue;
         }
         if (applier.v7) {
-          var isMatching = applier.fn(value, row, column, apiRef);
+          if (ignoreDiacritics) {
+            value = removeDiacritics(value);
+          }
+          var isMatching = applier.fn(value, row, column, publicApiRef);
           if (isMatching) {
             result[filterValue] = true;
             continue outer;
           }
         } else {
           var _usedCellParams$_fiel;
-          var cellParams = (_usedCellParams$_fiel = usedCellParams[_field]) != null ? _usedCellParams$_fiel : apiRef.current.getCellParams(getRowId ? getRowId(row) : row.id, _field);
+          var cellParams = (_usedCellParams$_fiel = usedCellParams[_field]) != null ? _usedCellParams$_fiel : apiRef.current.getCellParams(apiRef.current.getRowId(row), _field);
+          if (ignoreDiacritics) {
+            cellParams.value = removeDiacritics(cellParams.value);
+          }
           usedCellParams[_field] = cellParams;
           var _isMatching = applier.fn(cellParams);
           if (_isMatching) {
@@ -278,9 +304,9 @@ export var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilt
     return result;
   };
 };
-export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(getRowId, filterModel, apiRef, disableEval) {
-  var isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(getRowId, filterModel, apiRef, disableEval);
-  var isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(getRowId, filterModel, apiRef);
+export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(filterModel, apiRef, disableEval) {
+  var isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval);
+  var 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/legacy/hooks/features/filter/useGridFilter.js

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

package/legacy/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

package/legacy/internals/index.js

@@ -59,6 +59,7 @@ export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
+export * from '../utils/getPublicApiRef';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 export * from '../hooks/utils/useOnMount';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';

package/legacy/internals/utils/computeSlots.js

@@ -12,5 +12,12 @@ export function computeSlots(_ref) {
   if (!overrides || Object.keys(overrides).length === 0) {
     return defaultSlots;
   }
-  return _extends({}, defaultSlots, overrides);
+  var result = _extends({}, defaultSlots);
+  Object.keys(overrides).forEach(function (key) {
+    var k = key;
+    if (overrides[k] !== undefined) {
+      result[k] = overrides[k];
+    }
+  });
+  return result;
 }

package/legacy/utils/getPublicApiRef.js

@@ -0,0 +1,5 @@
+export function getPublicApiRef(apiRef) {
+  return {
+    current: apiRef.current.getPublicApi()
+  };
+}

package/models/api/gridApiCommon.d.ts

@@ -27,9 +27,10 @@ import type { GridStatePersistenceApi } from '../../hooks/features/statePersiste
 import { GridColumnGroupingApi } from './gridColumnGroupingApi';
 import type { GridInitialStateCommunity, GridStateCommunity } from '../gridStateCommunity';
 import { GridHeaderFilteringApi, GridHeaderFilteringPrivateApi } from './gridHeaderFilteringApi';
+import type { DataGridProcessedProps } from '../props/DataGridProps';
 export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi {
 }
-export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon> extends GridCorePrivateApi<Api, PrivateApi>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi {
+export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi {
 }
-export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon> {
+export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon, DataGridProcessedProps> {
 }

package/models/api/gridApiCommunity.d.ts

@@ -1,4 +1,5 @@
 import type { GridInitialStateCommunity, GridStateCommunity } from '../gridStateCommunity';
+import type { DataGridProcessedProps } from '../props/DataGridProps';
 import type { GridApiCommon, GridPrivateOnlyApiCommon } from './gridApiCommon';
 import type { GridColumnReorderApi } from './gridColumnApi';
 import { GridRowProApi } from './gridRowApi';
@@ -8,5 +9,5 @@ import { GridRowMultiSelectionApi } from './gridRowSelectionApi';
  */
 export interface GridApiCommunity extends GridApiCommon<GridStateCommunity, GridInitialStateCommunity> {
 }
-export interface GridPrivateApiCommunity extends GridApiCommunity, GridPrivateOnlyApiCommon<GridApiCommunity, GridPrivateApiCommunity>, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi {
+export interface GridPrivateApiCommunity extends GridApiCommunity, GridPrivateOnlyApiCommon<GridApiCommunity, GridPrivateApiCommunity, DataGridProcessedProps>, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi {
 }

package/models/api/gridCoreApi.d.ts

@@ -4,6 +4,7 @@ import { Store } from '../../utils/Store';
 import { EventManager, EventListenerOptions } from '../../utils/EventManager';
 import { GridApiCaches } from '../gridApiCaches';
 import type { GridApiCommon, GridPrivateApiCommon } from './gridApiCommon';
+import type { DataGridProcessedProps } from '../props/DataGridProps';
 /**
  * The core API interface that is available in the grid `apiRef`.
  */
@@ -41,7 +42,7 @@ export interface GridCoreApi {
      */
     store: Store<GridApiCommon['state']>;
 }
-export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPrivateApi extends GridPrivateApiCommon> {
+export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPrivateApi extends GridPrivateApiCommon, GridProps extends DataGridProcessedProps> {
     /**
      * The caches used by hooks and state initializers.
      */
@@ -71,6 +72,11 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      * @returns {GridPublicApi} The public api.
      */
     getPublicApi: () => GridPublicApi;
+    /**
+     * Allows to access the root props outside of the React component.
+     * Do not use in React components - use the `useGridRootProps` hook instead.
+     */
+    rootProps: GridProps;
     /**
      * The React ref of the grid column container virtualized div element.
      */

package/models/api/gridFilterApi.d.ts

@@ -1,6 +1,7 @@
 import { GridFilterModel } from '../gridFilterModel';
 import { GridFilterItem, GridLogicOperator } from '../gridFilterItem';
 import { GridControlledStateReasonLookup } from '../events';
+import { DataGridProcessedProps } from '../props/DataGridProps';
 /**
  * The filter API interface that is available in the grid [[apiRef]].
  */
@@ -48,8 +49,12 @@ export interface GridFilterApi {
      */
     setFilterModel: (model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void;
     /**
-     * Set the quick filter values ot the one given by `values`
+     * Set the quick filter values to the one given by `values`
      * @param {any[]} values The list of element to quick filter
      */
     setQuickFilterValues: (values: any[]) => void;
+    /**
+     * Returns the value of the `ignoreDiacritics` prop.
+     */
+    ignoreDiacritics: DataGridProcessedProps['ignoreDiacritics'];
 }

package/models/api/gridLocaleTextApi.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ComponentsPropsList } from '@mui/material/styles';
+import { GridColDef } from '../colDef';
 /**
  * Set the types of the texts in the grid.
  */
@@ -88,8 +89,8 @@ export interface GridLocaleText {
     columnMenuFilter: React.ReactNode;
     columnMenuHideColumn: React.ReactNode;
     columnMenuUnsort: React.ReactNode;
-    columnMenuSortAsc: React.ReactNode;
-    columnMenuSortDesc: React.ReactNode;
+    columnMenuSortAsc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode);
+    columnMenuSortDesc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode);
     columnHeaderFiltersTooltipActive: (count: number) => React.ReactNode;
     columnHeaderFiltersLabel: string;
     columnHeaderSortIconLabel: string;

package/models/props/DataGridProps.d.ts

@@ -235,6 +235,12 @@ export interface DataGridPropsWithDefaultValues {
      * @default false
      */
     hideFooterSelectedRowCount: boolean;
+    /**
+     * 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: boolean;
     /**
      * If `true`, the selection model will retain selected rows that do not exist.
      * Useful when using server side pagination and row selections need to be retained

package/modern/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/modern/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/modern/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;
   };
 });