From e6c629e2337131be447bb06245ecf29df973e483 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Mon, 9 Dec 2024 15:40:02 +0000
Subject: [PATCH 01/16] change header filter variant and update styling

---
 .../headerFiltering/GridHeaderFilterCell.tsx       | 13 +++++++++----
 .../GridHeaderFilterClearButton.tsx                |  9 ++++++---
 .../GridHeaderFilterMenuContainer.tsx              |  4 +---
 .../panel/filterPanel/GridFilterInputBoolean.tsx   | 14 ++------------
 .../filterPanel/GridFilterInputSingleSelect.tsx    | 14 ++------------
 .../panel/filterPanel/GridFilterInputValue.tsx     | 12 ++++++++----
 6 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index bd8aca4630ed1..83c028401a380 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -88,9 +88,9 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const dateSx = {
-  [`& input[value=""]:not(:focus)`]: { color: 'transparent' },
-};
+const inputSx = { flex: 1, mr: 0.5 };
+const dateSx = { [`& input[value=""]:not(:focus)`]: { color: 'transparent' } };
+
 const defaultInputComponents: { [key in GridColType]: React.JSXElementConstructor<any> | null } = {
   string: GridFilterInputValue,
   number: GridFilterInputValue,
@@ -374,10 +374,15 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
                   />
                 ) : null
               }
+              variant="outlined"
+              size="small"
               disabled={isFilterReadOnly || isNoInputOperator}
               tabIndex={-1}
               InputLabelProps={null}
-              sx={colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined}
+              sx={[
+                inputSx,
+                colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined,
+              ]}
               {...(isNoInputOperator ? { value: '' } : {})}
               {...currentOperator?.InputComponentProps}
               {...InputComponentProps}
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
index 1c4ad36c7c588..3ab17406a9c50 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { IconButtonProps } from '@mui/material/IconButton';
+import { inputBaseClasses } from '@mui/material/InputBase';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 interface GridHeaderFilterClearIconProps extends IconButtonProps {}
 
-const sx = { padding: '2px' };
-
 function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
   const rootProps = useGridRootProps();
   return (
@@ -13,7 +12,11 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      sx={sx}
+      sx={{
+        [`.${inputBaseClasses.root} &`]: {
+          mx: -0.5,
+        },
+      }}
       {...props}
       {...rootProps.slotProps?.baseIconButton}
     >
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
index a09f307355e91..5c7dc5cab2aaf 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
@@ -12,9 +12,7 @@ import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 const sx = {
-  width: 22,
-  height: 22,
-  margin: 'auto 0 10px 5px',
+  marginRight: -0.75,
 };
 
 function GridHeaderFilterMenuContainer(props: {
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
index c0f6ae6818ddf..87a4ceddedeab 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { refType, unstable_useId as useId } from '@mui/utils';
-import { styled } from '@mui/material/styles';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
@@ -26,15 +25,6 @@ export const sanitizeFilterItemValue = (value: any): boolean | undefined => {
   return undefined;
 };
 
-const BooleanOperatorContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px',
-  },
-});
-
 function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
   const {
     item,
@@ -79,7 +69,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
 
   return (
-    <BooleanOperatorContainer>
+    <React.Fragment>
       <rootProps.slots.baseFormControl fullWidth>
         <rootProps.slots.baseInputLabel
           {...rootProps.slotProps?.baseInputLabel}
@@ -129,7 +119,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
         </rootProps.slots.baseSelect>
       </rootProps.slots.baseFormControl>
       {clearButton}
-    </BooleanOperatorContainer>
+    </React.Fragment>
   );
 }
 
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index d88468fb9cd1b..e5c827b14a7a6 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { SelectChangeEvent } from '@mui/material/Select';
 import { unstable_useId as useId } from '@mui/utils';
-import { styled } from '@mui/material/styles';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
@@ -46,15 +45,6 @@ const renderSingleSelectOptions = ({
   });
 };
 
