fix filter value in filter button tooltip

Author: Владимир Колесников

docs/pages/x/api/data-grid/grid-filter-operator.md

@@ -17,6 +17,7 @@ import { GridFilterOperator } from '@mui/x-data-grid';
 | Name                                                                                                  | Type                                                                                                                                                                                                                                               | Default                                | Description                                                                                                                                                                                 |
 | :---------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | <span class="prop-name">getApplyFilterFn</span>                                                       | <span class="prop-type">(filterItem: GridFilterItem, column: GridStateColDef&lt;R, V, F&gt;) =&gt; null \| ((params: GridCellParams&lt;V, R, F&gt;) =&gt; boolean)</span>                                                                          |                                        | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column.                       |
+| <span class="prop-name optional">getValueAsString<sup><abbr title="optional">?</abbr></sup></span>    | <span class="prop-type">(value: GridFilterItem['value']) =&gt; string</span>                                                                                                                                                                       |                                        | Converts the value of a filter item to a human-readable form.                                                                                                                               |
 | <span class="prop-name optional">InputComponent<sup><abbr title="optional">?</abbr></sup></span>      | <span class="prop-type">React.JSXElementConstructor&lt;GridFilterInputValueProps&gt; \| React.JSXElementConstructor&lt;GridFilterInputMultipleValueProps&gt; \| React.JSXElementConstructor&lt;GridFilterInputMultipleSingleSelectProps&gt;</span> |                                        | The input component to render in the filter panel for this filter operator.                                                                                                                 |
 | <span class="prop-name optional">InputComponentProps<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">Record&lt;string, any&gt;</span>                                                                                                                                                                                           |                                        | The props to pass to the input component in the filter panel for this filter operator.                                                                                                      |
 | <span class="prop-name optional">label<sup><abbr title="optional">?</abbr></sup></span>               | <span class="prop-type">string</span>                                                                                                                                                                                                              |                                        | The label of the filter operator.                                                                                                                                                           |

packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx

@@ -78,6 +78,14 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
           .getLocaleText(`filterOperator${capitalize(item.operatorValue!)}` as GridTranslationKeys)!
           .toString();
 
+      const getFilterItemValue = (item: GridFilterItem): string => {
+        const { getValueAsString } = lookup[item.columnField!].filterOperators!.find(
+          (operator) => operator.value === item.operatorValue,
+        )!;
+
+        return getValueAsString ? getValueAsString(item.value) : item.value;
+      };
+
       return (
         <div>
           {apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length)}
@@ -87,7 +95,7 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
                 <li key={index}>
                   {`${lookup[item.columnField!].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value ?? ''}`}
+                  ${item.value ? getFilterItemValue(item.value) : ''}`}
                 </li>
               )),
             }))}

packages/grid/x-data-grid/src/models/gridFilterOperator.ts

@@ -42,6 +42,12 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
    * The props to pass to the input component in the filter panel for this filter operator.
    */
   InputComponentProps?: Record<string, any>;
+  /**
+   * Converts the value of a filter item to a human-readable form.
+   * @param {GridFilterItem['value']} value The filter item value.
+   * @returns {string} The value formatted to be displayed in the UI.
+   */
+  getValueAsString?: (value: GridFilterItem['value']) => string;
   /**
    * If `false`, filter operator doesn't require user-entered value to work.
    * Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`)