@mui/x-data-grid 6.4.0 → 6.6.0

package/components/containers/GridRoot.js

@@ -64,9 +64,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    "aria-multiselectable": !rootProps.disableMultipleRowSelection,
-    "aria-label": rootProps['aria-label'],
-    "aria-labelledby": rootProps['aria-labelledby']
+    "aria-multiselectable": !rootProps.disableMultipleRowSelection
   }, other, {
     children: children
   }));

package/components/index.d.ts

@@ -16,4 +16,3 @@ export * from './GridPagination';
 export * from './GridRowCount';
 export * from './GridRow';
 export * from './GridSelectedRowCount';
-export * from './GridScrollArea';

package/components/index.js

@@ -15,5 +15,4 @@ export * from './GridNoRowsOverlay';
 export * from './GridPagination';
 export * from './GridRowCount';
 export * from './GridRow';
-export * from './GridSelectedRowCount';
-export * from './GridScrollArea';
+export * from './GridSelectedRowCount';

package/components/menu/GridMenu.d.ts

@@ -11,7 +11,7 @@ export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children
     onExited?: GrowProps['onExited'];
     children: React.ReactNode;
 }
-declare function GridMenu(props: GridMenuProps): JSX.Element;
+declare function GridMenu(props: GridMenuProps): React.JSX.Element;
 declare namespace GridMenu {
     var propTypes: any;
 }

package/components/menu/columnMenu/GridColumnHeaderMenu.d.ts

@@ -10,7 +10,7 @@ export interface GridColumnHeaderMenuProps {
     target: HTMLElement | null;
     onExited?: GridMenuProps['onExited'];
 }
-declare function GridColumnHeaderMenu({ columnMenuId, columnMenuButtonId, ContentComponent, contentComponentProps, field, open, target, onExited, }: GridColumnHeaderMenuProps): JSX.Element | null;
+declare function GridColumnHeaderMenu({ columnMenuId, columnMenuButtonId, ContentComponent, contentComponentProps, field, open, target, onExited, }: GridColumnHeaderMenuProps): React.JSX.Element | null;
 declare namespace GridColumnHeaderMenu {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuColumnsItem(props: GridColumnMenuItemProps): JSX.Element;
+declare function GridColumnMenuColumnsItem(props: GridColumnMenuItemProps): React.JSX.Element;
 declare namespace GridColumnMenuColumnsItem {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuFilterItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuFilterItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuFilterItem {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuHideItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuHideItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuHideItem {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuManageItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuManageItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuManageItem {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuSortItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuSortItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuSortItem {
     var propTypes: any;
 }

package/components/panel/GridColumnsPanel.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridPanelWrapperProps } from './GridPanelWrapper';
 import type { GridColDef } from '../../models/colDef/gridColDef';
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {
@@ -16,7 +16,7 @@ export interface GridColumnsPanelProps extends GridPanelWrapperProps {
      */
     getTogglableColumns?: (columns: GridColDef[]) => GridColDef['field'][];
 }
-declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;
+declare function GridColumnsPanel(props: GridColumnsPanelProps): React.JSX.Element;
 declare namespace GridColumnsPanel {
     var propTypes: any;
 }

package/components/panel/GridPanelContent.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare function GridPanelContent(props: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace GridPanelContent {
     var propTypes: any;
 }

package/components/panel/GridPanelFooter.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace GridPanelFooter {
     var propTypes: any;
 }

package/components/panel/GridPanelHeader.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare function GridPanelHeader(props: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace GridPanelHeader {
     var propTypes: any;
 }

package/components/panel/GridPreferencesPanel.js

@@ -17,7 +17,9 @@ export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridP
   return /*#__PURE__*/_jsx(rootProps.slots.panel, _extends({
     ref: ref,
     as: rootProps.slots.basePopper,
-    open: columns.length > 0 && preferencePanelState.open
+    open: columns.length > 0 && preferencePanelState.open,
+    id: preferencePanelState.panelId,
+    "aria-labelledby": preferencePanelState.labelId
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.panel, props, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.basePopper, {
     children: panelContent
   }));

package/components/panel/filterPanel/GridFilterInputBoolean.d.ts

@@ -1,4 +1,17 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
-export declare function GridFilterInputBoolean(props: GridFilterInputValueProps & TextFieldProps): JSX.Element;
+export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldProps & {
+    headerFilterMenu?: React.ReactNode | null;
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
+};
+declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): React.JSX.Element;
+declare namespace GridFilterInputBoolean {
+    var propTypes: any;
+}
+export { GridFilterInputBoolean };

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,18 +1,30 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "label"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
+import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export function GridFilterInputBoolean(props) {
+const BooleanOperatorContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%'
+});
+function GridFilterInputBoolean(props) {
   var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
   const {
       item,
       applyValue,
       apiRef,
-      focusElementRef
+      focusElementRef,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      tabIndex,
+      label: labelProp
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -32,39 +44,71 @@ export function GridFilterInputBoolean(props) {
   React.useEffect(() => {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  const label = apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel, {
-      id: labelId,
-      shrink: true,
-      variant: "standard",
-      children: label
-    })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
-      labelId: labelId,
-      id: selectId,
-      label: label,
-      value: filterValueState,
-      onChange: onFilterChange,
-      variant: "standard",
-      native: isSelectNative,
-      displayEmpty: true,
-      inputProps: {
-        ref: focusElementRef
-      }
-    }, others, baseSelectProps, {
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+  const label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(BooleanOperatorContainer, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel, {
+        id: labelId,
+        shrink: true,
+        variant: "standard",
+        children: label
+      })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
+        labelId: labelId,
+        id: selectId,
+        label: label,
+        value: filterValueState,
+        onChange: onFilterChange,
+        variant: "standard",
         native: isSelectNative,
-        value: "",
-        children: apiRef.current.getLocaleText('filterValueAny')
-      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-        native: isSelectNative,
-        value: "true",
-        children: apiRef.current.getLocaleText('filterValueTrue')
-      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-        native: isSelectNative,
-        value: "false",
-        children: apiRef.current.getLocaleText('filterValueFalse')
+        displayEmpty: true,
+        startAdornment: isFilterActive ? headerFilterMenu : null,
+        inputProps: {
+          ref: focusElementRef,
+          tabIndex
+        }
+      }, others, baseSelectProps, {
+        children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isSelectNative,
+          value: "",
+          children: apiRef.current.getLocaleText('filterValueAny')
+        })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isSelectNative,
+          value: "true",
+          children: apiRef.current.getLocaleText('filterValueTrue')
+        })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isSelectNative,
+          value: "false",
+          children: apiRef.current.getLocaleText('filterValueFalse')
+        }))]
       }))]