-const SingleSelectOperatorContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'flex-end',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px',
-  },
-});
-
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
   TextFieldProps & {
     clearButton?: React.ReactNode | null;
@@ -122,7 +112,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
 
   return (
-    <SingleSelectOperatorContainer>
+    <React.Fragment>
       <rootProps.slots.baseFormControl fullWidth>
         <rootProps.slots.baseInputLabel
           {...rootProps.slotProps?.baseInputLabel}
@@ -164,7 +154,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
         </rootProps.slots.baseSelect>
       </rootProps.slots.baseFormControl>
       {clearButton}
-    </SingleSelectOperatorContainer>
+    </React.Fragment>
   );
 }
 
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
index 4391eed4166d3..f00ebcfb5f43a 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -79,10 +79,14 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
       InputProps={{
         ...(applying || clearButton
           ? {
-              endAdornment: applying ? (
-                <rootProps.slots.loadIcon fontSize="small" color="action" />
-              ) : (
-                clearButton
+              endAdornment: (
+                <rootProps.slots.baseInputAdornment position="end">
+                  {applying ? (
+                    <rootProps.slots.loadIcon fontSize="small" color="action" />
+                  ) : (
+                    clearButton
+                  )}
+                </rootProps.slots.baseInputAdornment>
               ),
             }
           : {}),

From 73bcdde964462e66530b5a38365fff88063133a6 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Wed, 11 Dec 2024 17:10:35 +0000
Subject: [PATCH 02/16] small inputs

---
 .../headerFiltering/GridHeaderFilterCell.tsx  | 133 ++++++++++--------
 .../GridHeaderFilterClearButton.tsx           |   7 +-
 .../GridHeaderFilterMenuContainer.tsx         |   8 +-
 .../filterPanel/GridFilterInputBoolean.tsx    |   2 +
 .../GridFilterInputSingleSelect.tsx           |  92 ++++++------
 5 files changed, 131 insertions(+), 111 deletions(-)

diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 83c028401a380..b3074742dafc7 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -33,6 +33,7 @@ import {
   shouldCellShowLeftBorder,
   shouldCellShowRightBorder,
 } from '@mui/x-data-grid/internals';
+import { SxProps } from '@mui/system';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProProcessedProps } from '../../models/dataGridProProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
@@ -88,8 +89,14 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const inputSx = { flex: 1, mr: 0.5 };
-const dateSx = { [`& input[value=""]:not(:focus)`]: { color: 'transparent' } };
+const inputSx: SxProps = {
+  flex: 1,
+  '.MuiOutlinedInput-root': { px: 1.25 },
+  '.MuiOutlinedInput-input': { fontSize: 14 },
+  '.MuiInputLabel-outlined': { transform: 'translate(12px, -9px) scale(0.75)' },
+  '.MuiOutlinedInput-notchedOutline': { px: 0.75 },
+};
+const dateSx: SxProps = { [`& input[value=""]:not(:focus)`]: { color: 'transparent' } };
 
 const defaultInputComponents: { [key in GridColType]: React.JSXElementConstructor<any> | null } = {
   string: GridFilterInputValue,
@@ -331,6 +338,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
         style={{
           height,
           width,
+          paddingTop: 4,
           ...styleProp,
         }}
         role="columnheader"
@@ -341,62 +349,75 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
       >
         {headerFilterComponent}
         {InputComponent && headerFilterComponent === undefined ? (
-          <React.Fragment>
-            <InputComponent
-              apiRef={apiRef}
-              item={item}
-              inputRef={inputRef}
-              applyValue={applyFilterChanges}
-              onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}
-              onBlur={(event: React.FocusEvent) => {
-                apiRef.current.stopHeaderFilterEditMode();
-                // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
-                if (!event.relatedTarget?.className.includes('columnHeader')) {
-                  apiRef.current.setState((state) => ({
-                    ...state,
-                    focus: {
-                      cell: null,
-                      columnHeader: null,
-                      columnHeaderFilter: null,
-                      columnGroupHeader: null,
-                    },
-                  }));
-                }
-              }}
-              label={capitalize(label)}
-              placeholder=""
-              isFilterActive={isFilterActive}
-              clearButton={
-                showClearIcon && isApplied ? (
-                  <GridHeaderFilterClearButton
-                    onClick={clearFilterItem}
+          <InputComponent
+            apiRef={apiRef}
+            item={item}
+            inputRef={inputRef}
+            applyValue={applyFilterChanges}
+            onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}
+            onBlur={(event: React.FocusEvent) => {
+              apiRef.current.stopHeaderFilterEditMode();
+              // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
+              if (!event.relatedTarget?.className.includes('columnHeader')) {
+                apiRef.current.setState((state) => ({
+                  ...state,
+                  focus: {
+                    cell: null,
+                    columnHeader: null,
+                    columnHeaderFilter: null,
+                    columnGroupHeader: null,
+                  },
+                }));
+              }
+            }}
+            label={capitalize(label)}
+            placeholder=""
+            isFilterActive={isFilterActive}
+            variant="outlined"
+            size="small"
+            disabled={isFilterReadOnly || isNoInputOperator}
+            tabIndex={-1}
+            InputLabelProps={null}
+            InputProps={{
+              startAdornment: (
+                <rootProps.slots.baseInputAdornment position="start">
+                  <GridHeaderFilterMenuContainer
+                    operators={filterOperators!}
+                    item={item}
+                    field={colDef.field}
                     disabled={isFilterReadOnly}
+                    applyFilterChanges={applyFilterChanges}
+                    headerFilterMenuRef={headerFilterMenuRef}
+                    buttonRef={buttonRef}
                   />
-                ) : null
-              }
-              variant="outlined"
-              size="small"
-              disabled={isFilterReadOnly || isNoInputOperator}
-              tabIndex={-1}
-              InputLabelProps={null}
-              sx={[
-                inputSx,
-                colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined,
-              ]}
-              {...(isNoInputOperator ? { value: '' } : {})}
-              {...currentOperator?.InputComponentProps}
-              {...InputComponentProps}
-            />
-            <GridHeaderFilterMenuContainer
-              operators={filterOperators!}
-              item={item}
-              field={colDef.field}
-              disabled={isFilterReadOnly}
-              applyFilterChanges={applyFilterChanges}
-              headerFilterMenuRef={headerFilterMenuRef}
-              buttonRef={buttonRef}
-            />
-          </React.Fragment>
+                </rootProps.slots.baseInputAdornment>
+              ),
+              endAdornment:
+                showClearIcon && isApplied ? (
+                  <rootProps.slots.baseInputAdornment position="end">
+                    <GridHeaderFilterClearButton
+                      onClick={clearFilterItem}
+                      disabled={isFilterReadOnly}
+                    />
+                  </rootProps.slots.baseInputAdornment>
+                ) : null,
+            }}
+            sx={[
+              inputSx,
+              colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined,
+            ]}
+            clearButton={
+              showClearIcon && isApplied ? (
+                <GridHeaderFilterClearButton
+                  onClick={clearFilterItem}
+                  disabled={isFilterReadOnly}
+                />
+              ) : null
+            }
+            {...(isNoInputOperator ? { value: '' } : {})}
+            {...currentOperator?.InputComponentProps}
+            {...InputComponentProps}
+          />
         ) : null}
       </div>
     );
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
index 3ab17406a9c50..4ee23436fd039 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { IconButtonProps } from '@mui/material/IconButton';
-import { inputBaseClasses } from '@mui/material/InputBase';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 interface GridHeaderFilterClearIconProps extends IconButtonProps {}
@@ -12,11 +11,7 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      sx={{
-        [`.${inputBaseClasses.root} &`]: {
-          mx: -0.5,
-        },
-      }}
+      edge="end"
       {...props}
       {...rootProps.slotProps?.baseIconButton}
     >
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
index 5c7dc5cab2aaf..38e080bdab3c3 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
@@ -11,10 +11,6 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-const sx = {
-  marginRight: -0.75,
-};
-
 function GridHeaderFilterMenuContainer(props: {
   operators: GridFilterOperator<any, any, any>[];
   field: GridColDef['field'];
@@ -66,12 +62,12 @@ function GridHeaderFilterMenuContainer(props: {
         aria-haspopup="true"
         tabIndex={-1}
         size="small"
+        edge="start"
         onClick={handleClick}
-        sx={sx}
         disabled={disabled}
         {...rootProps.slotProps?.baseIconButton}
       >
-        <rootProps.slots.openFilterButtonIcon fontSize="small" />
+        <rootProps.slots.openFilterButtonIcon fontSize="inherit" />
       </rootProps.slots.baseIconButton>
       <rootProps.slots.headerFilterMenu
         field={field}
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
index 87a4ceddedeab..97fad9342d04d 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -89,6 +89,8 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           notched={variant === 'outlined' ? true : undefined}
           native={isSelectNative}
           displayEmpty
+          startAdornment={others.InputProps?.startAdornment}
+          endAdornment={others.InputProps?.endAdornment}
           inputProps={{ ref: focusElementRef, tabIndex }}
           {
             ...(others as any) /* FIXME: typing error */
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index e5c827b14a7a6..f667bea25f301 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -112,49 +112,55 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
 
   return (
-    <React.Fragment>
-      <rootProps.slots.baseFormControl fullWidth>
-        <rootProps.slots.baseInputLabel
-          {...rootProps.slotProps?.baseInputLabel}
-          id={labelId}
-          htmlFor={id}
-          shrink
-          variant={variant}
-        >
-          {label}
-        </rootProps.slots.baseInputLabel>
-        <rootProps.slots.baseSelect
-          id={id}
-          label={label}
-          labelId={labelId}
-          value={filterValue}
-          onChange={onFilterChange}
-          variant={variant}
-          type={type || 'text'}
-          inputProps={{
-            tabIndex,
-            ref: focusElementRef,
-            placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-          }}
-          native={isSelectNative}
-          notched={variant === 'outlined' ? true : undefined}
-          {
-            ...(others as any) /* FIXME: typing error */
-          }
-          {...rootProps.slotProps?.baseSelect}
-        >
-          {renderSingleSelectOptions({
-            column: resolvedColumn,
-            OptionComponent: rootProps.slots.baseSelectOption,
-            getOptionLabel,
-            getOptionValue,
-            isSelectNative,
-            baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
-          })}
-        </rootProps.slots.baseSelect>
-      </rootProps.slots.baseFormControl>
-      {clearButton}
-    </React.Fragment>
+    <rootProps.slots.baseFormControl fullWidth sx={others.sx}>
+      <rootProps.slots.baseInputLabel
+        {...rootProps.slotProps?.baseInputLabel}
+        id={labelId}
+        htmlFor={id}
+        shrink
+        variant={variant}
+      >
+        {label}
+      </rootProps.slots.baseInputLabel>
+      <rootProps.slots.baseSelect
+        id={id}
+        label={label}
+        labelId={labelId}
+        value={filterValue}
+        onChange={onFilterChange}
+        variant={variant}
+        type={type || 'text'}
+        startAdornment={others.InputProps?.startAdornment}
+        endAdornment={
+          <rootProps.slots.baseInputAdornment
+            position="end"
+            sx={{ position: 'absolute', right: 32 }}
+          >
+            {clearButton}
+          </rootProps.slots.baseInputAdornment>
+        }
+        inputProps={{
+          tabIndex,
+          ref: focusElementRef,
+          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+        }}
+        native={isSelectNative}
+        notched={variant === 'outlined' ? true : undefined}
+        {
+          ...(others as any) /* FIXME: typing error */
+        }
+        {...rootProps.slotProps?.baseSelect}
+      >
+        {renderSingleSelectOptions({
+          column: resolvedColumn,
+          OptionComponent: rootProps.slots.baseSelectOption,
+          getOptionLabel,
+          getOptionValue,
+          isSelectNative,
+          baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
+        })}
+      </rootProps.slots.baseSelect>
+    </rootProps.slots.baseFormControl>
   );
 }
 

From ebea8b3c80f5a7445cfb4a2004b45007a46d2cd6 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Mon, 23 Dec 2024 15:59:14 +0000
Subject: [PATCH 03/16] update clear button design

---
 .../CustomHeaderFilterOperatorDataGridPro.tsx |  29 ++--
 .../CustomHeaderFilterSingleDataGridPro.tsx   |   7 +-
 docs/data/data-grid/localization/data.json    | 140 +++++++++---------
 .../x/api/data-grid/data-grid-premium.json    |   6 +
 docs/pages/x/api/data-grid/data-grid-pro.json |   6 +
 docs/pages/x/api/data-grid/data-grid.json     |   6 +
 .../data-grid-premium/data-grid-premium.json  |   1 +
 .../data-grid-pro/data-grid-pro.json          |   1 +
 .../data-grid/data-grid/data-grid.json        |   1 +
 .../headerFiltering/GridHeaderFilterCell.tsx  |  54 +++----
 .../GridHeaderFilterClearButton.tsx           |   4 +-
 .../headerFiltering/GridHeaderFilterMenu.tsx  |  32 +++-
 .../GridHeaderFilterMenuContainer.tsx         |  14 +-
 .../filterPanel/GridFilterInputBoolean.tsx    |   8 +-
 .../panel/filterPanel/GridFilterInputDate.tsx |  71 ++++-----
 .../GridFilterInputMultipleSingleSelect.tsx   |   2 +-
 .../GridFilterInputMultipleValue.tsx          |   2 +-
 .../GridFilterInputSingleSelect.tsx           |  98 ++++++------
 .../filterPanel/GridFilterInputValue.tsx      |  73 +++++----
 .../src/constants/localeTextConstants.ts      |   1 +
 packages/x-data-grid/src/locales/arSD.ts      |   1 +
 packages/x-data-grid/src/locales/beBY.ts      |   1 +
 packages/x-data-grid/src/locales/bgBG.ts      |   1 +
 packages/x-data-grid/src/locales/csCZ.ts      |   1 +
 packages/x-data-grid/src/locales/daDK.ts      |   1 +
 packages/x-data-grid/src/locales/deDE.ts      |   1 +
 packages/x-data-grid/src/locales/elGR.ts      |   1 +
 packages/x-data-grid/src/locales/esES.ts      |   1 +
 packages/x-data-grid/src/locales/faIR.ts      |   1 +
 packages/x-data-grid/src/locales/fiFI.ts      |   1 +
 packages/x-data-grid/src/locales/frFR.ts      |   1 +
 packages/x-data-grid/src/locales/heIL.ts      |   1 +
 packages/x-data-grid/src/locales/hrHR.ts      |   1 +
 packages/x-data-grid/src/locales/huHU.ts      |   1 +
 packages/x-data-grid/src/locales/isIS.ts      |   1 +
 packages/x-data-grid/src/locales/itIT.ts      |   1 +
 packages/x-data-grid/src/locales/jaJP.ts      |   1 +
 packages/x-data-grid/src/locales/koKR.ts      |   1 +
 packages/x-data-grid/src/locales/nbNO.ts      |   1 +
 packages/x-data-grid/src/locales/nlNL.ts      |   1 +
 packages/x-data-grid/src/locales/nnNO.ts      |   1 +
 packages/x-data-grid/src/locales/plPL.ts      |   1 +
 packages/x-data-grid/src/locales/ptBR.ts      |   1 +
 packages/x-data-grid/src/locales/ptPT.ts      |   1 +
 packages/x-data-grid/src/locales/roRO.ts      |   1 +
 packages/x-data-grid/src/locales/ruRU.ts      |   1 +
 packages/x-data-grid/src/locales/skSK.ts      |   1 +
 packages/x-data-grid/src/locales/svSE.ts      |   1 +
 packages/x-data-grid/src/locales/trTR.ts      |   1 +
 packages/x-data-grid/src/locales/ukUA.ts      |   1 +
 packages/x-data-grid/src/locales/urPK.ts      |   1 +
 packages/x-data-grid/src/locales/viVN.ts      |   1 +
 packages/x-data-grid/src/locales/zhCN.ts      |   1 +
 packages/x-data-grid/src/locales/zhHK.ts      |   1 +
 packages/x-data-grid/src/locales/zhTW.ts      |   1 +
 packages/x-data-grid/src/material/index.tsx   |   1 +
 .../src/models/api/gridLocaleTextApi.ts       |   1 +
 .../src/models/gridIconSlotsComponent.ts      |   5 +
 58 files changed, 339 insertions(+), 259 deletions(-)

diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
index 0276f0e9e4299..9725cf6185bc6 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
@@ -32,28 +32,17 @@ function RatingInputValue(
   };
 
   return (
-    <React.Fragment>
+    <Box sx={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+      <Rating
+        name="custom-rating-filter-operator"
+        value={Number(item.value)}
+        onChange={handleFilterChange}
+        precision={0.5}
+        ref={ratingRef}
+      />
       {headerFilterMenu}
-      <Box
-        sx={{
-          display: 'inline-flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          height: '100%',
-          pl: '10px',
-          bl: '1px solid lightgrey',
-        }}
-      >
-        <Rating
-          name="custom-rating-filter-operator"
-          value={Number(item.value)}
-          onChange={handleFilterChange}
-          precision={0.5}
-          ref={ratingRef}
-        />
-      </Box>
       {clearButton}
-    </React.Fragment>
+    </Box>
   );
 }
 
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
index ecd9ccf8be2a1..0cdf6f9fe6e36 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
@@ -43,7 +43,12 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
   const label = !value ? 'Filter' : 'Is admin';
 
   return (
-    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
+    <FormControl
+      variant="outlined"
+      size="small"
+      sx={{ '.MuiOutlinedInput-input': { fontSize: 14 } }}
+      fullWidth
+    >
       <InputLabel id="select-is-admin-label">{label}</InputLabel>
       <Select
         labelId="select-is-admin-label"
diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json
index ebda6d194b985..e58aaf888f74e 100644
--- a/docs/data/data-grid/localization/data.json
+++ b/docs/data/data-grid/localization/data.json
@@ -3,280 +3,280 @@
     "languageTag": "ar-SD",
     "importName": "arSD",
     "localeName": "Arabic (Sudan)",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/arSD.ts"
   },
   {
     "languageTag": "be-BY",
     "importName": "beBY",
     "localeName": "Belarusian",
-    "missingKeysCount": 44,
-    "totalKeysCount": 132,
+    "missingKeysCount": 45,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/beBY.ts"
   },
   {
     "languageTag": "bg-BG",
     "importName": "bgBG",
     "localeName": "Bulgarian",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/bgBG.ts"
   },
   {
     "languageTag": "zh-HK",
     "importName": "zhHK",
     "localeName": "Chinese (Hong Kong)",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhHK.ts"
   },
   {
     "languageTag": "zh-CN",
     "importName": "zhCN",
     "localeName": "Chinese (Simplified)",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhCN.ts"
   },
   {
     "languageTag": "zh-TW",
     "importName": "zhTW",
     "localeName": "Chinese (Taiwan)",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhTW.ts"
   },
   {
     "languageTag": "hr-HR",
     "importName": "hrHR",
     "localeName": "Croatian",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/hrHR.ts"
   },
   {
     "languageTag": "cs-CZ",
     "importName": "csCZ",
     "localeName": "Czech",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/csCZ.ts"
   },
   {
     "languageTag": "da-DK",
     "importName": "daDK",
     "localeName": "Danish",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts"
   },
   {
     "languageTag": "nl-NL",
     "importName": "nlNL",
     "localeName": "Dutch",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nlNL.ts"
   },
   {
     "languageTag": "fi-FI",
     "importName": "fiFI",
     "localeName": "Finnish",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/fiFI.ts"
   },
   {
     "languageTag": "fr-FR",
     "importName": "frFR",
     "localeName": "French",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/frFR.ts"
   },
   {
     "languageTag": "de-DE",
     "importName": "deDE",
     "localeName": "German",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/deDE.ts"
   },
   {
     "languageTag": "el-GR",
     "importName": "elGR",
     "localeName": "Greek",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/elGR.ts"
   },
   {
     "languageTag": "he-IL",
     "importName": "heIL",
     "localeName": "Hebrew",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/heIL.ts"
   },
   {
     "languageTag": "hu-HU",
     "importName": "huHU",
     "localeName": "Hungarian",
-    "missingKeysCount": 16,
-    "totalKeysCount": 132,
+    "missingKeysCount": 17,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/huHU.ts"
   },
   {
     "languageTag": "is-IS",
     "importName": "isIS",
     "localeName": "Icelandic",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/isIS.ts"
   },
   {
     "languageTag": "it-IT",
     "importName": "itIT",
     "localeName": "Italian",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts"
   },
   {
     "languageTag": "ja-JP",
     "importName": "jaJP",
     "localeName": "Japanese",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/jaJP.ts"
   },
   {
     "languageTag": "ko-KR",
     "importName": "koKR",
     "localeName": "Korean",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/koKR.ts"
   },
   {
     "languageTag": "nb-NO",
     "importName": "nbNO",
     "localeName": "Norwegian (Bokmål)",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nbNO.ts"
   },
   {
     "languageTag": "nn-NO",
     "importName": "nnNO",
     "localeName": "Norwegian (Nynorsk)",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nnNO.ts"
   },
   {
     "languageTag": "fa-IR",
     "importName": "faIR",
     "localeName": "Persian",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/faIR.ts"
   },
   {
     "languageTag": "pl-PL",
     "importName": "plPL",
     "localeName": "Polish",
-    "missingKeysCount": 21,
-    "totalKeysCount": 132,
+    "missingKeysCount": 22,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/plPL.ts"
   },
   {
     "languageTag": "pt-PT",
     "importName": "ptPT",
     "localeName": "Portuguese",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptPT.ts"
   },
   {
     "languageTag": "pt-BR",
     "importName": "ptBR",
     "localeName": "Portuguese (Brazil)",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts"
   },
   {
     "languageTag": "ro-RO",
     "importName": "roRO",
     "localeName": "Romanian",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/roRO.ts"
   },
   {
     "languageTag": "ru-RU",
     "importName": "ruRU",
     "localeName": "Russian",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ruRU.ts"
   },
   {
     "languageTag": "sk-SK",
     "importName": "skSK",
     "localeName": "Slovak",
-    "missingKeysCount": 15,
-    "totalKeysCount": 132,
+    "missingKeysCount": 16,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/skSK.ts"
   },
   {
     "languageTag": "es-ES",
     "importName": "esES",
     "localeName": "Spanish",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/esES.ts"
   },
   {
     "languageTag": "sv-SE",
     "importName": "svSE",
     "localeName": "Swedish",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/svSE.ts"
   },
   {
     "languageTag": "tr-TR",
     "importName": "trTR",
     "localeName": "Turkish",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/trTR.ts"
   },
   {
     "languageTag": "uk-UA",
     "importName": "ukUA",
     "localeName": "Ukrainian",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ukUA.ts"
   },
   {
     "languageTag": "ur-PK",
     "importName": "urPK",
     "localeName": "Urdu (Pakistan)",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/urPK.ts"
   },
   {
     "languageTag": "vi-VN",
     "importName": "viVN",
     "localeName": "Vietnamese",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/viVN.ts"
   }
 ]
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 950b63871a3ce..756444b0f67ad 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -1104,6 +1104,12 @@
       "default": "GridDragIcon",
       "class": null
     },
+    {
+      "name": "menuItemCheckIcon",
+      "description": "Icon displayed to indicate that a menu item is selected.",
+      "default": "GridCheckIcon",
+      "class": null
+    },
     {
       "name": "columnMenuPinLeftIcon",
       "description": "Icon displayed in column menu for left pinning",
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
index 38b86de22a6be..9231e429d1931 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -1039,6 +1039,12 @@
       "default": "GridDragIcon",
       "class": null
     },
+    {
+      "name": "menuItemCheckIcon",
+      "description": "Icon displayed to indicate that a menu item is selected.",
+      "default": "GridCheckIcon",
+      "class": null
+    },
     {
       "name": "columnMenuPinLeftIcon",
       "description": "Icon displayed in column menu for left pinning",
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index d08f6d5092e94..731b221966423 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -924,6 +924,12 @@
       "description": "Icon displayed on the column reorder button.",
       "default": "GridDragIcon",
       "class": null
+    },
+    {
+      "name": "menuItemCheckIcon",
+      "description": "Icon displayed to indicate that a menu item is selected.",
+      "default": "GridCheckIcon",
+      "class": null
     }
   ],
   "classes": [
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index ea8da38d3b89e..00cc6725e792f 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -1324,6 +1324,7 @@
     "headerFilterMenu": "Component responsible for showing menu in Header filter row",
     "loadIcon": "Icon displayed on the input while processing.",
     "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",
+    "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.",
     "moreActionsIcon": "Icon displayed on the <code>actions</code> column type to open the menu.",
     "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.",
     "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 10eef41c40023..03532df297077 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -1259,6 +1259,7 @@
     "headerFilterMenu": "Component responsible for showing menu in Header filter row",
     "loadIcon": "Icon displayed on the input while processing.",
     "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",
+    "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.",
     "moreActionsIcon": "Icon displayed on the <code>actions</code> column type to open the menu.",
     "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.",
     "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.",
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 320e6b76fb458..d637e5645384a 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -1129,6 +1129,7 @@
     "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed",
     "loadIcon": "Icon displayed on the input while processing.",
     "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",
+    "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.",
     "moreActionsIcon": "Icon displayed on the <code>actions</code> column type to open the menu.",
     "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.",
     "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.",
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 0d579f738c450..f6d4a1c1b3648 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -92,10 +92,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
 
 const inputSx: SxProps = {
   flex: 1,
-  '.MuiOutlinedInput-root': { px: 1.25 },
   '.MuiOutlinedInput-input': { fontSize: 14 },
-  '.MuiInputLabel-outlined': { transform: 'translate(12px, -9px) scale(0.75)' },
-  '.MuiOutlinedInput-notchedOutline': { px: 0.75 },
 };
 const dateSx: SxProps = { [`& input[value=""]:not(:focus)`]: { color: 'transparent' } };
 
@@ -120,7 +117,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
     item,
     headerFilterMenuRef,
     InputComponentProps,
-    showClearIcon = true,
+    showClearIcon = false,
     pinnedPosition,
     style: styleProp,
     indexInSection,
@@ -319,16 +316,14 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
 
   const classes = useUtilityClasses(ownerState as OwnerState);
 
-  const isNoInputOperator = currentOperator.requiresFilterValue === false;
-
-  const isApplied = item?.value !== undefined || isNoInputOperator;
-
   const label =
     currentOperator.headerLabel ??
     apiRef.current.getLocaleText(
       `headerFilterOperator${capitalize(item.operator)}` as 'headerFilterOperatorContains',
     );
 
+  const isNoInputOperator = currentOperator.requiresFilterValue === false;
+  const isApplied = item?.value !== undefined || isNoInputOperator;
   const isFilterActive = isApplied || hasFocus;
 
   return (
@@ -376,32 +371,25 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
           size="small"
           disabled={isFilterReadOnly || isNoInputOperator}
           tabIndex={-1}
-          InputLabelProps={null}
-          InputProps={{
-            startAdornment: (
-              <rootProps.slots.baseInputAdornment position="start">
-                <GridHeaderFilterMenuContainer
-                  operators={filterOperators!}
-                  item={item}
-                  field={colDef.field}
-                  disabled={isFilterReadOnly}
-                  applyFilterChanges={applyFilterChanges}
-                  headerFilterMenuRef={headerFilterMenuRef}
-                  buttonRef={buttonRef}
-                />
-              </rootProps.slots.baseInputAdornment>
-            ),
-            endAdornment:
-              showClearIcon && isApplied ? (
-                <rootProps.slots.baseInputAdornment position="end">
-                  <GridHeaderFilterClearButton
-                    onClick={clearFilterItem}
-                    disabled={isFilterReadOnly}
-                  />
-                </rootProps.slots.baseInputAdornment>
-              ) : null,
-          }}
           sx={[inputSx, colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined]}
+          headerFilterMenu={
+            <GridHeaderFilterMenuContainer
+              operators={filterOperators!}
+              item={item}
+              field={colDef.field}
+              disabled={isFilterReadOnly}
+              applyFilterChanges={applyFilterChanges}
+              headerFilterMenuRef={headerFilterMenuRef}
+              buttonRef={buttonRef}
+              isApplied={isApplied}
+              clearFilterItem={clearFilterItem}
+            />
+          }
+          clearButton={
+            showClearIcon && isApplied ? (
+              <GridHeaderFilterClearButton onClick={clearFilterItem} disabled={isFilterReadOnly} />
+            ) : null
+          }
           {...(isNoInputOperator ? { value: '' } : {})}
           {...currentOperator?.InputComponentProps}
           {...InputComponentProps}
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
index 4ee23436fd039..5fd876632d8ef 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
@@ -11,9 +11,9 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      edge="end"
-      {...props}
+      sx={{ ml: 0.25 }}
       {...rootProps.slotProps?.baseIconButton}
+      {...props}
     >
       <rootProps.slots.columnMenuClearIcon fontSize="inherit" />
     </rootProps.slots.baseIconButton>
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
index c3fe31d4aea70..c9d10510eddd8 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
@@ -19,6 +19,8 @@ interface GridHeaderFilterMenuProps {
   id: string;
   labelledBy: string;
   target: HTMLElement | null;
+  isApplied: boolean;
+  clearFilterItem: () => void;
 }
 
 function GridHeaderFilterMenu({
@@ -30,6 +32,8 @@ function GridHeaderFilterMenu({
   item,
   id,
   labelledBy,
+  isApplied,
+  clearFilterItem,
 }: GridHeaderFilterMenuProps) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -61,7 +65,20 @@ function GridHeaderFilterMenu({
         id={id}
         onKeyDown={handleListKeyDown}
       >
-        {operators.map((op, i) => {
+        {isApplied && [
+          <rootProps.slots.baseMenuItem
+            key="filter-menu-clear-filter"
+            iconStart={<rootProps.slots.columnMenuClearIcon fontSize="small" />}
+            onClick={() => {
+              clearFilterItem();
+              hideMenu();
+            }}
+          >
+            {apiRef.current.getLocaleText('headerFilterClear')}
+          </rootProps.slots.baseMenuItem>,
+          <rootProps.slots.baseDivider key="filter-menu-divider" />,
+        ]}
+        {operators.map((op) => {
           const label =
             op?.headerLabel ??
             apiRef.current.getLocaleText(
@@ -70,13 +87,18 @@ function GridHeaderFilterMenu({
 
           return (
             <rootProps.slots.baseMenuItem
+              key={`${field}-${op.value}`}
+              iconStart={
+                op.value === item.operator ? (
+                  <rootProps.slots.menuItemCheckIcon fontSize="small" />
+                ) : (
+                  <span />
+                )
+              }
               onClick={() => {
                 applyFilterChanges({ ...item, operator: op.value });
                 hideMenu();
               }}
-              autoFocus={i === 0 ? open : false}
-              selected={op.value === item.operator}
-              key={`${field}-${op.value}`}
             >
               {label}
             </rootProps.slots.baseMenuItem>
@@ -93,8 +115,10 @@ GridHeaderFilterMenu.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   applyFilterChanges: PropTypes.func.isRequired,
+  clearFilterItem: PropTypes.func.isRequired,
   field: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
+  isApplied: PropTypes.bool.isRequired,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
index 38e080bdab3c3..5398cfd7b1dd6 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
@@ -19,6 +19,8 @@ function GridHeaderFilterMenuContainer(props: {
   headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
   buttonRef: React.Ref<HTMLButtonElement>;
   disabled?: boolean;
+  isApplied?: boolean;
+  clearFilterItem?: () => void;
 }) {
   const {
     operators,
@@ -27,6 +29,8 @@ function GridHeaderFilterMenuContainer(props: {
     buttonRef,
     headerFilterMenuRef,
     disabled = false,
+    isApplied = false,
+    clearFilterItem,
     ...others
   } = props;
 
@@ -62,12 +66,14 @@ function GridHeaderFilterMenuContainer(props: {
         aria-haspopup="true"
         tabIndex={-1}
         size="small"
-        edge="start"
         onClick={handleClick}
         disabled={disabled}
+        sx={{ ml: 0.25 }}
         {...rootProps.slotProps?.baseIconButton}
       >
-        <rootProps.slots.openFilterButtonIcon fontSize="inherit" />
+        <rootProps.slots.baseBadge color="primary" variant="dot" badgeContent={isApplied ? 1 : 0}>
+          <rootProps.slots.openFilterButtonIcon fontSize="inherit" />
+        </rootProps.slots.baseBadge>
       </rootProps.slots.baseIconButton>
       <rootProps.slots.headerFilterMenu
         field={field}
@@ -77,6 +83,8 @@ function GridHeaderFilterMenuContainer(props: {
         operators={operators}
         labelledBy={buttonId!}
         id={menuId!}
+        isApplied={isApplied}
+        clearFilterItem={clearFilterItem}
         {...others}
       />
     </React.Fragment>
@@ -90,11 +98,13 @@ GridHeaderFilterMenuContainer.propTypes = {
   // ----------------------------------------------------------------------
   applyFilterChanges: PropTypes.func.isRequired,
   buttonRef: refType,
+  clearFilterItem: PropTypes.func,
   disabled: PropTypes.bool,
   field: PropTypes.string.isRequired,
   headerFilterMenuRef: PropTypes.shape({
     current: PropTypes.object,
   }).isRequired,
+  isApplied: PropTypes.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
index 97fad9342d04d..8cac0c13335d7 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -7,6 +7,7 @@ import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
 export type GridFilterInputBooleanProps = GridFilterInputValueProps &
   TextFieldProps & {
+    headerFilterMenu?: React.ReactNode;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -32,10 +33,11 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     apiRef,
     focusElementRef,
     isFilterActive,
+    headerFilterMenu,
     clearButton,
     tabIndex,
     label: labelProp,
-    variant = 'standard',
+    variant = 'outlined',
     InputLabelProps,
     ...others
   } = props;
@@ -89,8 +91,6 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           notched={variant === 'outlined' ? true : undefined}
           native={isSelectNative}
           displayEmpty
-          startAdornment={others.InputProps?.startAdornment}
-          endAdornment={others.InputProps?.endAdornment}
           inputProps={{ ref: focusElementRef, tabIndex }}
           {
             ...(others as any) /* FIXME: typing error */
@@ -120,6 +120,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           </rootProps.slots.baseSelectOption>
         </rootProps.slots.baseSelect>
       </rootProps.slots.baseFormControl>
+      {headerFilterMenu}
       {clearButton}
     </React.Fragment>
   );
@@ -136,6 +137,7 @@ GridFilterInputBoolean.propTypes = {
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: refType,
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
index 0005842a9f18e..80d2c509d1233 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
@@ -9,8 +9,9 @@ import { GridFilterItem } from '../../../models/gridFilterItem';
 
 export type GridFilterInputDateProps = GridFilterInputValueProps &
   TextFieldProps & {
-    type?: 'date' | 'datetime-local';
+    headerFilterMenu?: React.ReactNode;
     clearButton?: React.ReactNode | null;
+    type?: 'date' | 'datetime-local';
     /**
      * It is `true` if the filter either has a value or an operator with no value
      * required is selected (for example `isEmpty`)
@@ -51,6 +52,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
     focusElementRef,
     InputProps,
     isFilterActive,
+    headerFilterMenu,
     clearButton,
     tabIndex,
     disabled,
@@ -86,40 +88,38 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
   }, [item.value, type]);
 
   return (
-    <rootProps.slots.baseTextField
-      fullWidth
-      id={id}
-      label={apiRef.current.getLocaleText('filterPanelInputLabel')}
-      placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
-      value={filterValueState}
-      onChange={onFilterChange}
-      variant="standard"
-      type={type || 'text'}
-      InputLabelProps={{
-        shrink: true,
-      }}
-      inputRef={focusElementRef}
-      InputProps={{
-        ...(applying || clearButton
-          ? {
-              endAdornment: applying ? (
-                <rootProps.slots.loadIcon fontSize="small" color="action" />
-              ) : (
-                clearButton
-              ),
-            }
-          : {}),
-        disabled,
-        ...InputProps,
-        inputProps: {
-          max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
-          tabIndex,
-          ...InputProps?.inputProps,
-        },
-      }}
-      {...other}
-      {...rootProps.slotProps?.baseTextField}
-    />
+    <React.Fragment>
+      <rootProps.slots.baseTextField
+        fullWidth
+        id={id}
+        label={apiRef.current.getLocaleText('filterPanelInputLabel')}
+        placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
+        value={filterValueState}
+        onChange={onFilterChange}
+        variant="standard"
+        type={type || 'text'}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        inputRef={focusElementRef}
+        InputProps={{
+          endAdornment: applying ? (
+            <rootProps.slots.loadIcon fontSize="small" color="action" />
+          ) : null,
+          disabled,
+          ...InputProps,
+          inputProps: {
+            max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+            tabIndex,
+            ...InputProps?.inputProps,
+          },
+        }}
+        {...rootProps.slotProps?.baseTextField}
+        {...other}
+      />
+      {headerFilterMenu}
+      {clearButton}
+    </React.Fragment>
   );
 }
 
@@ -137,6 +137,7 @@ GridFilterInputDate.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
index 0e1674bb12555..12085d7d2f9fd 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
@@ -38,7 +38,7 @@ function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingl
     error,
     helperText,
     size,
-    variant = 'standard',
+    variant = 'outlined',
     ...other
   } = props;
   const TextFieldProps = {
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
index 50da622479b8e..db6ca06257358 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
@@ -21,7 +21,7 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
     error,
     helperText,
     size,
-    variant = 'standard',
+    variant = 'outlined',
     ...other
   } = props;
   const TextFieldProps = {
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index f667bea25f301..fb556e8fda700 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -47,6 +47,7 @@ const renderSingleSelectOptions = ({
 
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
   TextFieldProps & {
+    headerFilterMenu?: React.ReactNode;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -66,9 +67,10 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     placeholder,
     tabIndex,
     label: labelProp,
-    variant = 'standard',
+    variant = 'outlined',
     isFilterActive,
     clearButton,
+    headerFilterMenu,
     InputLabelProps,
     ...others
   } = props;
@@ -112,55 +114,50 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
 
   return (
-    <rootProps.slots.baseFormControl fullWidth sx={others.sx}>
-      <rootProps.slots.baseInputLabel
-        {...rootProps.slotProps?.baseInputLabel}
-        id={labelId}
-        htmlFor={id}
-        shrink
-        variant={variant}
-      >
-        {label}
-      </rootProps.slots.baseInputLabel>
-      <rootProps.slots.baseSelect
-        id={id}
-        label={label}
-        labelId={labelId}
-        value={filterValue}
-        onChange={onFilterChange}
-        variant={variant}
-        type={type || 'text'}
-        startAdornment={others.InputProps?.startAdornment}
-        endAdornment={
-          <rootProps.slots.baseInputAdornment
-            position="end"
-            sx={{ position: 'absolute', right: 32 }}
-          >
-            {clearButton}
-          </rootProps.slots.baseInputAdornment>
-        }
-        inputProps={{
-          tabIndex,
-          ref: focusElementRef,
-          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        }}
-        native={isSelectNative}
-        notched={variant === 'outlined' ? true : undefined}
-        {
-          ...(others as any) /* FIXME: typing error */
-        }
-        {...rootProps.slotProps?.baseSelect}
-      >
-        {renderSingleSelectOptions({
-          column: resolvedColumn,
-          OptionComponent: rootProps.slots.baseSelectOption,
-          getOptionLabel,
-          getOptionValue,
-          isSelectNative,
-          baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
-        })}
-      </rootProps.slots.baseSelect>
-    </rootProps.slots.baseFormControl>
+    <React.Fragment>
+      <rootProps.slots.baseFormControl fullWidth sx={others.sx}>
+        <rootProps.slots.baseInputLabel
+          {...rootProps.slotProps?.baseInputLabel}
+          id={labelId}
+          htmlFor={id}
+          shrink
+          variant={variant}
+        >
+          {label}
+        </rootProps.slots.baseInputLabel>
+        <rootProps.slots.baseSelect
+          id={id}
+          label={label}
+          labelId={labelId}
+          value={filterValue}
+          onChange={onFilterChange}
+          variant={variant}
+          type={type || 'text'}
+          inputProps={{
+            tabIndex,
+            ref: focusElementRef,
+            placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+          }}
+          native={isSelectNative}
+          notched={variant === 'outlined' ? true : undefined}
+          {
+            ...(others as any) /* FIXME: typing error */
+          }
+          {...rootProps.slotProps?.baseSelect}
+        >
+          {renderSingleSelectOptions({
+            column: resolvedColumn,
+            OptionComponent: rootProps.slots.baseSelectOption,
+            getOptionLabel,
+            getOptionValue,
+            isSelectNative,
+            baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
+          })}
+        </rootProps.slots.baseSelect>
+      </rootProps.slots.baseFormControl>
+      {headerFilterMenu}
+      {clearButton}
+    </React.Fragment>
   );
 }
 
@@ -178,6 +175,7 @@ GridFilterInputSingleSelect.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
index f00ebcfb5f43a..2a84728be4171 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -10,6 +10,7 @@ import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 export type GridTypeFilterInputValueProps = GridFilterInputValueProps &
   TextFieldProps & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
+    headerFilterMenu?: React.ReactNode;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -31,8 +32,9 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
     disabled,
     isFilterActive,
     clearButton,
+    headerFilterMenu,
     InputProps,
-    variant = 'standard',
+    variant = 'outlined',
     ...others
   } = props;
   const filterTimeout = useTimeout();
@@ -68,42 +70,38 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
   }, [id, item]);
 
   return (
-    <rootProps.slots.baseTextField
-      id={id}
-      label={apiRef.current.getLocaleText('filterPanelInputLabel')}
-      placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
-      value={filterValueState}
-      onChange={onFilterChange}
-      variant={variant}
-      type={type || 'text'}
-      InputProps={{
-        ...(applying || clearButton
-          ? {
-              endAdornment: (
-                <rootProps.slots.baseInputAdornment position="end">
-                  {applying ? (
-                    <rootProps.slots.loadIcon fontSize="small" color="action" />
-                  ) : (
-                    clearButton
-                  )}
-                </rootProps.slots.baseInputAdornment>
-              ),
-            }
-          : {}),
-        disabled,
-        ...InputProps,
-        inputProps: {
-          tabIndex,
-          ...InputProps?.inputProps,
-        },
-      }}
-      InputLabelProps={{
-        shrink: true,
-      }}
-      inputRef={focusElementRef}
-      {...others}
-      {...rootProps.slotProps?.baseTextField}
-    />
+    <React.Fragment>
+      <rootProps.slots.baseTextField
+        id={id}
+        label={apiRef.current.getLocaleText('filterPanelInputLabel')}
+        placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
+        value={filterValueState}
+        onChange={onFilterChange}
+        variant={variant}
+        type={type || 'text'}
+        InputProps={{
+          endAdornment: applying ? (
+            <rootProps.slots.baseInputAdornment position="end">
+              <rootProps.slots.loadIcon fontSize="small" color="action" />
+            </rootProps.slots.baseInputAdornment>
+          ) : null,
+          disabled,
+          ...InputProps,
+          inputProps: {
+            tabIndex,
+            ...InputProps?.inputProps,
+          },
+        }}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        inputRef={focusElementRef}
+        {...rootProps.slotProps?.baseTextField}
+        {...others}
+      />
+      {headerFilterMenu}
+      {clearButton}
+    </React.Fragment>
   );
 }
 
@@ -121,6 +119,7 @@ GridFilterInputValue.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
diff --git a/packages/x-data-grid/src/constants/localeTextConstants.ts b/packages/x-data-grid/src/constants/localeTextConstants.ts
index ceaafee36c5ab..5f528025ccc0b 100644
--- a/packages/x-data-grid/src/constants/localeTextConstants.ts
+++ b/packages/x-data-grid/src/constants/localeTextConstants.ts
@@ -112,6 +112,7 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
   'headerFilterOperator>=': 'Greater than or equal to',
   'headerFilterOperator<': 'Less than',
   'headerFilterOperator<=': 'Less than or equal to',
+  headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'any',
diff --git a/packages/x-data-grid/src/locales/arSD.ts b/packages/x-data-grid/src/locales/arSD.ts
index 6bf6384234824..e38397e88ae82 100644
--- a/packages/x-data-grid/src/locales/arSD.ts
+++ b/packages/x-data-grid/src/locales/arSD.ts
@@ -113,6 +113,7 @@ const arSDGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'أكبر من او يساوي',
   'headerFilterOperator<': 'اصغر من',
   'headerFilterOperator<=': 'اصغر من او يساوي',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'أي',
diff --git a/packages/x-data-grid/src/locales/beBY.ts b/packages/x-data-grid/src/locales/beBY.ts
index e08dcc017c49c..c7be6370cb2b6 100644
--- a/packages/x-data-grid/src/locales/beBY.ts
+++ b/packages/x-data-grid/src/locales/beBY.ts
@@ -136,6 +136,7 @@ const beBYGrid: Partial<GridLocaleText> = {
   // 'headerFilterOperator>=': 'Greater than or equal to',
   // 'headerFilterOperator<': 'Less than',
   // 'headerFilterOperator<=': 'Less than or equal to',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'усякі',
diff --git a/packages/x-data-grid/src/locales/bgBG.ts b/packages/x-data-grid/src/locales/bgBG.ts
index 06eadc68a47bb..c4cc12cb209ec 100644
--- a/packages/x-data-grid/src/locales/bgBG.ts
+++ b/packages/x-data-grid/src/locales/bgBG.ts
@@ -112,6 +112,7 @@ const bgBGGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'По-голямо или равно на',
   'headerFilterOperator<': 'По-малко от',
   'headerFilterOperator<=': 'По-малко или равно на',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'всякакви',
diff --git a/packages/x-data-grid/src/locales/csCZ.ts b/packages/x-data-grid/src/locales/csCZ.ts
index 43ed7268aaf42..28c2edc1f15bb 100644
--- a/packages/x-data-grid/src/locales/csCZ.ts
+++ b/packages/x-data-grid/src/locales/csCZ.ts
@@ -120,6 +120,7 @@ const csCZGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Větší než nebo rovno',
   'headerFilterOperator<': 'Menší než',
   'headerFilterOperator<=': 'Menší než nebo rovno',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'jakýkoliv',
diff --git a/packages/x-data-grid/src/locales/daDK.ts b/packages/x-data-grid/src/locales/daDK.ts
index 6e05df468d412..91b39e716d8f6 100644
--- a/packages/x-data-grid/src/locales/daDK.ts
+++ b/packages/x-data-grid/src/locales/daDK.ts
@@ -113,6 +113,7 @@ const daDKGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Større end eller lig med',
   'headerFilterOperator<': 'Mindre end',
   'headerFilterOperator<=': 'Mindre end eller lig med',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'hvilken som helst',
diff --git a/packages/x-data-grid/src/locales/deDE.ts b/packages/x-data-grid/src/locales/deDE.ts
index 26162e1b4146a..306d254f9d1a0 100644
--- a/packages/x-data-grid/src/locales/deDE.ts
+++ b/packages/x-data-grid/src/locales/deDE.ts
@@ -114,6 +114,7 @@ const deDEGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Größer als oder gleich',
   'headerFilterOperator<': 'Kleiner als',
   'headerFilterOperator<=': 'Kleiner als oder gleich',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'Beliebig',
diff --git a/packages/x-data-grid/src/locales/elGR.ts b/packages/x-data-grid/src/locales/elGR.ts
index db548b4bc7ad1..ce1b8cc1c9bf3 100644
--- a/packages/x-data-grid/src/locales/elGR.ts
+++ b/packages/x-data-grid/src/locales/elGR.ts
@@ -113,6 +113,7 @@ const elGRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Μεγαλύτερο ή ίσο με',
   'headerFilterOperator<': 'Μικρότερο από',
   'headerFilterOperator<=': 'Μικρότερο ή ίσο με',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'οποιοδήποτε',
diff --git a/packages/x-data-grid/src/locales/esES.ts b/packages/x-data-grid/src/locales/esES.ts
index 24b78720d0cec..5f0f9700565ce 100644
--- a/packages/x-data-grid/src/locales/esES.ts
+++ b/packages/x-data-grid/src/locales/esES.ts
@@ -114,6 +114,7 @@ const esESGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Es mayor o igual que',
   'headerFilterOperator<': 'Es menor que',
   'headerFilterOperator<=': 'Es menor o igual que',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'cualquiera',
diff --git a/packages/x-data-grid/src/locales/faIR.ts b/packages/x-data-grid/src/locales/faIR.ts
index 05256edba0f1e..4cd02de67cafd 100644
--- a/packages/x-data-grid/src/locales/faIR.ts
+++ b/packages/x-data-grid/src/locales/faIR.ts
@@ -113,6 +113,7 @@ const faIRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'بزرگتر یا مساوی',
   'headerFilterOperator<': 'کوچکتر',
   'headerFilterOperator<=': 'کوچکتر یا مساوی',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'هرچیزی',
diff --git a/packages/x-data-grid/src/locales/fiFI.ts b/packages/x-data-grid/src/locales/fiFI.ts
index 4bcd709021b26..15e763df36eec 100644
--- a/packages/x-data-grid/src/locales/fiFI.ts
+++ b/packages/x-data-grid/src/locales/fiFI.ts
@@ -113,6 +113,7 @@ const fiFIGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Enemmän tai yhtä paljon kuin',
   'headerFilterOperator<': 'Vähemmän kuin',
   'headerFilterOperator<=': 'Vähemmän tai yhtä paljon kuin',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'mikä tahansa',
diff --git a/packages/x-data-grid/src/locales/frFR.ts b/packages/x-data-grid/src/locales/frFR.ts
index be535568d8eec..4b7bdd287991d 100644
--- a/packages/x-data-grid/src/locales/frFR.ts
+++ b/packages/x-data-grid/src/locales/frFR.ts
@@ -113,6 +113,7 @@ const frFRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Est supérieur ou égal à',
   'headerFilterOperator<': 'Est inférieur à',
   'headerFilterOperator<=': 'Est inférieur ou égal à',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'tous',
diff --git a/packages/x-data-grid/src/locales/heIL.ts b/packages/x-data-grid/src/locales/heIL.ts
index becf3c591944f..3bfe383ac780a 100644
--- a/packages/x-data-grid/src/locales/heIL.ts
+++ b/packages/x-data-grid/src/locales/heIL.ts
@@ -113,6 +113,7 @@ const heILGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'גדול שווה ל-',
   'headerFilterOperator<': 'קטן מ-',
   'headerFilterOperator<=': 'קטן שווה ל-',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'כל ערך',
diff --git a/packages/x-data-grid/src/locales/hrHR.ts b/packages/x-data-grid/src/locales/hrHR.ts
index 6c1028ad172a4..718990aecf84e 100644
--- a/packages/x-data-grid/src/locales/hrHR.ts
+++ b/packages/x-data-grid/src/locales/hrHR.ts
@@ -120,6 +120,7 @@ const hrHRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Veće ili jednako',
   'headerFilterOperator<': 'Manje od',
   'headerFilterOperator<=': 'Manje od ili jednako',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'bilo koji',
diff --git a/packages/x-data-grid/src/locales/huHU.ts b/packages/x-data-grid/src/locales/huHU.ts
index f7fbf11010570..0ae1c185bc96c 100644
--- a/packages/x-data-grid/src/locales/huHU.ts
+++ b/packages/x-data-grid/src/locales/huHU.ts
@@ -112,6 +112,7 @@ const huHUGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Nagyobb vagy egyenlő',
   'headerFilterOperator<': 'Kisebb mint',
   'headerFilterOperator<=': 'Kisebb vagy egyenlő',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'bármilyen',
diff --git a/packages/x-data-grid/src/locales/isIS.ts b/packages/x-data-grid/src/locales/isIS.ts
index 409e8ec548c59..b058fa1ae0cb6 100644
--- a/packages/x-data-grid/src/locales/isIS.ts
+++ b/packages/x-data-grid/src/locales/isIS.ts
@@ -113,6 +113,7 @@ const isISGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Stærra en eða jafnt og',
   'headerFilterOperator<': 'Minna en',
   'headerFilterOperator<=': 'Minna en eða jafnt og',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'hvað sem er',
diff --git a/packages/x-data-grid/src/locales/itIT.ts b/packages/x-data-grid/src/locales/itIT.ts
index 967f96f2e4340..123284cdf3516 100644
--- a/packages/x-data-grid/src/locales/itIT.ts
+++ b/packages/x-data-grid/src/locales/itIT.ts
@@ -113,6 +113,7 @@ const itITGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Maggiore o uguale a',
   'headerFilterOperator<': 'Minore di',
   'headerFilterOperator<=': 'Minore o uguale a',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'qualunque',
diff --git a/packages/x-data-grid/src/locales/jaJP.ts b/packages/x-data-grid/src/locales/jaJP.ts
index 82774b9a22716..21ce444cd4440 100644
--- a/packages/x-data-grid/src/locales/jaJP.ts
+++ b/packages/x-data-grid/src/locales/jaJP.ts
@@ -112,6 +112,7 @@ const jaJPGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '以上',
   'headerFilterOperator<': '未満',
   'headerFilterOperator<=': '以下',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'いずれか',
diff --git a/packages/x-data-grid/src/locales/koKR.ts b/packages/x-data-grid/src/locales/koKR.ts
index 6d1fb7f802a93..4da460f91959e 100644
--- a/packages/x-data-grid/src/locales/koKR.ts
+++ b/packages/x-data-grid/src/locales/koKR.ts
@@ -113,6 +113,7 @@ const koKRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '같거나 더 큰',
   'headerFilterOperator<': '더 작은',
   'headerFilterOperator<=': '같거나 더 작은',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: '아무값',
diff --git a/packages/x-data-grid/src/locales/nbNO.ts b/packages/x-data-grid/src/locales/nbNO.ts
index 87baf3f7a9287..1f94a0cc33a4e 100644
--- a/packages/x-data-grid/src/locales/nbNO.ts
+++ b/packages/x-data-grid/src/locales/nbNO.ts
@@ -113,6 +113,7 @@ const nbNOGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Større enn eller lik',
   'headerFilterOperator<': 'Mindre enn',
   'headerFilterOperator<=': 'Mindre enn eller lik',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'noen',
diff --git a/packages/x-data-grid/src/locales/nlNL.ts b/packages/x-data-grid/src/locales/nlNL.ts
index f710c2b2f9975..a09e0c4b8baac 100644
--- a/packages/x-data-grid/src/locales/nlNL.ts
+++ b/packages/x-data-grid/src/locales/nlNL.ts
@@ -113,6 +113,7 @@ const nlNLGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Is groter dan of gelijk aan',
   'headerFilterOperator<': 'Is kleiner dan',
   'headerFilterOperator<=': 'Is kleiner dan of gelijk aan',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'alles',
diff --git a/packages/x-data-grid/src/locales/nnNO.ts b/packages/x-data-grid/src/locales/nnNO.ts
index 73184bcb1e773..615b636249780 100644
--- a/packages/x-data-grid/src/locales/nnNO.ts
+++ b/packages/x-data-grid/src/locales/nnNO.ts
@@ -113,6 +113,7 @@ const nnNOGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Større enn eller lik',
   'headerFilterOperator<': 'Mindre enn',
   'headerFilterOperator<=': 'Mindre enn eller lik',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'nokon',
diff --git a/packages/x-data-grid/src/locales/plPL.ts b/packages/x-data-grid/src/locales/plPL.ts
index cc5de7359d39a..376d510dc52b8 100644
--- a/packages/x-data-grid/src/locales/plPL.ts
+++ b/packages/x-data-grid/src/locales/plPL.ts
@@ -112,6 +112,7 @@ const plPLGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Większy lub równy',
   'headerFilterOperator<': 'Mniejszy niż',
   'headerFilterOperator<=': 'Mniejszy lub równe',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'dowolny',
diff --git a/packages/x-data-grid/src/locales/ptBR.ts b/packages/x-data-grid/src/locales/ptBR.ts
index 7d8e46afeb343..c6feb6fc6b18d 100644
--- a/packages/x-data-grid/src/locales/ptBR.ts
+++ b/packages/x-data-grid/src/locales/ptBR.ts
@@ -114,6 +114,7 @@ const ptBRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Maior que ou igual a',
   'headerFilterOperator<': 'Menor que',
   'headerFilterOperator<=': 'Menor que ou igual a',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'qualquer',
diff --git a/packages/x-data-grid/src/locales/ptPT.ts b/packages/x-data-grid/src/locales/ptPT.ts
index 25607c37c96cb..1abd0a4d22ca4 100644
--- a/packages/x-data-grid/src/locales/ptPT.ts
+++ b/packages/x-data-grid/src/locales/ptPT.ts
@@ -114,6 +114,7 @@ const ptPTGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Melhor que ou igual a',
   'headerFilterOperator<': 'Menor que',
   'headerFilterOperator<=': 'Menos que ou igual a',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'qualquer',
diff --git a/packages/x-data-grid/src/locales/roRO.ts b/packages/x-data-grid/src/locales/roRO.ts
index c7949fe83a726..46c8e1d86bd19 100644
--- a/packages/x-data-grid/src/locales/roRO.ts
+++ b/packages/x-data-grid/src/locales/roRO.ts
@@ -114,6 +114,7 @@ const roROGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Mai mare sau egal cu',
   'headerFilterOperator<': 'Mai mic decât',
   'headerFilterOperator<=': 'Mai mic sau egal cu',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'Aleatoriu',
diff --git a/packages/x-data-grid/src/locales/ruRU.ts b/packages/x-data-grid/src/locales/ruRU.ts
index e735fb745ec07..0d91ed721c716 100644
--- a/packages/x-data-grid/src/locales/ruRU.ts
+++ b/packages/x-data-grid/src/locales/ruRU.ts
@@ -137,6 +137,7 @@ const ruRUGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'больше или равно',
   'headerFilterOperator<': 'меньше чем',
   'headerFilterOperator<=': 'меньше или равно',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'любой',
diff --git a/packages/x-data-grid/src/locales/skSK.ts b/packages/x-data-grid/src/locales/skSK.ts
index d49222bf9ec4f..52391f6147d77 100644
--- a/packages/x-data-grid/src/locales/skSK.ts
+++ b/packages/x-data-grid/src/locales/skSK.ts
@@ -120,6 +120,7 @@ const skSKGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Väčší ako alebo rovný',
   'headerFilterOperator<': 'Menší ako',
   'headerFilterOperator<=': 'Menší ako alebo rovný',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'akýkoľvek',
diff --git a/packages/x-data-grid/src/locales/svSE.ts b/packages/x-data-grid/src/locales/svSE.ts
index 80e3381c27f6a..43d5558520fed 100644
--- a/packages/x-data-grid/src/locales/svSE.ts
+++ b/packages/x-data-grid/src/locales/svSE.ts
@@ -113,6 +113,7 @@ const svSEGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Större eller lika med',
   'headerFilterOperator<': 'Mindre än',
   'headerFilterOperator<=': 'Mindre eller lika med',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'något',
diff --git a/packages/x-data-grid/src/locales/trTR.ts b/packages/x-data-grid/src/locales/trTR.ts
index cd0bb0dad56a6..6bfb9dcf951c5 100644
--- a/packages/x-data-grid/src/locales/trTR.ts
+++ b/packages/x-data-grid/src/locales/trTR.ts
@@ -113,6 +113,7 @@ const trTRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Büyük veya eşit',
   'headerFilterOperator<': 'Küçüktür',
   'headerFilterOperator<=': 'Küçük veya eşit',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'herhangi',
diff --git a/packages/x-data-grid/src/locales/ukUA.ts b/packages/x-data-grid/src/locales/ukUA.ts
index f52cd9579af9a..2006b9bc13957 100644
--- a/packages/x-data-grid/src/locales/ukUA.ts
+++ b/packages/x-data-grid/src/locales/ukUA.ts
@@ -137,6 +137,7 @@ const ukUAGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Більше або дорівнює',
   'headerFilterOperator<': 'Менше ніж',
   'headerFilterOperator<=': 'Менше або дорівнює',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'будь-який',
diff --git a/packages/x-data-grid/src/locales/urPK.ts b/packages/x-data-grid/src/locales/urPK.ts
index c60e2ff35aa68..c2afaefda4531 100644
--- a/packages/x-data-grid/src/locales/urPK.ts
+++ b/packages/x-data-grid/src/locales/urPK.ts
@@ -113,6 +113,7 @@ const urPKGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'ذیادہ یا برابر ہے',
   'headerFilterOperator<': 'کم ہے',
   'headerFilterOperator<=': 'کم یا برابر ہے',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'کوئی بھی',
diff --git a/packages/x-data-grid/src/locales/viVN.ts b/packages/x-data-grid/src/locales/viVN.ts
index 478d77e19cd42..5c45271a104d6 100644
--- a/packages/x-data-grid/src/locales/viVN.ts
+++ b/packages/x-data-grid/src/locales/viVN.ts
@@ -113,6 +113,7 @@ const viVNGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Lớn hơn hoặc bằng',
   'headerFilterOperator<': 'Nhỏ hơn',
   'headerFilterOperator<=': 'Nhỏ hơn hoặc bằng',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'bất kỳ giá trị nào',
diff --git a/packages/x-data-grid/src/locales/zhCN.ts b/packages/x-data-grid/src/locales/zhCN.ts
index cdba5352b3137..6a55a054f6a5a 100644
--- a/packages/x-data-grid/src/locales/zhCN.ts
+++ b/packages/x-data-grid/src/locales/zhCN.ts
@@ -112,6 +112,7 @@ const zhCNGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '大于或等于',
   'headerFilterOperator<': '小于',
   'headerFilterOperator<=': '小于或等于',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: '任何',
diff --git a/packages/x-data-grid/src/locales/zhHK.ts b/packages/x-data-grid/src/locales/zhHK.ts
index 808184786e511..d0ee2ab4ce2af 100644
--- a/packages/x-data-grid/src/locales/zhHK.ts
+++ b/packages/x-data-grid/src/locales/zhHK.ts
@@ -113,6 +113,7 @@ const zhHKGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '少於',
   'headerFilterOperator<=': '小於或等於',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: '任何',
diff --git a/packages/x-data-grid/src/locales/zhTW.ts b/packages/x-data-grid/src/locales/zhTW.ts
index 2356a46c0f415..ac45c10da6ab6 100644
--- a/packages/x-data-grid/src/locales/zhTW.ts
+++ b/packages/x-data-grid/src/locales/zhTW.ts
@@ -112,6 +112,7 @@ const zhTWGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '小於',
   'headerFilterOperator<=': '小於或等於',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: '任何值',
diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx
index 0981a623540bb..fc7e5333e1fd8 100644
--- a/packages/x-data-grid/src/material/index.tsx
+++ b/packages/x-data-grid/src/material/index.tsx
@@ -88,6 +88,7 @@ const iconSlots: GridIconSlotsComponent = {
   filterPanelAddIcon: GridAddIcon,
   filterPanelRemoveAllIcon: GridDeleteForeverIcon,
   columnReorderIcon: GridDragIcon,
+  menuItemCheckIcon: GridCheckIcon,
 };
 
 const baseSlots: GridBaseSlots = {
diff --git a/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
index 17a1ea32356d0..9ced6d619e02b 100644
--- a/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
+++ b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
@@ -123,6 +123,7 @@ export interface GridLocaleText {
   'headerFilterOperator>=': string;
   'headerFilterOperator<': string;
   'headerFilterOperator<=': string;
+  headerFilterClear: string;
 
   // Filter values text
   filterValueAny: string;
diff --git a/packages/x-data-grid/src/models/gridIconSlotsComponent.ts b/packages/x-data-grid/src/models/gridIconSlotsComponent.ts
index 90d024a3ea006..3fec27c41c213 100644
--- a/packages/x-data-grid/src/models/gridIconSlotsComponent.ts
+++ b/packages/x-data-grid/src/models/gridIconSlotsComponent.ts
@@ -179,4 +179,9 @@ export interface GridIconSlotsComponent {
    * @default GridDragIcon
    */
   columnReorderIcon: React.JSXElementConstructor<any>;
+  /**
+   * Icon displayed to indicate that a menu item is selected.
+   * @default GridCheckIcon
+   */
+  menuItemCheckIcon: React.JSXElementConstructor<any>;
 }

From cebcb87ea0e11b9d322c92780d32a7fa31479de4 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Mon, 23 Dec 2024 16:23:29 +0000
Subject: [PATCH 04/16] apply styles to header filter class

---
 docs/pages/x/api/data-grid/data-grid-premium.json           | 6 ++++++
 docs/pages/x/api/data-grid/data-grid-pro.json               | 6 ++++++
 docs/pages/x/api/data-grid/data-grid.json                   | 6 ++++++
 .../data-grid/data-grid-premium/data-grid-premium.json      | 4 ++++
 .../api-docs/data-grid/data-grid-pro/data-grid-pro.json     | 4 ++++
 .../api-docs/data-grid/data-grid/data-grid.json             | 4 ++++
 .../src/components/headerFiltering/GridHeaderFilterCell.tsx | 2 +-
 .../x-data-grid/src/components/containers/GridRootStyles.ts | 5 +++++
 packages/x-data-grid/src/constants/gridClasses.ts           | 5 +++++
 9 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 756444b0f67ad..95248c6c45757 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -1364,6 +1364,12 @@
       "description": "Styles applied to the column group header cell if not empty.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--filter",
+      "className": "MuiDataGridPremium-columnHeader--filter",
+      "description": "Styles applied to the header filter cell.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--filtered",
       "className": "MuiDataGridPremium-columnHeader--filtered",
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
index 9231e429d1931..b6d925e8be578 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -1269,6 +1269,12 @@
       "description": "Styles applied to the column group header cell if not empty.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--filter",
+      "className": "MuiDataGridPro-columnHeader--filter",
+      "description": "Styles applied to the header filter cell.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--filtered",
       "className": "MuiDataGridPro-columnHeader--filtered",
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index 731b221966423..4b1fe7a8a51f7 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -1143,6 +1143,12 @@
       "description": "Styles applied to the column group header cell if not empty.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--filter",
+      "className": "MuiDataGrid-columnHeader--filter",
+      "description": "Styles applied to the header filter cell.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--filtered",
       "className": "MuiDataGrid-columnHeader--filtered",
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index 00cc6725e792f..747ddbf18a020 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -836,6 +836,10 @@
       "nodeName": "the column group header cell",
       "conditions": "not empty"
     },
+    "columnHeader--filter": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter cell"
+    },
     "columnHeader--filtered": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 03532df297077..54594f614670d 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -774,6 +774,10 @@
       "nodeName": "the column group header cell",
       "conditions": "not empty"
     },
+    "columnHeader--filter": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter cell"
+    },
     "columnHeader--filtered": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index d637e5645384a..62b81f185cdbf 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -648,6 +648,10 @@
       "nodeName": "the column group header cell",
       "conditions": "not empty"
     },
+    "columnHeader--filter": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter cell"
+    },
     "columnHeader--filtered": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 4a5c72a9f656e..103ebf1df53aa 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -76,6 +76,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const slots = {
     root: [
       'columnHeader',
+      'columnHeader--filter',
       colDef.headerAlign === 'left' && 'columnHeader--alignLeft',
       colDef.headerAlign === 'center' && 'columnHeader--alignCenter',
       colDef.headerAlign === 'right' && 'columnHeader--alignRight',
@@ -321,7 +322,6 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
       style={{
         height,
         width,
-        paddingTop: 4,
         ...styleProp,
       }}
       role="columnheader"
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index 3e52d28189683..bacffae8a71c8 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -348,6 +348,11 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       alignItems: 'center',
     },
+    [`& .${c['columnHeader--filter']}`]: {
+      paddingTop: 4,
+      paddingRight: 5,
+      minHeight: '56px',
+    },
     [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
       overflow: 'hidden',
     },
diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
index 30e9df86d3d0c..5800dac2fc552 100644
--- a/packages/x-data-grid/src/constants/gridClasses.ts
+++ b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -206,6 +206,10 @@ export interface GridClasses {
    * Styles applied to the empty column group header cell.
    */
   'columnHeader--emptyGroup': string;
+  /**
+   * Styles applied to the header filter cell.
+   */
+  'columnHeader--filter': string;
   /**
    * Styles applied to the column headers.
    */
@@ -728,6 +732,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'columnHeader--last',
   'columnHeader--lastUnpinned',
   'columnHeader--siblingFocused',
+  'columnHeader--filter',
   'columnHeaderCheckbox',
   'columnHeaderDraggableContainer',
   'columnHeaderTitle',

From e9d3fcd5bb348902fcac13c98a182fc9e0761115 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Tue, 24 Dec 2024 14:45:24 +0000
Subject: [PATCH 05/16] update styles

---
 .../headerFiltering/GridHeaderFilterCell.tsx  | 43 ++++++++++---------
 .../GridHeaderFilterClearButton.tsx           |  4 +-
 .../GridHeaderFilterMenuContainer.tsx         |  4 +-
 .../components/containers/GridRootStyles.ts   |  3 +-
 .../filterPanel/GridFilterInputBoolean.tsx    | 12 ++++--
 .../GridFilterInputSingleSelect.tsx           |  7 ++-
 .../features/dimensions/useGridDimensions.ts  |  6 ++-
 7 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 103ebf1df53aa..4e89e60d5d0a8 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -33,7 +33,6 @@ import {
   shouldCellShowLeftBorder,
   shouldCellShowRightBorder,
 } from '@mui/x-data-grid/internals';
-import { SxProps } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProProcessedProps } from '../../models/dataGridProProps';
@@ -91,22 +90,22 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const inputSx: SxProps = {
-  flex: 1,
-  '.MuiOutlinedInput-input': { fontSize: 14 },
-};
-const dateSx: SxProps = { [`& input[value=""]:not(:focus)`]: { color: 'transparent' } };
-
-const defaultInputComponents: { [key in GridColType]: React.JSXElementConstructor<any> | null } = {
-  string: GridFilterInputValue,
-  number: GridFilterInputValue,
-  date: GridFilterInputDate,
-  dateTime: GridFilterInputDate,
-  boolean: GridFilterInputBoolean,
-  singleSelect: GridFilterInputSingleSelect,
-  actions: null,
-  custom: null,
-};
+const INPUT_PROPS = { inputProps: { sx: { fontSize: 14 } } };
+const INPUT_SX = { flex: 1, minWidth: 40 };
+const DATE_INPUT_SX = { [`& input[value=""]:not(:focus)`]: { color: 'transparent' } };
+
+const DEFAULT_INPUT_COMPONENTS: { [key in GridColType]: React.JSXElementConstructor<any> | null } =
+  {
+    string: GridFilterInputValue,
+    number: GridFilterInputValue,
+    date: GridFilterInputDate,
+    dateTime: GridFilterInputDate,
+    boolean: GridFilterInputBoolean,
+    singleSelect: GridFilterInputSingleSelect,
+    actions: null,
+    custom: null,
+  };
+
 const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProps>((props, ref) => {
   const {
     colIndex,
@@ -167,7 +166,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
 
   const InputComponent =
     colDef.filterable || isFilterReadOnly
-      ? (currentOperator.InputComponent ?? defaultInputComponents[colDef.type as GridColType])
+      ? (currentOperator.InputComponent ?? DEFAULT_INPUT_COMPONENTS[colDef.type as GridColType])
       : null;
 
   const clearFilterItem = React.useCallback(() => {
@@ -361,10 +360,13 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
           size="small"
           disabled={isFilterReadOnly || isNoInputOperator}
           tabIndex={-1}
-          sx={[inputSx, colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined]}
+          sx={[
+            INPUT_SX,
+            colDef.type === 'date' || colDef.type === 'dateTime' ? DATE_INPUT_SX : undefined,
+          ]}
           headerFilterMenu={
             <GridHeaderFilterMenuContainer
-              operators={filterOperators!}
+              operators={filterOperators}
               item={item}
               field={colDef.field}
               disabled={isFilterReadOnly}
@@ -380,6 +382,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
               <GridHeaderFilterClearButton onClick={clearFilterItem} disabled={isFilterReadOnly} />
             ) : null
           }
+          InputProps={INPUT_PROPS}
           {...(isNoInputOperator ? { value: '' } : {})}
           {...currentOperator?.InputComponentProps}
           {...InputComponentProps}
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
index 5fd876632d8ef..a4fde47a264b5 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
@@ -4,6 +4,8 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 interface GridHeaderFilterClearIconProps extends IconButtonProps {}
 
+const SX = { ml: 0.25 };
+
 function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
   const rootProps = useGridRootProps();
   return (
@@ -11,7 +13,7 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      sx={{ ml: 0.25 }}
+      sx={SX}
       {...rootProps.slotProps?.baseIconButton}
       {...props}
     >
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
index 5398cfd7b1dd6..ca7cd2d050f91 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
@@ -11,6 +11,8 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
+const SX = { ml: 0.25 };
+
 function GridHeaderFilterMenuContainer(props: {
   operators: GridFilterOperator<any, any, any>[];
   field: GridColDef['field'];
@@ -68,7 +70,7 @@ function GridHeaderFilterMenuContainer(props: {
         size="small"
         onClick={handleClick}
         disabled={disabled}
-        sx={{ ml: 0.25 }}
+        sx={SX}
         {...rootProps.slotProps?.baseIconButton}
       >
         <rootProps.slots.baseBadge color="primary" variant="dot" badgeContent={isApplied ? 1 : 0}>
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index bacffae8a71c8..d8bbbf0e11e23 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -350,8 +350,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['columnHeader--filter']}`]: {
       paddingTop: 4,
-      paddingRight: 5,
-      minHeight: '56px',
+      overflow: 'hidden',
     },
     [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
       overflow: 'hidden',
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
index 8c7f480ef8c1c..b68ef4f385aff 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -28,7 +28,9 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     tabIndex,
     label: labelProp,
     variant = 'outlined',
+    InputProps,
     InputLabelProps,
+    sx,
     ...others
   } = props;
   const [filterValueState, setFilterValueState] = React.useState<boolean | undefined>(
@@ -62,7 +64,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
 
   return (
     <React.Fragment>
-      <rootProps.slots.baseFormControl fullWidth>
+      <rootProps.slots.baseFormControl fullWidth sx={sx}>
         <rootProps.slots.baseInputLabel
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
@@ -81,11 +83,15 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           notched={variant === 'outlined' ? true : undefined}
           native={isSelectNative}
           displayEmpty
-          inputProps={{ ref: focusElementRef, tabIndex }}
+          inputProps={{
+            ref: focusElementRef,
+            tabIndex,
+            ...InputProps?.inputProps,
+          }}
+          {...baseSelectProps}
           {
             ...(others as any) /* FIXME: typing error */
           }
-          {...baseSelectProps}
         >
           <rootProps.slots.baseSelectOption
             {...baseSelectOptionProps}
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index fb556e8fda700..1966b1bf4e2eb 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -71,7 +71,9 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     isFilterActive,
     clearButton,
     headerFilterMenu,
+    InputProps,
     InputLabelProps,
+    sx,
     ...others
   } = props;
   const filterValue = item.value ?? '';
@@ -115,7 +117,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
 
   return (
     <React.Fragment>
-      <rootProps.slots.baseFormControl fullWidth sx={others.sx}>
+      <rootProps.slots.baseFormControl fullWidth sx={sx}>
         <rootProps.slots.baseInputLabel
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
@@ -137,13 +139,14 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
             tabIndex,
             ref: focusElementRef,
             placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+            ...InputProps?.inputProps,
           }}
           native={isSelectNative}
           notched={variant === 'outlined' ? true : undefined}
+          {...rootProps.slotProps?.baseSelect}
           {
             ...(others as any) /* FIXME: typing error */
           }
-          {...rootProps.slotProps?.baseSelect}
         >
           {renderSingleSelectOptions({
             column: resolvedColumn,
diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
index c29918e30bbf7..684d43defec7f 100644
--- a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
+++ b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -75,6 +75,7 @@ const EMPTY_DIMENSIONS: GridDimensions = {
   topContainerHeight: 0,
   bottomContainerHeight: 0,
 };
+const MIN_HEADER_FILTER_HEIGHT = 52;
 
 export const dimensionsStateInitializer: GridStateInitializer<RootProps> = (state) => {
   const dimensions = EMPTY_DIMENSIONS;
@@ -110,8 +111,9 @@ export function useGridDimensions(
   const groupHeaderHeight = Math.floor(
     (props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor,
   );
-  const headerFilterHeight = Math.floor(
-    (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor,
+  const headerFilterHeight = Math.max(
+    Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor),
+    MIN_HEADER_FILTER_HEIGHT,
   );
   const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
   const headersTotalHeight = getTotalHeaderHeight(apiRef, props);

From c96bdc97d6b369e59c9d75b1e3707a7bf99c0f79 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Tue, 24 Dec 2024 15:31:03 +0000
Subject: [PATCH 06/16] update demos

---
 .../CustomHeaderFilterDataGridPro.js          |  2 +-
 .../CustomHeaderFilterDataGridPro.tsx         |  2 +-
 .../CustomHeaderFilterOperatorDataGridPro.js  | 29 ++++++-------------
 .../CustomHeaderFilterSingleDataGridPro.js    |  3 +-
 .../CustomHeaderFilterSingleDataGridPro.tsx   |  8 ++---
 5 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
index 4cd9c80e0acde..245124b306372 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
@@ -64,7 +64,7 @@ function CustomHeaderFilter(props) {
     <Stack
       sx={[
         {
-          borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+          borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
         },
         hasFocus
           ? {
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
index 2427434235caa..99eeafa49df64 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
@@ -71,7 +71,7 @@ function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
     <Stack
       sx={[
         {
-          borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+          borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
         },
         hasFocus
           ? {
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
index 50463279c37d7..6c6def12a2e40 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
@@ -23,28 +23,17 @@ function RatingInputValue(props) {
   };
 
   return (
-    <React.Fragment>
+    <Box sx={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+      <Rating
+        name="custom-rating-filter-operator"
+        value={Number(item.value)}
+        onChange={handleFilterChange}
+        precision={0.5}
+        ref={ratingRef}
+      />
       {headerFilterMenu}
-      <Box
-        sx={{
-          display: 'inline-flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          height: '100%',
-          pl: '10px',
-          bl: '1px solid lightgrey',
-        }}
-      >
-        <Rating
-          name="custom-rating-filter-operator"
-          value={Number(item.value)}
-          onChange={handleFilterChange}
-          precision={0.5}
-          ref={ratingRef}
-        />
-      </Box>
       {clearButton}
-    </React.Fragment>
+    </Box>
   );
 }
 
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
index 0ed5ea252ea16..777b2ca25bcfb 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
@@ -42,7 +42,7 @@ function AdminFilter(props) {
   const label = !value ? 'Filter' : 'Is admin';
 
   return (
-    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
+    <FormControl variant="outlined" size="small" fullWidth>
       <InputLabel id="select-is-admin-label">{label}</InputLabel>
       <Select
         labelId="select-is-admin-label"
@@ -50,6 +50,7 @@ function AdminFilter(props) {
         value={value}
         onChange={handleChange}
         label={label}
+        inputProps={{ sx: { fontSize: 14 } }}
       >
         <MenuItem value="">
           <em>None</em>
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
index 0cdf6f9fe6e36..5c14abbdf7862 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
@@ -43,12 +43,7 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
   const label = !value ? 'Filter' : 'Is admin';
 
   return (
-    <FormControl
-      variant="outlined"
-      size="small"
-      sx={{ '.MuiOutlinedInput-input': { fontSize: 14 } }}
-      fullWidth
-    >
+    <FormControl variant="outlined" size="small" fullWidth>
       <InputLabel id="select-is-admin-label">{label}</InputLabel>
       <Select
         labelId="select-is-admin-label"
@@ -56,6 +51,7 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
         value={value}
         onChange={handleChange}
         label={label}
+        inputProps={{ sx: { fontSize: 14 } }}
       >
         <MenuItem value="">
           <em>None</em>

From 85c15f640d0c05804c63733a865bd10120cc0608 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Tue, 24 Dec 2024 15:58:09 +0000
Subject: [PATCH 07/16] add test

---
 .../src/tests/filtering.DataGridPro.test.tsx  | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
index be6c832a2d931..9df338d6418c0 100644
--- a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
@@ -999,7 +999,7 @@ describe('<DataGridPro /> - Filter', () => {
       expect(getColumnValues(0)).to.deep.equal([]);
     });
 
-    it('should allow to clear the filter by clear button', () => {
+    it('should allow to clear the filter from operator menu', () => {
       render(
         <TestCase
           initialState={{
@@ -1019,6 +1019,39 @@ describe('<DataGridPro /> - Filter', () => {
         />,
       );
 
+      expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']);
+      const filterCell = getColumnHeaderCell(0, 1);
+      fireEvent.click(filterCell);
+      fireEvent.click(within(filterCell).getByLabelText('Operator'));
+      fireEvent.click(screen.getByRole('menuitem', { name: 'Clear filter' }));
+      expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
+    });
+
+    it('should allow to clear the filter with clear button', () => {
+      render(
+        <TestCase
+          initialState={{
+            filter: {
+              filterModel: {
+                items: [
+                  {
+                    field: 'brand',
+                    operator: 'contains',
+                    value: 'a',
+                  },
+                ],
+              },
+            },
+          }}
+          headerFilters
+          slotProps={{
+            headerFilterCell: {
+              showClearIcon: true,
+            },
+          }}
+        />,
+      );
+
       expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']);
       fireEvent.click(screen.getByRole('button', { name: 'Clear filter' }));
       expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);

From ea0db1d9c452e7a628d333ac019819de3ed9993c Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Thu, 2 Jan 2025 09:27:42 +0000
Subject: [PATCH 08/16] fix keyboard navigation

---
 .../headerFiltering/GridHeaderFilterMenu.tsx           | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
index c9d10510eddd8..19a91f7079c7b 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
@@ -78,7 +78,8 @@ function GridHeaderFilterMenu({
           </rootProps.slots.baseMenuItem>,
           <rootProps.slots.baseDivider key="filter-menu-divider" />,
         ]}
-        {operators.map((op) => {
+        {operators.map((op, i) => {
+          const selected = op.value === item.operator;
           const label =
             op?.headerLabel ??
             apiRef.current.getLocaleText(
@@ -89,16 +90,13 @@ function GridHeaderFilterMenu({
             <rootProps.slots.baseMenuItem
               key={`${field}-${op.value}`}
               iconStart={
-                op.value === item.operator ? (
-                  <rootProps.slots.menuItemCheckIcon fontSize="small" />
-                ) : (
-                  <span />
-                )
+                selected ? <rootProps.slots.menuItemCheckIcon fontSize="small" /> : <span />
               }
               onClick={() => {
                 applyFilterChanges({ ...item, operator: op.value });
                 hideMenu();
               }}
+              autoFocus={selected ? open : false}
             >
               {label}
             </rootProps.slots.baseMenuItem>

From 0502511496404b523420292990497de5e639b5d5 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Thu, 2 Jan 2025 15:29:58 +0000
Subject: [PATCH 09/16] updates

---
 .../CustomHeaderFilterSingleDataGridPro.js    |  5 ++-
 .../CustomHeaderFilterSingleDataGridPro.tsx   |  5 ++-
 .../HeaderFilteringInlineClearDataGridPro.js  | 34 ++++++++++++++++
 .../HeaderFilteringInlineClearDataGridPro.tsx | 34 ++++++++++++++++
 .../SimpleHeaderFilteringDataGridPro.js       |  3 +-
 .../SimpleHeaderFilteringDataGridPro.tsx      |  3 +-
 .../data-grid/filtering/header-filters.md     |  8 ++++
 .../x/api/data-grid/data-grid-premium.json    |  6 +++
 docs/pages/x/api/data-grid/data-grid-pro.json |  6 +++
 docs/pages/x/api/data-grid/data-grid.json     |  6 +++
 .../data-grid-premium/data-grid-premium.json  |  4 ++
 .../data-grid-pro/data-grid-pro.json          |  4 ++
 .../data-grid/data-grid/data-grid.json        |  4 ++
 .../headerFiltering/GridHeaderFilterCell.tsx  | 40 ++++++++++++++-----
 .../headerFiltering/GridHeaderFilterMenu.tsx  | 10 ++---
 .../GridHeaderFilterMenuContainer.tsx         | 14 ++++---
 .../components/containers/GridRootStyles.ts   |  5 ++-
 .../x-data-grid/src/constants/gridClasses.ts  |  6 ++-
 .../features/dimensions/useGridDimensions.ts  |  6 +--
 19 files changed, 172 insertions(+), 31 deletions(-)
 create mode 100644 docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
 create mode 100644 docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx

diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
index 777b2ca25bcfb..3a5c2edc10948 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
@@ -43,7 +43,9 @@ function AdminFilter(props) {
 
   return (
     <FormControl variant="outlined" size="small" fullWidth>
-      <InputLabel id="select-is-admin-label">{label}</InputLabel>
+      <InputLabel id="select-is-admin-label" shrink>
+        {label}
+      </InputLabel>
       <Select
         labelId="select-is-admin-label"
         id="select-is-admin"
@@ -51,6 +53,7 @@ function AdminFilter(props) {
         onChange={handleChange}
         label={label}
         inputProps={{ sx: { fontSize: 14 } }}
+        notched
       >
         <MenuItem value="">
           <em>None</em>
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
index 5c14abbdf7862..4dc9ec6bde046 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
@@ -44,7 +44,9 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
 
   return (
     <FormControl variant="outlined" size="small" fullWidth>
-      <InputLabel id="select-is-admin-label">{label}</InputLabel>
+      <InputLabel id="select-is-admin-label" shrink>
+        {label}
+      </InputLabel>
       <Select
         labelId="select-is-admin-label"
         id="select-is-admin"
@@ -52,6 +54,7 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
         onChange={handleChange}
         label={label}
         inputProps={{ sx: { fontSize: 14 } }}
+        notched
       >
         <MenuItem value="">
           <em>None</em>
diff --git a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
new file mode 100644
index 0000000000000..3a7eb2b2c732d
--- /dev/null
+++ b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function HeaderFilteringInlineClearDataGridPro() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        loading={loading}
+        initialState={{
+          ...data.initialState,
+          columns: {
+            columnVisibilityModel: {
+              avatar: false,
+              id: false,
+            },
+          },
+        }}
+        headerFilters
+        slotProps={{
+          headerFilterCell: {
+            showClearIcon: true,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
new file mode 100644
index 0000000000000..3a7eb2b2c732d
--- /dev/null
+++ b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function HeaderFilteringInlineClearDataGridPro() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        loading={loading}
+        initialState={{
+          ...data.initialState,
+          columns: {
+            columnVisibilityModel: {
+              avatar: false,
+              id: false,
+            },
+          },
+        }}
+        headerFilters
+        slotProps={{
+          headerFilterCell: {
+            showClearIcon: true,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js
index 712837a9b07c7..cfb56f93dc3b0 100644
--- a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js
+++ b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function SimpleHeaderFilteringDataGridPro() {
@@ -27,6 +27,7 @@ export default function SimpleHeaderFilteringDataGridPro() {
         slots={{
           headerFilterMenu: null,
         }}
+        sx={{ [`.${gridClasses['columnHeader--filter']}`]: { px: 1 } }}
       />
     </div>
   );
diff --git a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx
index 712837a9b07c7..cfb56f93dc3b0 100644
--- a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function SimpleHeaderFilteringDataGridPro() {
@@ -27,6 +27,7 @@ export default function SimpleHeaderFilteringDataGridPro() {
         slots={{
           headerFilterMenu: null,
         }}
+        sx={{ [`.${gridClasses['columnHeader--filter']}`]: { px: 1 } }}
       />
     </div>
   );
diff --git a/docs/data/data-grid/filtering/header-filters.md b/docs/data/data-grid/filtering/header-filters.md
index a6ac67a32030e..dd437e3b1762e 100644
--- a/docs/data/data-grid/filtering/header-filters.md
+++ b/docs/data/data-grid/filtering/header-filters.md
@@ -24,6 +24,14 @@ You can disable the default filter panel using `disableColumnFilter` prop and on
 
 {{"demo": "SimpleHeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
+## Inline clear button
+
+The clear button is within the header filter menu by default. To display the clear button inline instead, set `slotProps.headerFilterCell.showClearIcon` to `true`.
+
+Type in the one of the header filter inputs in the demo below to see the inline clear button.
+
+{{"demo": "HeaderFilteringInlineClearDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Customize header filters
 
 There are multiple ways to customize header filters.
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 95248c6c45757..8c93b2e4bf007 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -1442,6 +1442,12 @@
       "description": "Styles applied to the column header's draggable container element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterInput",
+      "className": "MuiDataGridPremium-columnHeaderFilterInput",
+      "description": "Styles applied to the header filter input element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGridPremium-columnHeaderTitle",
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
index b6d925e8be578..1ddbafc1c6b9c 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -1347,6 +1347,12 @@
       "description": "Styles applied to the column header's draggable container element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterInput",
+      "className": "MuiDataGridPro-columnHeaderFilterInput",
+      "description": "Styles applied to the header filter input element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGridPro-columnHeaderTitle",
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index 4b1fe7a8a51f7..b6aa553ed0fa8 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -1221,6 +1221,12 @@
       "description": "Styles applied to the column header's draggable container element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterInput",
+      "className": "MuiDataGrid-columnHeaderFilterInput",
+      "description": "Styles applied to the header filter input element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGrid-columnHeaderTitle",
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index 747ddbf18a020..64a1d3ff0c450 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -883,6 +883,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header&#39;s draggable container element"
     },
+    "columnHeaderFilterInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter input element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 54594f614670d..4e369cfefe268 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -821,6 +821,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header&#39;s draggable container element"
     },
+    "columnHeaderFilterInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter input element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 62b81f185cdbf..633ab8e55cf6e 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -695,6 +695,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header&#39;s draggable container element"
     },
+    "columnHeaderFilterInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter input element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 4e89e60d5d0a8..769a9c28ee421 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { styled } from '@mui/system';
 import {
   unstable_useForkRef as useForkRef,
   unstable_composeClasses as composeClasses,
@@ -23,6 +24,7 @@ import {
   gridFilterModelSelector,
   gridFilterableColumnLookupSelector,
   GridPinnedColumnPosition,
+  gridClasses,
 } from '@mui/x-data-grid';
 import {
   GridStateColDef,
@@ -34,6 +36,7 @@ import {
   shouldCellShowRightBorder,
 } from '@mui/x-data-grid/internals';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { inputBaseClasses } from '@mui/material/InputBase';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProProcessedProps } from '../../models/dataGridProProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
@@ -69,6 +72,27 @@ type OwnerState = DataGridProProcessedProps & {
   showLeftBorder: boolean;
 };
 
+const StyledInputComponent = styled(GridFilterInputValue, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderFilterInput',
+  overridesResolver: (props, styles) => styles.columnHeaderFilterInput,
+})(({ theme }) => ({
+  flex: 1,
+  '& input[type="date"], & input[type="datetime-local"]': {
+    '&[value=""]:not(:focus)': {
+      color: 'transparent',
+    },
+  },
+  [`& .${inputBaseClasses.input}`]: {
+    fontSize: '14px',
+  },
+  [`.${gridClasses['root--densityCompact']} & .${inputBaseClasses.input}`]: {
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+    height: 23,
+  },
+}));
+
 const useUtilityClasses = (ownerState: OwnerState) => {
   const { colDef, classes, showRightBorder, showLeftBorder, pinnedPosition } = ownerState;
 
@@ -85,15 +109,12 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       pinnedPosition === 'left' && 'columnHeader--pinnedLeft',
       pinnedPosition === 'right' && 'columnHeader--pinnedRight',
     ],
+    input: ['columnHeaderFilterInput'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const INPUT_PROPS = { inputProps: { sx: { fontSize: 14 } } };
-const INPUT_SX = { flex: 1, minWidth: 40 };
-const DATE_INPUT_SX = { [`& input[value=""]:not(:focus)`]: { color: 'transparent' } };
-
 const DEFAULT_INPUT_COMPONENTS: { [key in GridColType]: React.JSXElementConstructor<any> | null } =
   {
     string: GridFilterInputValue,
@@ -332,7 +353,9 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
     >
       {headerFilterComponent}
       {InputComponent && headerFilterComponent === undefined ? (
-        <InputComponent
+        <StyledInputComponent
+          as={InputComponent}
+          className={classes.input}
           apiRef={apiRef}
           item={item}
           inputRef={inputRef}
@@ -360,10 +383,6 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
           size="small"
           disabled={isFilterReadOnly || isNoInputOperator}
           tabIndex={-1}
-          sx={[
-            INPUT_SX,
-            colDef.type === 'date' || colDef.type === 'dateTime' ? DATE_INPUT_SX : undefined,
-          ]}
           headerFilterMenu={
             <GridHeaderFilterMenuContainer
               operators={filterOperators}
@@ -373,7 +392,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
               applyFilterChanges={apiRef.current.upsertFilterItem}
               headerFilterMenuRef={headerFilterMenuRef}
               buttonRef={buttonRef}
-              isApplied={isApplied}
+              showClearItem={!showClearIcon && isApplied}
               clearFilterItem={clearFilterItem}
             />
           }
@@ -382,7 +401,6 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
               <GridHeaderFilterClearButton onClick={clearFilterItem} disabled={isFilterReadOnly} />
             ) : null
           }
-          InputProps={INPUT_PROPS}
           {...(isNoInputOperator ? { value: '' } : {})}
           {...currentOperator?.InputComponentProps}
           {...InputComponentProps}
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
index 19a91f7079c7b..175ef75abc90b 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
@@ -19,7 +19,7 @@ interface GridHeaderFilterMenuProps {
   id: string;
   labelledBy: string;
   target: HTMLElement | null;
-  isApplied: boolean;
+  showClearItem: boolean;
   clearFilterItem: () => void;
 }
 
@@ -32,7 +32,7 @@ function GridHeaderFilterMenu({
   item,
   id,
   labelledBy,
-  isApplied,
+  showClearItem,
   clearFilterItem,
 }: GridHeaderFilterMenuProps) {
   const apiRef = useGridApiContext();
@@ -65,7 +65,7 @@ function GridHeaderFilterMenu({
         id={id}
         onKeyDown={handleListKeyDown}
       >
-        {isApplied && [
+        {showClearItem && [
           <rootProps.slots.baseMenuItem
             key="filter-menu-clear-filter"
             iconStart={<rootProps.slots.columnMenuClearIcon fontSize="small" />}
@@ -78,7 +78,7 @@ function GridHeaderFilterMenu({
           </rootProps.slots.baseMenuItem>,
           <rootProps.slots.baseDivider key="filter-menu-divider" />,
         ]}
-        {operators.map((op, i) => {
+        {operators.map((op) => {
           const selected = op.value === item.operator;
           const label =
             op?.headerLabel ??
@@ -116,7 +116,6 @@ GridHeaderFilterMenu.propTypes = {
   clearFilterItem: PropTypes.func.isRequired,
   field: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
-  isApplied: PropTypes.bool.isRequired,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -137,6 +136,7 @@ GridHeaderFilterMenu.propTypes = {
       value: PropTypes.string.isRequired,
     }),
   ).isRequired,
+  showClearItem: PropTypes.bool.isRequired,
   target: HTMLElementType,
 } as any;
 
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
index ca7cd2d050f91..66698075a388e 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
@@ -21,7 +21,7 @@ function GridHeaderFilterMenuContainer(props: {
   headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
   buttonRef: React.Ref<HTMLButtonElement>;
   disabled?: boolean;
-  isApplied?: boolean;
+  showClearItem?: boolean;
   clearFilterItem?: () => void;
 }) {
   const {
@@ -31,7 +31,7 @@ function GridHeaderFilterMenuContainer(props: {
     buttonRef,
     headerFilterMenuRef,
     disabled = false,
-    isApplied = false,
+    showClearItem,
     clearFilterItem,
     ...others
   } = props;
@@ -73,7 +73,11 @@ function GridHeaderFilterMenuContainer(props: {
         sx={SX}
         {...rootProps.slotProps?.baseIconButton}
       >
-        <rootProps.slots.baseBadge color="primary" variant="dot" badgeContent={isApplied ? 1 : 0}>
+        <rootProps.slots.baseBadge
+          color="primary"
+          variant="dot"
+          badgeContent={showClearItem ? 1 : 0}
+        >
           <rootProps.slots.openFilterButtonIcon fontSize="inherit" />
         </rootProps.slots.baseBadge>
       </rootProps.slots.baseIconButton>
@@ -85,8 +89,8 @@ function GridHeaderFilterMenuContainer(props: {
         operators={operators}
         labelledBy={buttonId!}
         id={menuId!}
-        isApplied={isApplied}
         clearFilterItem={clearFilterItem}
+        showClearItem={showClearItem}
         {...others}
       />
     </React.Fragment>
@@ -106,7 +110,6 @@ GridHeaderFilterMenuContainer.propTypes = {
   headerFilterMenuRef: PropTypes.shape({
     current: PropTypes.object,
   }).isRequired,
-  isApplied: PropTypes.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -125,6 +128,7 @@ GridHeaderFilterMenuContainer.propTypes = {
       value: PropTypes.string.isRequired,
     }),
   ).isRequired,
+  showClearItem: PropTypes.bool,
 } as any;
 
 export { GridHeaderFilterMenuContainer };
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index d8bbbf0e11e23..8ec746d6550b2 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -349,7 +349,10 @@ export const GridRootStyles = styled('div', {
       alignItems: 'center',
     },
     [`& .${c['columnHeader--filter']}`]: {
-      paddingTop: 4,
+      paddingTop: 8,
+      paddingBottom: 4,
+      paddingRight: 5,
+      minHeight: 'min-content',
       overflow: 'hidden',
     },
     [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
index 5800dac2fc552..d8fc902e2c037 100644
--- a/packages/x-data-grid/src/constants/gridClasses.ts
+++ b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -173,7 +173,10 @@ export interface GridClasses {
    * @ignore - do not document.
    */
   'columnHeader--siblingFocused': string;
-
+  /**
+   * Styles applied to the header filter input element.
+   */
+  columnHeaderFilterInput: string;
   /**
    * Styles applied to the header checkbox cell element.
    */
@@ -733,6 +736,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'columnHeader--lastUnpinned',
   'columnHeader--siblingFocused',
   'columnHeader--filter',
+  'columnHeaderFilterInput',
   'columnHeaderCheckbox',
   'columnHeaderDraggableContainer',
   'columnHeaderTitle',
diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
index 684d43defec7f..c29918e30bbf7 100644
--- a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
+++ b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
@@ -75,7 +75,6 @@ const EMPTY_DIMENSIONS: GridDimensions = {
   topContainerHeight: 0,
   bottomContainerHeight: 0,
 };
-const MIN_HEADER_FILTER_HEIGHT = 52;
 
 export const dimensionsStateInitializer: GridStateInitializer<RootProps> = (state) => {
   const dimensions = EMPTY_DIMENSIONS;
@@ -111,9 +110,8 @@ export function useGridDimensions(
   const groupHeaderHeight = Math.floor(
     (props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor,
   );
-  const headerFilterHeight = Math.max(
-    Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor),
-    MIN_HEADER_FILTER_HEIGHT,
+  const headerFilterHeight = Math.floor(
+    (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor,
   );
   const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
   const headersTotalHeight = getTotalHeaderHeight(apiRef, props);

From 0d13012943518fb515cfbac619dc4e955bfe2232 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Thu, 2 Jan 2025 15:47:33 +0000
Subject: [PATCH 10/16] update headerFilterHeight test

---
 .../x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
index ea343ab78f6c6..f778df0de5064 100644
--- a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
@@ -139,18 +139,17 @@ describeSkipIf(isJSDOM)('<DataGridPro /> - Layout', () => {
 
   it('should work with `headerFilterHeight` prop', () => {
     render(
-      <div style={{ width: 300, height: 300 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', width: 300 }}>
         <DataGridPro
           {...baselineProps}
-          autoHeight
           headerFilters
           columnHeaderHeight={20}
-          headerFilterHeight={32}
+          headerFilterHeight={60}
           rowHeight={20}
         />
       </div>,
     );
-    expect(grid('main')!.clientHeight).to.equal(baselineProps.rows.length * 20 + 20 + 32);
+    expect(grid('main')!.clientHeight).to.equal(baselineProps.rows.length * 20 + 20 + 60);
   });
 
   it('should support translations in the theme', () => {

From 00e0397c8b9216f6431cd32b979cb51004b71c83 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Thu, 2 Jan 2025 16:04:16 +0000
Subject: [PATCH 11/16] clarify doc

---
 docs/data/data-grid/filtering/header-filters.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/data-grid/filtering/header-filters.md b/docs/data/data-grid/filtering/header-filters.md
index dd437e3b1762e..5f2f3fcfe478f 100644
--- a/docs/data/data-grid/filtering/header-filters.md
+++ b/docs/data/data-grid/filtering/header-filters.md
@@ -26,7 +26,7 @@ You can disable the default filter panel using `disableColumnFilter` prop and on
 
 ## Inline clear button
 
-The clear button is within the header filter menu by default. To display the clear button inline instead, set `slotProps.headerFilterCell.showClearIcon` to `true`.
+The clear button is within the header filter menu by default. To display the clear button in the header filter cell instead, set `slotProps.headerFilterCell.showClearIcon` to `true`.
 
 Type in the one of the header filter inputs in the demo below to see the inline clear button.
 

From 248dcfbd8e3a8e05522264dca2787627b860aa42 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Wed, 8 Jan 2025 15:32:29 +0000
Subject: [PATCH 12/16] update migration guide

---
 .../migration-data-grid-v7/migration-data-grid-v7.md          | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
index 85b8dfa37d6c5..2ecfcdefb7386 100644
--- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
+++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -99,6 +99,10 @@ Below are described the steps you need to make to migrate from v7 to v8.
 
 - `ariaV8` experimental flag is removed. It's now the default behavior.
 
+### Filtering
+
+- The clear button in header filter cells has moved to the header filter menu. Use `slotProps={{ headerFilterCell: { showClearIcon: true } }}` to restore the clear button in the cell.
+
 <!-- ### Editing
 
 TBD

From 4f1980e650383fe0e26337acf2e938dc02e758d1 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Wed, 8 Jan 2025 16:17:34 +0000
Subject: [PATCH 13/16] show clear button with initial filter model

---
 .../HeaderFilteringInlineClearDataGridPro.tsx      | 14 ++++++++++----
 docs/data/data-grid/filtering/header-filters.md    |  2 --
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
index 3a7eb2b2c732d..cd673e7be77e1 100644
--- a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
@@ -2,10 +2,13 @@ import * as React from 'react';
 import { DataGridPro } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
+const VISIBLE_FIELDS = ['name', 'rating', 'website'];
+
 export default function HeaderFilteringInlineClearDataGridPro() {
   const { data, loading } = useDemoData({
     dataSet: 'Employee',
     rowLength: 100,
+    visibleFields: VISIBLE_FIELDS,
   });
 
   return (
@@ -15,10 +18,13 @@ export default function HeaderFilteringInlineClearDataGridPro() {
         loading={loading}
         initialState={{
           ...data.initialState,
-          columns: {
-            columnVisibilityModel: {
-              avatar: false,
-              id: false,
+          filter: {
+            filterModel: {
+              items: [
+                { field: 'name', operator: 'contains', value: 'a' },
+                { field: 'website', operator: 'contains', value: 'http://' },
+                { field: 'rating', operator: '>', value: 2 },
+              ],
             },
           },
         }}
diff --git a/docs/data/data-grid/filtering/header-filters.md b/docs/data/data-grid/filtering/header-filters.md
index 5f2f3fcfe478f..264c6f1d9164a 100644
--- a/docs/data/data-grid/filtering/header-filters.md
+++ b/docs/data/data-grid/filtering/header-filters.md
@@ -28,8 +28,6 @@ You can disable the default filter panel using `disableColumnFilter` prop and on
 
 The clear button is within the header filter menu by default. To display the clear button in the header filter cell instead, set `slotProps.headerFilterCell.showClearIcon` to `true`.
 
-Type in the one of the header filter inputs in the demo below to see the inline clear button.
-
 {{"demo": "HeaderFilteringInlineClearDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
 ## Customize header filters

From 760b4785b6e7a62eb507c7d6a06f98fec02d9198 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Wed, 8 Jan 2025 16:31:20 +0000
Subject: [PATCH 14/16] fix disabled state

---
 .../src/components/panel/filterPanel/GridFilterInputDate.tsx    | 2 +-
 .../src/components/panel/filterPanel/GridFilterInputValue.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
index 80d2c509d1233..a0d68ba77c580 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
@@ -98,6 +98,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
         onChange={onFilterChange}
         variant="standard"
         type={type || 'text'}
+        disabled={disabled}
         InputLabelProps={{
           shrink: true,
         }}
@@ -106,7 +107,6 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
           endAdornment: applying ? (
             <rootProps.slots.loadIcon fontSize="small" color="action" />
           ) : null,
-          disabled,
           ...InputProps,
           inputProps: {
             max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
index b5e0a54cb285c..78fe5dbaf3c64 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -82,13 +82,13 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
         onChange={onFilterChange}
         variant={variant}
         type={type || 'text'}
+        disabled={disabled}
         InputProps={{
           endAdornment: applying ? (
             <rootProps.slots.baseInputAdornment position="end">
               <rootProps.slots.loadIcon fontSize="small" color="action" />
             </rootProps.slots.baseInputAdornment>
           ) : null,
-          disabled,
           ...InputProps,
           inputProps: {
             tabIndex,

From 585e71df6d7e94540bb4d43986c0101992c92434 Mon Sep 17 00:00:00 2001
From: Bilal Shafi <bilalshafidev@gmail.com>
Date: Mon, 13 Jan 2025 13:57:50 +0300
Subject: [PATCH 15/16] Run script

---
 .../HeaderFilteringInlineClearDataGridPro.js       | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
index 3a7eb2b2c732d..cd673e7be77e1 100644
--- a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
+++ b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
@@ -2,10 +2,13 @@ import * as React from 'react';
 import { DataGridPro } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
+const VISIBLE_FIELDS = ['name', 'rating', 'website'];
+
 export default function HeaderFilteringInlineClearDataGridPro() {
   const { data, loading } = useDemoData({
     dataSet: 'Employee',
     rowLength: 100,
+    visibleFields: VISIBLE_FIELDS,
   });
 
   return (
@@ -15,10 +18,13 @@ export default function HeaderFilteringInlineClearDataGridPro() {
         loading={loading}
         initialState={{
           ...data.initialState,
-          columns: {
-            columnVisibilityModel: {
-              avatar: false,
-              id: false,
+          filter: {
+            filterModel: {
+              items: [
+                { field: 'name', operator: 'contains', value: 'a' },
+                { field: 'website', operator: 'contains', value: 'http://' },
+                { field: 'rating', operator: '>', value: 2 },
+              ],
             },
           },
         }}

From 5f960b18f7c10d3e420e5e57d7b981a116a733ee Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Wed, 15 Jan 2025 16:46:57 +0000
Subject: [PATCH 16/16] render label instead of disabled input for no-input
 filter operators

---
 .../CustomHeaderFilterOperatorDataGridPro.js  |  10 +-
 .../CustomHeaderFilterOperatorDataGridPro.tsx |  10 +-
 .../HeaderFilteringInlineClearDataGridPro.js  |   8 ++
 .../HeaderFilteringInlineClearDataGridPro.tsx |   8 ++
 .../x/api/data-grid/data-grid-premium.json    |   6 +
 docs/pages/x/api/data-grid/data-grid-pro.json |   6 +
 docs/pages/x/api/data-grid/data-grid.json     |   6 +
 .../data-grid-premium/data-grid-premium.json  |   4 +
 .../data-grid-pro/data-grid-pro.json          |   4 +
 .../data-grid/data-grid/data-grid.json        |   4 +
 .../headerFiltering/GridHeaderFilterCell.tsx  | 134 +++++++++++-------
 .../GridHeaderFilterClearButton.tsx           |   3 -
 .../GridHeaderFilterMenuContainer.tsx         |   3 -
 .../components/containers/GridRootStyles.ts   |   2 +-
 .../x-data-grid/src/constants/gridClasses.ts  |   5 +
 15 files changed, 151 insertions(+), 62 deletions(-)

diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
index 6c6def12a2e40..72734ad1021fb 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
@@ -23,13 +23,21 @@ function RatingInputValue(props) {
   };
 
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
       <Rating
         name="custom-rating-filter-operator"
         value={Number(item.value)}
         onChange={handleFilterChange}
         precision={0.5}
         ref={ratingRef}
+        sx={{ mr: 0.5 }}
       />
       {headerFilterMenu}
       {clearButton}
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
index 9725cf6185bc6..66df4353255b4 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
@@ -32,13 +32,21 @@ function RatingInputValue(
   };
 
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
       <Rating
         name="custom-rating-filter-operator"
         value={Number(item.value)}
         onChange={handleFilterChange}
         precision={0.5}
         ref={ratingRef}
+        sx={{ mr: 0.5 }}
       />
       {headerFilterMenu}
       {clearButton}
diff --git a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
index cd673e7be77e1..e02a8bd8e2a5e 100644
--- a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
+++ b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
@@ -11,10 +11,18 @@ export default function HeaderFilteringInlineClearDataGridPro() {
     visibleFields: VISIBLE_FIELDS,
   });
 
+  const columns = React.useMemo(() => {
+    return data.columns.map((col) => ({
+      ...col,
+      minWidth: 200,
+    }));
+  }, [data.columns]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGridPro
         {...data}
+        columns={columns}
         loading={loading}
         initialState={{
           ...data.initialState,
diff --git a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
index cd673e7be77e1..e02a8bd8e2a5e 100644
--- a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
@@ -11,10 +11,18 @@ export default function HeaderFilteringInlineClearDataGridPro() {
     visibleFields: VISIBLE_FIELDS,
   });
 
+  const columns = React.useMemo(() => {
+    return data.columns.map((col) => ({
+      ...col,
+      minWidth: 200,
+    }));
+  }, [data.columns]);
+
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGridPro
         {...data}
+        columns={columns}
         loading={loading}
         initialState={{
           ...data.initialState,
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 3352b7171f245..af5816851a0e0 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -1448,6 +1448,12 @@
       "description": "Styles applied to the header filter input element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterOperatorLabel",
+      "className": "MuiDataGridPremium-columnHeaderFilterOperatorLabel",
+      "description": "Styles applied to the header filter operator label element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGridPremium-columnHeaderTitle",
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
index 1ddbafc1c6b9c..c57b6d2feb2b3 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -1353,6 +1353,12 @@
       "description": "Styles applied to the header filter input element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterOperatorLabel",
+      "className": "MuiDataGridPro-columnHeaderFilterOperatorLabel",
+      "description": "Styles applied to the header filter operator label element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGridPro-columnHeaderTitle",
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index b6aa553ed0fa8..dea2d9a362a7b 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -1227,6 +1227,12 @@
       "description": "Styles applied to the header filter input element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterOperatorLabel",
+      "className": "MuiDataGrid-columnHeaderFilterOperatorLabel",
+      "description": "Styles applied to the header filter operator label element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGrid-columnHeaderTitle",
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index 64a1d3ff0c450..4eabd611df028 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -887,6 +887,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the header filter input element"
     },
+    "columnHeaderFilterOperatorLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter operator label element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 4e369cfefe268..44a830fa6e680 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -825,6 +825,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the header filter input element"
     },
+    "columnHeaderFilterOperatorLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter operator label element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 633ab8e55cf6e..eb5095ab30708 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -699,6 +699,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the header filter input element"
     },
+    "columnHeaderFilterOperatorLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter operator label element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 87fd172984c28..e7b725fbb69da 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import {
   unstable_useForkRef as useForkRef,
   unstable_composeClasses as composeClasses,
@@ -75,9 +75,10 @@ type OwnerState = DataGridProProcessedProps & {
 const StyledInputComponent = styled(GridFilterInputValue, {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderFilterInput',
-  overridesResolver: (props, styles) => styles.columnHeaderFilterInput,
 })(({ theme }) => ({
   flex: 1,
+  marginRight: theme.spacing(0.5),
+  marginBottom: theme.spacing(-0.25),
   '& input[type="number"], & input[type="date"], & input[type="datetime-local"]': {
     '&[value=""]:not(:focus)': {
       color: 'transparent',
@@ -93,6 +94,18 @@ const StyledInputComponent = styled(GridFilterInputValue, {
   },
 }));
 
+const OperatorLabel = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderFilterOperatorLabel',
+})(({ theme }) => ({
+  flex: 1,
+  marginRight: theme.spacing(0.5),
+  color: theme.palette.text.secondary,
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+}));
+
 const useUtilityClasses = (ownerState: OwnerState) => {
   const { colDef, classes, showRightBorder, showLeftBorder, pinnedPosition } = ownerState;
 
@@ -110,6 +123,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       pinnedPosition === 'right' && 'columnHeader--pinnedRight',
     ],
     input: ['columnHeaderFilterInput'],
+    operatorLabel: ['columnHeaderFilterOperatorLabel'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -336,6 +350,25 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
   const isApplied = item?.value !== undefined || isNoInputOperator;
   const isFilterActive = isApplied || hasFocus;
 
+  const headerFilterMenu = (
+    <GridHeaderFilterMenuContainer
+      operators={filterOperators}
+      item={item}
+      field={colDef.field}
+      disabled={isFilterReadOnly}
+      applyFilterChanges={apiRef.current.upsertFilterItem}
+      headerFilterMenuRef={headerFilterMenuRef}
+      buttonRef={buttonRef}
+      showClearItem={!showClearIcon && isApplied}
+      clearFilterItem={clearFilterItem}
+    />
+  );
+
+  const clearButton =
+    showClearIcon && isApplied ? (
+      <GridHeaderFilterClearButton onClick={clearFilterItem} disabled={isFilterReadOnly} />
+    ) : null;
+
   return (
     <div
       className={clsx(classes.root, headerClassName)}
@@ -352,59 +385,54 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
       ref={handleRef}
     >
       {headerFilterComponent}
-      {InputComponent && headerFilterComponent === undefined ? (
-        <StyledInputComponent
-          as={InputComponent}
-          className={classes.input}
-          apiRef={apiRef}
-          item={item}
-          inputRef={inputRef}
-          applyValue={apiRef.current.upsertFilterItem}
-          onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}
-          onBlur={(event: React.FocusEvent) => {
-            apiRef.current.stopHeaderFilterEditMode();
-            // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
-            if (!event.relatedTarget?.className.includes('columnHeader')) {
-              apiRef.current.setState((state) => ({
-                ...state,
-                focus: {
-                  cell: null,
-                  columnHeader: null,
-                  columnHeaderFilter: null,
-                  columnGroupHeader: null,
-                },
-              }));
-            }
-          }}
-          label={capitalize(label)}
-          placeholder=""
-          isFilterActive={isFilterActive}
-          variant="outlined"
-          size="small"
-          disabled={isFilterReadOnly || isNoInputOperator}
-          tabIndex={-1}
-          headerFilterMenu={
-            <GridHeaderFilterMenuContainer
-              operators={filterOperators}
+      {headerFilterComponent === undefined ? (
+        <React.Fragment>
+          {isNoInputOperator ? (
+            <React.Fragment>
+              <OperatorLabel className={classes.operatorLabel}>{label}</OperatorLabel>
+              {clearButton}
+              {headerFilterMenu}
+            </React.Fragment>
+          ) : null}
+          {InputComponent && !isNoInputOperator ? (
+            <StyledInputComponent
+              as={InputComponent}
+              className={classes.input}
+              apiRef={apiRef}
               item={item}
-              field={colDef.field}
-              disabled={isFilterReadOnly}
-              applyFilterChanges={apiRef.current.upsertFilterItem}
-              headerFilterMenuRef={headerFilterMenuRef}
-              buttonRef={buttonRef}
-              showClearItem={!showClearIcon && isApplied}
-              clearFilterItem={clearFilterItem}
+              inputRef={inputRef}
+              applyValue={apiRef.current.upsertFilterItem}
+              onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}
+              onBlur={(event: React.FocusEvent) => {
+                apiRef.current.stopHeaderFilterEditMode();
+                // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
+                if (!event.relatedTarget?.className.includes('columnHeader')) {
+                  apiRef.current.setState((state) => ({
+                    ...state,
+                    focus: {
+                      cell: null,
+                      columnHeader: null,
+                      columnHeaderFilter: null,
+                      columnGroupHeader: null,
+                    },
+                  }));
+                }
+              }}
+              label={capitalize(label)}
+              placeholder=""
+              isFilterActive={isFilterActive}
+              variant="outlined"
+              size="small"
+              disabled={isFilterReadOnly || isNoInputOperator}
+              tabIndex={-1}
+              headerFilterMenu={headerFilterMenu}
+              clearButton={clearButton}
+              {...(isNoInputOperator ? { value: '' } : {})}
+              {...currentOperator?.InputComponentProps}
+              {...InputComponentProps}
             />
-          }
-          clearButton={
-            showClearIcon && isApplied ? (
-              <GridHeaderFilterClearButton onClick={clearFilterItem} disabled={isFilterReadOnly} />
-            ) : null
-          }
-          {...(isNoInputOperator ? { value: '' } : {})}
-          {...currentOperator?.InputComponentProps}
-          {...InputComponentProps}
-        />
+          ) : null}
+        </React.Fragment>
       ) : null}
     </div>
   );
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
index b474abaef1660..317eab72d11b9 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
@@ -6,8 +6,6 @@ type BaseIconButtonProps = GridSlotProps['baseIconButton'];
 
 interface GridHeaderFilterClearIconProps extends BaseIconButtonProps {}
 
-const STYLE = { marginLeft: '2px' };
-
 function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
   const rootProps = useGridRootProps();
   return (
@@ -15,7 +13,6 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      style={STYLE}
       {...rootProps.slotProps?.baseIconButton}
       {...props}
     >
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
index aaef372b61001..4195fd228187a 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
@@ -11,8 +11,6 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-const STYLE = { marginLeft: '2px' };
-
 function GridHeaderFilterMenuContainer(props: {
   operators: GridFilterOperator<any, any, any>[];
   field: GridColDef['field'];
@@ -69,7 +67,6 @@ function GridHeaderFilterMenuContainer(props: {
         tabIndex={-1}
         size="small"
         onClick={handleClick}
-        style={STYLE}
         disabled={disabled}
         {...rootProps.slotProps?.baseIconButton}
       >
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index cafa496af1ccc..0e622fdc59898 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -305,7 +305,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['columnHeader--filter']}`]: {
       paddingTop: 8,
-      paddingBottom: 4,
+      paddingBottom: 8,
       paddingRight: 5,
       minHeight: 'min-content',
       overflow: 'hidden',
diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
index d8fc902e2c037..56414374fd728 100644
--- a/packages/x-data-grid/src/constants/gridClasses.ts
+++ b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -177,6 +177,10 @@ export interface GridClasses {
    * Styles applied to the header filter input element.
    */
   columnHeaderFilterInput: string;
+  /**
+   * Styles applied to the header filter operator label element.
+   */
+  columnHeaderFilterOperatorLabel: string;
   /**
    * Styles applied to the header checkbox cell element.
    */
@@ -737,6 +741,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'columnHeader--siblingFocused',
   'columnHeader--filter',
   'columnHeaderFilterInput',
+  'columnHeaderFilterOperatorLabel',
   'columnHeaderCheckbox',
   'columnHeaderDraggableContainer',
   'columnHeaderTitle',