[data grid] Add a default valueParser and valueFormatter to singleSelect columns

[joserodolfofreitas]

Summary

Add a default valueParser valueFormatter to singleSelect columns

Motivation

DX: To avoid duplicate code in cell editing, filtering and quick filtering

[m4theushw]

The following line could be moved to a valueParser.

mui-x/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx

Line 108 in 9d6bd23

const formattedTargetValue = getValueFromValueOptions(target.value, valueOptionsFormatted);

[m4theushw]

The idea of this breaking change came from https://github.com/mui/mui-x/pull/4317/files#r843910779. The problem that justifies adding the value formatter is the following. First we added the singleSelect column type supporting valueOptions as a list of simple values, e.g.

{
  type: 'singleSelect',
  valueOptions: ['Brazil', 'France', 'Spain']
}

as well as a list of objects, e.g.

{
  type: 'singleSelect',
  valueOptions: [
    { value: 'br', label: 'Brazil' },
    { value: 'fr', label: 'France' },
    { value: 'es', label: 'Spain' },
  ]
}

When a list of object is provided as valueOptions, the label is used inside the menu but, once the dropdown is closed, the user sees value.

To make singleSelect usable, developers had to provide their own cell renderer or value formatter. Later, the quick filtering was implemented and it had a built-in logic for this column type where it checked not only value but also the label. Basically, it implemented a kind of value formatter in

mui-x/packages/grid/x-data-grid/src/colDef/gridSingleSelectOperators.ts

Lines 31 to 54 in a6c96b3

	if (iterableColumnValues) {
	iterableColumnValues.forEach((option) => {
	// for each valueOption, check if the formatted value
	let optionValue;
	let optionLabel;
	if (typeof option === 'object') {
	optionValue = option.value;
	optionLabel = option.label;
	} else {
	optionValue = option;
	if (valueFormatter) {
	optionLabel = valueFormatter({ value: option, field, api: apiRef.current });
	} else {
	optionLabel = option;
	}
	}
	if (optionLabel.slice(0, value.length).toLowerCase() === value.toLowerCase()) {
	if (!potentialValues.includes(optionValue)) {
	potentialValues.push(optionValue.toString());
	}
	}
	});
	}

This logic wouldn't be needed if we had added a default value formatter to singleSelect to convert br to Brazil by looking at the options provided. By doing so, the quick filter would only have to compare against the formatted value:

diff --git a/packages/grid/x-data-grid/src/colDef/gridSingleSelectOperators.ts b/packages/grid/x-data-grid/src/colDef/gridSingleSelectOperators.ts
index c550564ea..88f815a85 100644
--- a/packages/grid/x-data-grid/src/colDef/gridSingleSelectOperators.ts
+++ b/packages/grid/x-data-grid/src/colDef/gridSingleSelectOperators.ts
@@ -13,50 +13,14 @@ const parseObjectValue = (value: GridFilterItem) => {
   return value.value;
 };
 
-export const getGridSingleSelectQuickFilterFn = (
-  value: any,
-  column: GridColDef,
-  apiRef: React.MutableRefObject<GridApiCommunity>,
-) => {
-  if (!value) {
+export const getGridSingleSelectQuickFilterFn = (quickFilterValue: any) => {
+  if (!quickFilterValue) {
     return null;
   }
-  const { valueOptions, valueFormatter, field } = column;
 
-  const potentialValues = [parseObjectValue(value).toString()];
-
-  const iterableColumnValues =
-    typeof valueOptions === 'function' ? valueOptions({ field }) : valueOptions || [];
-
-  if (iterableColumnValues) {
-    iterableColumnValues.forEach((option) => {
-      // for each valueOption, check if the formatted value
-      let optionValue;
-      let optionLabel;
-      if (typeof option === 'object') {
-        optionValue = option.value;
-        optionLabel = option.label;
-      } else {
-        optionValue = option;
-        if (valueFormatter) {
-          optionLabel = valueFormatter({ value: option, field, api: apiRef.current });
-        } else {
-          optionLabel = option;
-        }
-      }
-
-      if (optionLabel.slice(0, value.length).toLowerCase() === value.toLowerCase()) {
-        if (!potentialValues.includes(optionValue)) {
-          potentialValues.push(optionValue.toString());
-        }
-      }
-    });
-  }
-
-  return ({ value: columnValue }: GridCellParams): boolean => {
-    return columnValue != null
-      ? potentialValues.includes(parseObjectValue(columnValue).toString())
-      : false;
+  return ({ value, formattedValue }: GridCellParams): boolean => {
+    const valueToTest = formattedValue == null ? value : formattedValue;
+    return valueToTest.toLowerCase() === quickFilterValue.toLowerCase();
   };
 };

At that time, adding a default value formatter was not allowed because it would be a breaking change. Maybe some user preferred to select Brazil but see br.

About the value parser, I think it was a typo from @alexfauquette because he mentions "value parser" in https://github.com/mui/mui-x/pull/4317/files#r843616217 but later he gives an example with value formatter. However, we do can also add a value parser because the logic from #5615 (comment) is the same in

mui-x/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx

Line 68 in a6c96b3

value = getValueFromValueOptions(value, currentValueOptions);

and valueParser was designed to be called both for edit components and filter components. The value parser to be added only needs to act when the native select is used. Its job is to receive the value selected by the user (always as a string) and return the value in valueOptions with the correct type.