-    }))]
+    }), clearButton]
   });
-}
+}
+process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
+  applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any.isRequired
+  })]),
+  headerFilterMenu: PropTypes.node,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: PropTypes.bool,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired
+} : void 0;
+export { GridFilterInputBoolean };

package/components/panel/filterPanel/GridFilterInputDate.d.ts

@@ -1,11 +1,18 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProps & {
     type?: 'date' | 'datetime-local';
+    headerFilterMenu?: React.ReactNode | null;
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
 };
 export declare const SUBMIT_FILTER_DATE_STROKE_TIME = 500;
-declare function GridFilterInputDate(props: GridFilterInputDateProps): JSX.Element;
+declare function GridFilterInputDate(props: GridFilterInputDateProps): React.JSX.Element;
 declare namespace GridFilterInputDate {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputDate.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -15,7 +15,12 @@ function GridFilterInputDate(props) {
       type,
       apiRef,
       focusElementRef,
-      InputProps
+      InputProps,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      tabIndex,
+      disabled
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = React.useRef();
@@ -46,6 +51,7 @@ function GridFilterInputDate(props) {
     setFilterValueState(String(itemValue));
   }, [item.value]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+    fullWidth: true,
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
@@ -57,11 +63,19 @@ function GridFilterInputDate(props) {
       shrink: true
     },
     inputRef: focusElementRef,
-    InputProps: _extends({}, applying ? {
-      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
-    } : {}, InputProps, {
+    InputProps: _extends({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, headerFilterMenu && isFilterActive ? {
+      startAdornment: headerFilterMenu
+    } : {}, {
+      disabled
+    }, InputProps, {
       inputProps: _extends({
-        max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31'
+        max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+        tabIndex
       }, InputProps == null ? void 0 : InputProps.inputProps)
     })
   }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField));
@@ -75,7 +89,14 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([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 (e.g. `isEmpty`)
+   */
+  isFilterActive: PropTypes.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import type { GridSingleSelectColDef, ValueOptions } from '../../../models/colDef/gridColDef';
 export interface GridFilterInputMultipleSingleSelectProps extends Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options' | 'renderInput' | 'onChange' | 'value' | 'id' | 'filterOptions' | 'isOptionEqualToValue' | 'multiple' | 'color' | 'getOptionLabel'>, Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'>, GridFilterInputValueProps {
     type?: 'singleSelect';
 }
-declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): JSX.Element;
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;
 declare namespace GridFilterInputMultipleSingleSelect {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputMultipleValue.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export type GridFilterInputMultipleValueProps = {
     type?: 'text' | 'number';
 } & GridFilterInputValueProps & Omit<AutocompleteProps<string, true, false, true>, 'options' | 'renderInput'>;
-declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): JSX.Element;
+declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;
 declare namespace GridFilterInputMultipleValue {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputSingleSelect.d.ts

@@ -1,11 +1,18 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps & TextFieldProps & Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'> & {
+    headerFilterMenu?: React.ReactNode | null;
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
     type?: 'singleSelect';
 };
-declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): JSX.Element | null;
+declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputSingleSelect {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,9 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "headerFilterMenu", "isFilterActive", "clearButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
+import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
@@ -33,6 +34,11 @@ const renderSingleSelectOptions = ({
     }), label);
   });
 };
