@mui/x-data-grid 6.4.0 → 6.5.0

package/material/index.d.ts

@@ -1,67 +1,4 @@
-/// <reference types="react" />
-import MUICheckbox from '@mui/material/Checkbox';
-import MUITextField from '@mui/material/TextField';
-import MUISwitch from '@mui/material/Switch';
-import MUITooltip from '@mui/material/Tooltip';
-import MUISelectOption from './components/MUISelectOption';
-declare const materialSlots: {
-    BaseCheckbox: typeof MUICheckbox;
-    BaseTextField: typeof MUITextField;
-    BaseFormControl: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/FormControl").FormControlTypeMap<{}, "div">>;
-    BaseSelect: (<T>(props: import("@mui/material/Select").SelectProps<T>) => JSX.Element) & {
-        muiName: string;
-    };
-    BaseSwitch: typeof MUISwitch;
-    BaseButton: import("@mui/material").ExtendButtonBase<import("@mui/material/Button").ButtonTypeMap<{}, "button">>;
-    BaseIconButton: import("@mui/material").ExtendButtonBase<import("@mui/material/IconButton").IconButtonTypeMap<{}, "button">>;
-    BaseTooltip: typeof MUITooltip;
-    BasePopper: import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
-        component?: import("react").ElementType<any> | undefined;
-        components?: {
-            Root?: import("react").ElementType<any> | undefined;
-        } | undefined;
-        componentsProps?: {
-            root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
-        } | undefined;
-        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-    BaseInputLabel: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/InputLabel").InputLabelTypeMap<{}, "label">>;
-    BaseSelectOption: typeof MUISelectOption;
-    BaseChip: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Chip").ChipTypeMap<{}, "div">>;
-    BooleanCellTrueIcon: import("react").JSXElementConstructor<any>;
-    BooleanCellFalseIcon: import("react").JSXElementConstructor<any>;
-    ColumnMenuIcon: import("react").JSXElementConstructor<any>;
-    OpenFilterButtonIcon: import("react").JSXElementConstructor<any>;
-    ColumnFilteredIcon: import("react").JSXElementConstructor<any>;
-    ColumnSelectorIcon: import("react").JSXElementConstructor<any>;
-    ColumnUnsortedIcon: import("react").JSXElementConstructor<any> | null;
-    ColumnSortedAscendingIcon: import("react").JSXElementConstructor<any> | null;
-    ColumnSortedDescendingIcon: import("react").JSXElementConstructor<any> | null;
-    ColumnResizeIcon: import("react").JSXElementConstructor<any>;
-    DensityCompactIcon: import("react").JSXElementConstructor<any>;
-    DensityStandardIcon: import("react").JSXElementConstructor<any>;
-    DensityComfortableIcon: import("react").JSXElementConstructor<any>;
-    ExportIcon: import("react").JSXElementConstructor<any>;
-    MoreActionsIcon: import("react").JSXElementConstructor<any>;
-    TreeDataExpandIcon: import("react").JSXElementConstructor<any>;
-    TreeDataCollapseIcon: import("react").JSXElementConstructor<any>;
-    GroupingCriteriaExpandIcon: import("react").JSXElementConstructor<any>;
-    GroupingCriteriaCollapseIcon: import("react").JSXElementConstructor<any>;
-    DetailPanelExpandIcon: import("react").JSXElementConstructor<any>;
-    DetailPanelCollapseIcon: import("react").JSXElementConstructor<any>;
-    FilterPanelAddIcon: import("react").JSXElementConstructor<any>;
-    FilterPanelDeleteIcon: import("react").JSXElementConstructor<any>;
-    FilterPanelRemoveAllIcon: import("react").JSXElementConstructor<any>;
-    RowReorderIcon: import("react").JSXElementConstructor<any>;
-    QuickFilterIcon: import("react").JSXElementConstructor<any>;
-    QuickFilterClearIcon: import("react").JSXElementConstructor<any>;
-    ColumnMenuHideIcon: import("react").JSXElementConstructor<any>;
-    ColumnMenuSortAscendingIcon: import("react").JSXElementConstructor<any>;
-    ColumnMenuSortDescendingIcon: import("react").JSXElementConstructor<any>;
-    ColumnMenuFilterIcon: import("react").JSXElementConstructor<any>;
-    ColumnMenuManageColumnsIcon: import("react").JSXElementConstructor<any>;
-    ColumnMenuClearIcon: import("react").JSXElementConstructor<any>;
-    LoadIcon: import("react").JSXElementConstructor<any>;
-    ColumnReorderIcon: import("react").JSXElementConstructor<any>;
-};
+import type { GridIconSlotsComponent } from '../models';
+import type { GridBaseSlots } from '../models/gridSlotsComponent';
+declare const materialSlots: GridBaseSlots & GridIconSlotsComponent;
 export default materialSlots;

