@mui/x-data-grid 6.3.1 → 6.5.0

package/legacy/colDef/gridBooleanColDef.js

@@ -9,6 +9,22 @@ function gridBooleanFormatter(_ref) {
     api = _ref.api;
   return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
 }
+var stringToBoolean = function stringToBoolean(value) {
+  switch (value.toLowerCase().trim()) {
+    case 'true':
+    case 'yes':
+    case '1':
+      return true;
+    case 'false':
+    case 'no':
+    case '0':
+    case 'null':
+    case 'undefined':
+      return false;
+    default:
+      return undefined;
+  }
+};
 export var GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'boolean',
   align: 'center',
@@ -20,5 +36,9 @@ export var GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridBooleanOperators(),
   getApplyQuickFilterFn: undefined,
   // @ts-ignore
-  aggregable: false
+  aggregable: false,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return stringToBoolean(value);
+  }
 });

package/legacy/colDef/gridDateColDef.js

@@ -48,7 +48,11 @@ export var GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return new Date(value);
+  }
 });
 export var GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'dateTime',
@@ -56,5 +60,9 @@ export var GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value) {
+    return new Date(value);
+  }
 });

package/legacy/colDef/gridNumericOperators.js

@@ -17,7 +17,6 @@ export var getGridNumericQuickFilterFn = function getGridNumericQuickFilterFn(va
 };
 export var getGridNumericOperators = function getGridNumericOperators() {
   return [{
-    label: '=',
     value: '=',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
       if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -33,7 +32,6 @@ export var getGridNumericOperators = function getGridNumericOperators() {
       type: 'number'
     }
   }, {
-    label: '!=',
     value: '!=',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
       if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -49,7 +47,6 @@ export var getGridNumericOperators = function getGridNumericOperators() {
       type: 'number'
     }
   }, {
-    label: '>',
     value: '>',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
       if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -68,7 +65,6 @@ export var getGridNumericOperators = function getGridNumericOperators() {
       type: 'number'
     }
   }, {
-    label: '>=',
     value: '>=',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
       if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -87,7 +83,6 @@ export var getGridNumericOperators = function getGridNumericOperators() {
       type: 'number'
     }
   }, {
-    label: '<',
     value: '<',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
       if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -106,7 +101,6 @@ export var getGridNumericOperators = function getGridNumericOperators() {
       type: 'number'
     }
   }, {
-    label: '<=',
     value: '<=',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
       if (filterItem.value == null || Number.isNaN(filterItem.value)) {

package/legacy/colDef/gridSingleSelectColDef.js

@@ -52,5 +52,25 @@ export var GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     return valueOption ? colDef.getOptionLabel(valueOption) : '';
   },
   renderEditCell: renderEditSingleSelectCell,
-  filterOperators: getGridSingleSelectOperators()
+  filterOperators: getGridSingleSelectOperators(),
+  // @ts-ignore
+  pastedValueParser: function pastedValueParser(value, params) {
+    var colDef = params.colDef;
+    var colDefValueOptions = colDef.valueOptions;
+    var valueOptions = typeof colDefValueOptions === 'function' ? colDefValueOptions({
+      field: colDef.field
+    }) : colDefValueOptions || [];
+    var getOptionValue = colDef.getOptionValue;
+    var valueOption = valueOptions.find(function (option) {
+      if (getOptionValue(option) === value) {
+        return true;
+      }
+      return false;
+    });
+    if (valueOption) {
+      return value;
+    }
+    // do not paste the value if it is not in the valueOptions
+    return undefined;
+  }
 });

package/legacy/components/base/GridBody.js

@@ -91,7 +91,8 @@ function GridBody(props) {
   apiRef.current.register('private', {
     columnHeadersContainerElementRef: columnsContainerRef,
     columnHeadersElementRef: columnHeadersRef,
-    virtualScrollerRef: virtualScrollerRef
+    virtualScrollerRef: virtualScrollerRef,
+    mainElementRef: rootRef
   });
   var hasDimensions = !!apiRef.current.getRootDimensions();
   return /*#__PURE__*/_jsxs(GridMainContainer, {

package/legacy/components/cell/GridEditInputCell.js

@@ -120,7 +120,10 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
     onChange: handleChange,
-    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {}) : undefined
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+      fontSize: "small",
+      color: "action"
+    }) : undefined
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {

package/legacy/components/containers/GridRootStyles.js

@@ -39,6 +39,7 @@ export var GridRootStyles = styled('div', {
     outline: 'none',
     height: '100%',
     display: 'flex',
+    overflow: 'hidden',
     flexDirection: 'column',
     overflowAnchor: 'none'
   }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({

package/legacy/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,18 +1,30 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
+var _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) {
+var BooleanOperatorContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%'
+});
+function GridFilterInputBoolean(props) {
   var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
   var item = props.item,
     applyValue = props.applyValue,
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
+    headerFilterMenu = props.headerFilterMenu,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
+    tabIndex = props.tabIndex,
+    labelProp = props.label,
     others = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(item.value || ''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -34,39 +46,71 @@ export function GridFilterInputBoolean(props) {
   React.useEffect(function () {
     setFilterValueState(item.value || '');
   }, [item.value]);
-  var 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, {
+  var 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: 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/legacy/components/panel/filterPanel/GridFilterInputDate.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps"];
+var _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';
@@ -16,6 +16,11 @@ function GridFilterInputDate(props) {
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
     InputProps = props.InputProps,
+    headerFilterMenu = props.headerFilterMenu,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
+    tabIndex = props.tabIndex,
+    disabled = props.disabled,
     other = _objectWithoutProperties(props, _excluded);
   var filterTimeout = React.useRef();
   var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
@@ -51,6 +56,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'),
@@ -62,11 +68,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: 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: tabIndex
       }, InputProps == null ? void 0 : InputProps.inputProps)
     })
   }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField));
@@ -80,7 +94,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/legacy/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -4,7 +4,6 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "col
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-import Chip from '@mui/material/Chip';
 import { unstable_useId as useId } from '@mui/utils';
 import { isSingleSelectColDef } from './filterPanelUtils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
@@ -108,7 +107,7 @@ function GridFilterInputMultipleSingleSelect(props) {
     getOptionLabel: getOptionLabel,
     renderTags: function renderTags(value, getTagProps) {
       return value.map(function (option, index) {
-        return /*#__PURE__*/_jsx(Chip, _extends({
+        return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
           variant: "outlined",
           size: "small",
           label: getOptionLabel(option)

package/legacy/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -6,7 +6,6 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "col
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
-import Chip from '@mui/material/Chip';
 import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,7 +58,7 @@ function GridFilterInputMultipleValue(props) {
     onChange: handleChange,
     renderTags: function renderTags(value, getTagProps) {
       return value.map(function (option, index) {
-        return /*#__PURE__*/_jsx(Chip, _extends({
+        return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
           variant: "outlined",
           size: "small",
           label: option

package/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -2,10 +2,11 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
+var _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 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
     }), label);
   });
 };
+var 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;
   var item = props.item,
@@ -42,6 +48,12 @@ function GridFilterInputSingleSelect(props) {
     focusElementRef = props.focusElementRef,
     getOptionLabelProp = props.getOptionLabel,
     getOptionValueProp = props.getOptionValue,
+    placeholder = props.placeholder,
+    tabIndex = props.tabIndex,
+    labelProp = props.label,
+    headerFilterMenu = props.headerFilterMenu,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
     others = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -102,36 +114,40 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  var 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: getOptionLabel,
-        getOptionValue: getOptionValue,
-        isSelectNative: isSelectNative,
-        baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
-      })
-    }))]
+  var 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,
+        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: 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: getOptionLabel,
+          getOptionValue: getOptionValue,
+          isSelectNative: isSelectNative,
+          baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
+        })
+      }))]
+    }), clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -143,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.
@@ -156,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/legacy/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -15,6 +15,12 @@ function GridFilterInputValue(props) {
     type = props.type,
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
+    tabIndex = props.tabIndex,
+    disabled = props.disabled,
+    headerFilterMenu = props.headerFilterMenu,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
+    InputProps = props.InputProps,
     others = _objectWithoutProperties(props, _excluded);
   var filterTimeout = React.useRef();
   var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
@@ -49,9 +55,6 @@ function GridFilterInputValue(props) {
     var itemValue = (_item$value2 = item.value) != null ? _item$value2 : '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  var InputProps = applying ? {
-    endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
-  } : others.InputProps;
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -60,7 +63,20 @@ function GridFilterInputValue(props) {
     onChange: onFilterChange,
     variant: "standard",
     type: type || 'text',
-    InputProps: InputProps,
+    InputProps: _extends({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, headerFilterMenu && isFilterActive ? {
+      startAdornment: headerFilterMenu
+    } : {}, {
+      disabled: disabled
+    }, InputProps, {
+      inputProps: _extends({
+        tabIndex: tabIndex
+      }, InputProps == null ? void 0 : InputProps.inputProps)
+    }),
     InputLabelProps: {
       shrink: true
     },
@@ -76,7 +92,14 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.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/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -218,4 +218,4 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-export { GridFilterPanel };
+export { GridFilterPanel, getGridFilter };

package/legacy/components/panel/filterPanel/index.js

@@ -2,7 +2,8 @@ export * from './GridFilterForm';
 export * from './GridFilterInputValue';
 export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
+export * from './GridFilterInputBoolean';
 export * from './GridFilterInputValueProps';
-export * from './GridFilterPanel';
+export { GridFilterPanel } from './GridFilterPanel';
 export * from './GridFilterInputMultipleValue';
 export * from './GridFilterInputMultipleSingleSelect';