[DataGrid] Allows to customize variant of value input in filter panel

[alexfauquette]

Fix #4822

The idea for know is to pass customization props to the filter input

Special case for Autocomplet input for which TextFields are not the root component

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	260.7	466	395.4	380.98	74.201
Sort 100k rows	ms	481	869.8	794.6	722.98	151.445
Select 100k rows	ms	122.2	224.5	165.6	168.86	35.259
Deselect 100k rows	ms	99.5	195.2	178.8	152.86	32.944

Generated by 🚫 dangerJS against 9f56639

[m4theushw]

In theory, this could also be a breaking change. If the input component spreads the rest of the props to the root element, receiving an unexpected prop will cause a console error. What do you think of adding InputComponentProps and spreading it here? In v6, we kill valueInputProps and the FormControl surrounding it.

Instead of

<GridFilterPanel
  filterFormProps={{
    valueInputProps: { variant: 'outlined' },
  }}
/>

users will do

<GridFilterPanel
  filterFormProps={{
    InputComponentProps: { variant: 'outlined' },
  }}
/>

[alexfauquette]

👍That was another option I had in mind

About the naming, what do you think of TextFieldProps instead of InputComponentProps to be more specific?

[m4theushw]

We can't know if the input component is a text field or not, it could be anything. The filter operator already has InputComponentProps. I was considering this name for consistency.

[alexfauquette]

But variant is not part of the InputComponentProps.
The InputComponent will be a FilledInput, OutlinedInput or Input component depending on the variant prop value

[m4theushw]

My idea was to allow any prop in InputComponentProps, not restricting to only those from the text field variants. It's the role of the current input component to use the variant received.

As example, the input component of the operators of a singleSelect column is not a TextField, but an Autocomplete. We need to forward the prop to the element that can use it.

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
index e757992be..d3fa254ca 100644
--- a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
@@ -24,7 +24,7 @@ const isOptionEqualToValue: GridFilterInputMultipleSingleSelectProps['isOptionEq
 const filter = createFilterOptions<any>();
 
 function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps) {
-  const { item, applyValue, type, apiRef, focusElementRef, ...other } = props;
+  const { item, applyValue, type, apiRef, focusElementRef, variant = 'standard', ...other } = props;
   const id = useId();
 
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
@@ -118,7 +118,7 @@ function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingl
           }}
           inputRef={focusElementRef}
           type={'singleSelect'}
-          variant="standard"
+          variant={variant}
         />
       )}
       {...other}

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[cherniavskii]

I wonder if we can reflect FilterFormValueInput > currentOperator.InputComponent hierarchy in here?
I would expect something like this:

filterFormProps: {
  valueInputProps: {
    // will be passed to `FilterFormValueInput`
    // ...
    
    InputComponentProps: {
      // will be passed to `currentOperator.InputComponent`
    }
  }
}

Especially since InputComponentProps are only passed to value input, not to other inputs

[alexfauquette]

done

[cherniavskii]

Can we type it better?

import type { GridApiCommon } from '../../../models/api/gridApiCommon';
import type { GridApiCommunity } from '../../../models/api/gridApiCommunity';

export type GridFilterInputValueProps<Api extends GridApiCommon = GridApiCommunity> = {
  // ...
  apiRef: React.MutableRefObject<Api>;

Maybe something like this?
The Api is optional, so no need for GridFilterInputValueProps<any> in other places
What do you think?

[alexfauquette]

If I get it correctly:

• Api will includes all the properties of GridApiCommon
• By default we set it to GridApiCommunity
• It can be override by writing for example GridFilterInputValueProps<GridApiPro>

[cherniavskii]

Correct

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[cherniavskii]

Is GridApiCommon necessary here?

[alexfauquette]

effectively it's not

[m4theushw]

We never used "propagated", but "other" is already being used. Maybe prefix it.

Suggested change

	const { InputComponentProps, ...propagatedValueInputProps } = valueInputProps;
	const { InputComponentProps, ...valueInputPropsOther } = valueInputProps;