+const SingleSelectOperatorContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%'
+});
 function GridFilterInputSingleSelect(props) {
   var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   const {
@@ -42,7 +48,13 @@ function GridFilterInputSingleSelect(props) {
       apiRef,
       focusElementRef,
       getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp
+      getOptionValue: getOptionValueProp,
+      placeholder,
+      tabIndex,
+      label: labelProp,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
@@ -101,36 +113,41 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  const label = apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
-      id: labelId,
-      shrink: true,
-      variant: "standard",
-      children: label
-    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-      id: id,
-      label: label,
-      labelId: labelId,
-      value: filterValueState,
-      onChange: onFilterChange,
-      variant: "standard",
-      type: type || 'text',
-      inputProps: {
-        ref: focusElementRef,
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-      },
-      native: isSelectNative
-    }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
-      children: renderSingleSelectOptions({
-        column: resolvedColumn,
-        OptionComponent: rootProps.slots.baseSelectOption,
-        getOptionLabel,
-        getOptionValue,
-        isSelectNative,
-        baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
-      })
-    }))]
+  const label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
+        id: labelId,
+        htmlFor: id,
+        shrink: true,
+        variant: "standard",
+        children: label
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+        id: id,
+        label: label,
+        labelId: labelId,
+        value: filterValueState,
+        onChange: onFilterChange,
+        startAdornment: isFilterActive ? headerFilterMenu : null,
+        variant: "standard",
+        type: type || 'text',
+        inputProps: {
+          tabIndex,
+          ref: focusElementRef,
+          placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        },
+        native: isSelectNative
+      }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+        children: renderSingleSelectOptions({
+          column: resolvedColumn,
+          OptionComponent: rootProps.slots.baseSelectOption,
+          getOptionLabel,
+          getOptionValue,
+          isSelectNative,
+          baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
+        })
+      }))]
+    }), clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -142,6 +159,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Used to determine the label displayed for a given value option.
@@ -155,6 +173,12 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
    * @returns {string} The value to be used.
    */
   getOptionValue: PropTypes.func,
+  headerFilterMenu: PropTypes.node,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: PropTypes.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -1,11 +1,18 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export declare const SUBMIT_FILTER_STROKE_TIME = 500;
-export interface GridTypeFilterInputValueProps extends GridFilterInputValueProps {
+export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
-}
-declare function GridFilterInputValue(props: GridTypeFilterInputValueProps & TextFieldProps): JSX.Element;
+    headerFilterMenu?: React.ReactNode | null;
+    clearButton?: React.ReactNode | null;
+    /**
+     * It is `true` if the filter either has a value or an operator with no value
+     * required is selected (e.g. `isEmpty`)
+     */
+    isFilterActive?: boolean;
+};
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
 declare namespace GridFilterInputValue {
     var propTypes: any;
 }