package/material/index.js

@@ -6,6 +6,7 @@ import MUISelect from '@mui/material/Select';
 import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUIIconButton from '@mui/material/IconButton';
+import MUIInputAdornment from '@mui/material/InputAdornment';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import MUIInputLabel from '@mui/material/InputLabel';
@@ -58,6 +59,7 @@ const materialSlots = _extends({}, iconSlots, {
   BaseSwitch: MUISwitch,
   BaseButton: MUIButton,
   BaseIconButton: MUIIconButton,
+  BaseInputAdornment: MUIInputAdornment,
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   BaseInputLabel: MUIInputLabel,

package/models/api/gridApiCommon.d.ts

@@ -27,9 +27,10 @@ import type { GridPaginationApi } from '../../hooks/features/pagination';
 import type { GridStatePersistenceApi } from '../../hooks/features/statePersistence';
 import { GridColumnGroupingApi } from './gridColumnGroupingApi';
 import type { GridInitialStateCommunity, GridStateCommunity } from '../gridStateCommunity';
-export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridDisableVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi {
+import { GridHeaderFilteringApi, GridHeaderFilteringPrivateApi } from './gridHeaderFilteringApi';
+export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridDisableVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi {
 }
-export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon> extends GridCorePrivateApi<Api, PrivateApi>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridVirtualScrollerApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi {
+export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon> extends GridCorePrivateApi<Api, PrivateApi>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridVirtualScrollerApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi {
 }
 export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon> {
 }

package/models/api/gridCoreApi.d.ts

@@ -69,6 +69,10 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      * The React ref of the grid column container virtualized div element.
      */
     columnHeadersContainerElementRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid header filter row element.
+     */
+    headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
     /**
      * The React ref of the grid column headers container element.
      */

package/models/api/gridFocusApi.d.ts

@@ -14,6 +14,12 @@ export interface GridFocusApi {
      * @param {string} event The event that triggers the action.
      */
     setColumnHeaderFocus: (field: string, event?: MuiBaseEvent) => void;
+    /**
+     * Sets the focus to the column header filter at the given `field`.
+     * @param {string} field The column field.
+     * @param {string} event The event that triggers the action.
+     */
+    setColumnHeaderFilterFocus: (field: string, event?: MuiBaseEvent) => void;
 }
 export interface GridFocusPrivateApi {
     /**

package/models/api/gridHeaderFilteringApi.d.ts

@@ -0,0 +1,30 @@
+import { GridColDef } from '../colDef';
+import { GridHeaderFilteringState } from '../gridHeaderFilteringModel';
+export interface GridHeaderFilteringPrivateApi {
+    /**
+     * Internal function to set the header filter state.
+     * @param {Partial<GridHeaderFilteringState>} headerFilterState The field to be edited.
+     * @ignore - do not document.
+     */
+    setHeaderFilterState: (headerFilterState: Partial<GridHeaderFilteringState>) => void;
+}
+export interface GridHeaderFilteringApi {
+    /**
+     * Puts the cell corresponding to the given row id and field into edit mode.
+     * @param {GridColDef['field']} field The field of the header filter to put in edit mode.
+     */
+    startHeaderFilterEditMode: (field: GridColDef['field']) => void;
+    /**
+     * Stops the edit mode for the current field.
+     */
+    stopHeaderFilterEditMode: () => void;
+    /**
+     * Opens the header filter menu for the given field.
+     * @param {GridColDef['field']} field The field of the header filter to open menu for.
+     */
+    showHeaderFilterMenu: (field: GridColDef['field']) => void;
+    /**
+     * Hides the header filter menu.
+     */
+    hideHeaderFilterMenu: () => void;
+}

package/models/api/gridHeaderFilteringApi.js

@@ -0,0 +1 @@
+export {};

package/models/api/gridLocaleTextApi.d.ts

@@ -54,6 +54,31 @@ export interface GridLocaleText {
     filterOperatorIsEmpty: string;
     filterOperatorIsNotEmpty: string;
     filterOperatorIsAnyOf: string;
+    'filterOperator=': string;
+    'filterOperator!=': string;
+    'filterOperator>': string;
+    'filterOperator>=': string;
+    'filterOperator<': string;
+    'filterOperator<=': string;
+    headerFilterOperatorContains: string;
+    headerFilterOperatorEquals: string;
+    headerFilterOperatorStartsWith: string;
+    headerFilterOperatorEndsWith: string;
+    headerFilterOperatorIs: string;
+    headerFilterOperatorNot: string;
+    headerFilterOperatorAfter: string;
+    headerFilterOperatorOnOrAfter: string;
+    headerFilterOperatorBefore: string;
+    headerFilterOperatorOnOrBefore: string;
+    headerFilterOperatorIsEmpty: string;
+    headerFilterOperatorIsNotEmpty: string;
+    headerFilterOperatorIsAnyOf: string;
+    'headerFilterOperator=': string;
+    'headerFilterOperator!=': string;
+    'headerFilterOperator>': string;
+    'headerFilterOperator>=': string;
+    'headerFilterOperator<': string;
+    'headerFilterOperator<=': string;
     filterValueAny: string;
     filterValueTrue: string;
     filterValueFalse: string;

package/models/events/gridEventLookup.d.ts

@@ -189,6 +189,32 @@ export interface GridColumnHeaderEventLookup {
         params: GridColumnOrderChangeParams;
     };
 }
+export interface GridHeaderFilterEventLookup {
+    /**
+     * Fired when a column header filter is clicked
+     * @ignore - do not document.
+     */
+    headerFilterClick: {
+        params: GridColumnHeaderParams;
+        event: React.MouseEvent<HTMLElement>;
+    };
+    /**
+     * Fired when a key is pressed in a column header filter. It's mapped to the `keydown` DOM event.
+     * @ignore - do not document.
+     */
+    headerFilterKeyDown: {
+        params: GridColumnHeaderParams;
+        event: React.KeyboardEvent<HTMLElement>;
+    };
+    /**
+     * Fired when a mouse is pressed in a column header filter. It's mapped to the `mousedown` DOM event.
+     * @ignore - do not document.
+     */
+    headerFilterMouseDown: {
+        params: GridColumnHeaderParams;
+        event: React.KeyboardEvent<HTMLElement>;
+    };
+}
 export interface GridColumnGroupHeaderEventLookup {
     /**
      * Fired when a key is pressed in a column group header. It's mapped do the `keydown` DOM event.
@@ -318,7 +344,7 @@ export interface GridControlledStateReasonLookup {
     filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState';
     pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
 }
-export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
+export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridHeaderFilterEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
     /**
      * Fired when the grid is unmounted.
      */

package/models/gridFilterOperator.d.ts

@@ -13,6 +13,10 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
      * The label of the filter operator.
      */
     label?: string;
+    /**
+     * The label of the filter shown in header filter row.
+     */
+    headerLabel?: string;
     /**
      * The name of the filter operator.
      * It will be matched with the `operator` property of the filter items.

package/models/gridHeaderFilteringModel.d.ts

@@ -0,0 +1,5 @@
+import { GridColDef } from './colDef';
+export type GridHeaderFilteringState = {
+    editing: GridColDef['field'] | null;
+    menuOpen: GridColDef['field'] | null;
+};

package/models/gridHeaderFilteringModel.js

@@ -0,0 +1 @@
+export {};

package/models/gridSlotsComponent.d.ts

@@ -1,15 +1,22 @@
 import * as React from 'react';
 import type { UncapitalizeObjectKeys } from '../internals/utils';
 import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
-/**
- * Grid components React prop interface containing all the overridable components.
- */
-export interface GridSlotsComponent extends GridIconSlotsComponent {
+export interface GridBaseSlots {
     /**
      * The custom Checkbox component used in the grid for both header and cells.
      * @default Checkbox
      */
     BaseCheckbox: React.JSXElementConstructor<any>;
+    /**
+     * The custom Chip component used in the grid.
+     * @default Chip
+     */
+    BaseChip: React.JSXElementConstructor<any>;
+    /**
+     * The custom InputAdornment component used in the grid.
+     * @default InputAdornment
+     */
+    BaseInputAdornment: React.JSXElementConstructor<any>;
     /**
      * The custom TextField component used in the grid.
      * @default TextField
@@ -60,6 +67,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default MenuItem
      */
     BaseSelectOption: React.JSXElementConstructor<any>;
+}
+/**
+ * Grid components React prop interface containing all the overridable components.
+ */
+export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponent {
     /**
      * The custom Chip component used in the grid.
      * @default Chip

package/models/gridStateCommunity.d.ts

@@ -1,6 +1,7 @@
 import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState } from '../hooks';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
 import type { GridEditingState } from './gridEditRowModel';
+import { GridHeaderFilteringState } from './gridHeaderFilteringModel';
 import type { GridRowSelectionModel } from './gridRowSelectionModel';
 /**
  * The state of `DataGrid`.
@@ -9,6 +10,7 @@ export interface GridStateCommunity {
     rows: GridRowsState;
     rowsMeta: GridRowsMetaState;
     editRows: GridEditingState;
+    headerFiltering: GridHeaderFilteringState;
     pagination: GridPaginationState;
     columns: GridColumnsState;
     columnGrouping: GridColumnsGroupingState;

package/models/index.d.ts

@@ -16,7 +16,7 @@ export * from './gridCell';
 export * from './gridColumnHeaderClass';
 export * from './api';
 export * from './gridIconSlotsComponent';
-export * from './gridSlotsComponent';
+export type { GridSlotsComponent, UncapitalizedGridSlotsComponent } from './gridSlotsComponent';
 export * from './gridSlotsComponentsProps';
 export * from './gridDensity';
 export * from './logger';

package/models/index.js

@@ -16,7 +16,6 @@ export * from './gridCell';
 export * from './gridColumnHeaderClass';
 export * from './api';
 export * from './gridIconSlotsComponent';
-export * from './gridSlotsComponent';
 export * from './gridSlotsComponentsProps';
 export * from './gridDensity';
 export * from './logger';

package/modern/DataGrid/useDataGridProps.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from '../constants';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
 import { GridEditModes } from '../models';
-import { computeSlots, uncapitalizeObjectKeys } from '../internals/utils';
+import { computeSlots, useProps, uncapitalizeObjectKeys } from '../internals/utils';
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -72,15 +70,10 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
 };
 const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProps = inProps => {
-  const _useThemeProps = useThemeProps({
-      props: inProps,
-      name: 'MuiDataGrid'
-    }),
-    {
-      components,
-      componentsProps
-    } = _useThemeProps,
-    themedProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+  const [components, componentsProps, themedProps] = useProps(useThemeProps({
+    props: inProps,
+    name: 'MuiDataGrid'
+  }));
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

package/modern/colDef/gridNumericOperators.js

@@ -17,7 +17,6 @@ export const getGridNumericQuickFilterFn = value => {
   };
 };
 export const getGridNumericOperators = () => [{
-  label: '=',
   value: '=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -34,7 +33,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '!=',
   value: '!=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -51,7 +49,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '>',
   value: '>',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -71,7 +68,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '>=',
   value: '>=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -91,7 +87,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '<',
   value: '<',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -111,7 +106,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '<=',
   value: '<=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {

package/modern/components/cell/GridEditInputCell.js

@@ -88,7 +88,10 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: 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/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,17 +1,29 @@
 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) {
   const {
       item,
       applyValue,
       apiRef,
-      focusElementRef
+      focusElementRef,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      tabIndex,
+      label: labelProp
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -31,39 +43,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.slotProps?.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 ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(BooleanOperatorContainer, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.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/modern/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';
@@ -14,7 +14,12 @@ function GridFilterInputDate(props) {
       type,
       apiRef,
       focusElementRef,
-      InputProps
+      InputProps,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      tabIndex,
+      disabled
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = React.useRef();
@@ -44,6 +49,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'),
@@ -55,11 +61,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?.inputProps)
     })
   }, other, rootProps.slotProps?.baseTextField));
@@ -73,7 +87,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]),