@mui/x-data-grid 6.4.0 → 6.6.0

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/gridFilterItem.d.ts

@@ -1,7 +1,7 @@
 /**
  * Filter item definition interface.
  * @demos
- *   - [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator)
+ *   - [Custom filter operator](/x/react-data-grid/filtering/customization/#create-a-custom-operator)
  */
 export interface GridFilterItem {
     /**

package/models/gridFilterItem.js

@@ -1,7 +1,7 @@
 /**
  * Filter item definition interface.
  * @demos
- *   - [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator)
+ *   - [Custom filter operator](/x/react-data-grid/filtering/customization/#create-a-custom-operator)
  */
 var GridLogicOperator = /*#__PURE__*/function (GridLogicOperator) {
   GridLogicOperator["And"] = "and";

package/models/gridFilterOperator.d.ts

@@ -6,13 +6,17 @@ import type { GridValidRowModel } from './gridRows';
 /**
  * Filter operator definition interface.
  * @demos
- *   - [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator)
+ *   - [Custom filter operator](/x/react-data-grid/filtering/customization/#create-a-custom-operator)
  */
 export interface GridFilterOperator<R extends GridValidRowModel = any, V = any, F = V> {
     /**
      * 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,14 +1,18 @@
 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';
+import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFilterState';
 /**
  * The state of `DataGrid`.
  */
 export interface GridStateCommunity {
     rows: GridRowsState;
+    visibleRowsLookup: GridVisibleRowsLookupState;
     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/models/props/DataGridProps.d.ts

@@ -329,6 +329,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
     apiRef?: React.MutableRefObject<GridApiCommunity>;
+    /**
+     * Forwarded props for the grid root element.
+     * @ignore - do not document.
+     */
+    forwardedProps?: Record<string, unknown>;
     /**
      * Signal to the underlying logic what version of the public component API
      * of the data grid is exposed [[GridSignature]].

package/modern/DataGrid/DataGrid.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
@@ -14,15 +15,16 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, {
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         VirtualScrollerComponent: DataGridVirtualScroller
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
@@ -182,6 +184,11 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

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/GridColumnHeaders.js

@@ -4,11 +4,10 @@ const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup"
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-import { GridScrollArea } from './GridScrollArea';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
   const {
       innerRef,
@@ -51,18 +50,14 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
+  return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
     ref: ref
   }, getRootProps(other), {
-    children: [/*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "left"
-    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+    children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
       children: [getColumnGroupHeaders(), getColumnHeaders()]
-    })), /*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "right"
-    })]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {

package/modern/components/cell/GridActionsCell.js

@@ -151,9 +151,9 @@ function GridActionsCell(props) {
       ref: buttonRef,
       id: buttonId,
       "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-controls": menuId,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? menuId : undefined,
       role: "menuitem",
       size: "small",
       onClick: showMenu,

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/cell/GridEditSingleSelectCell.js

@@ -5,6 +5,7 @@ const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowN
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
@@ -88,11 +89,10 @@ function GridEditSingleSelectCell(props) {
       return;
     }
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      apiRef.current.stopCellEditMode({
-        id,
-        field,
-        ignoreModifications: true
-      });
+      const params = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
+        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+      }));
     }
   };
   const handleOpen = event => {

package/modern/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -48,9 +48,9 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
         "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
         size: "small",
         onClick: handleMenuIconClick,
-        "aria-expanded": open ? 'true' : undefined,
-        "aria-haspopup": "true",
-        "aria-controls": columnMenuId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? columnMenuId : undefined,
         id: columnMenuButtonId
       }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import Badge from '@mui/material/Badge';
+import { useGridSelector } from '../../hooks';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -32,6 +33,9 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
+  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const labelId = useId();
+  const panelId = useId();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -42,21 +46,26 @@ function GridColumnHeaderFilterIconButton(props) {
     if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
       apiRef.current.hideFilterPanel();
     } else {
-      apiRef.current.showFilterPanel();
+      apiRef.current.showFilterPanel(undefined, panelId, labelId);
     }
     if (onClick) {
       onClick(apiRef.current.getColumnHeaderParams(field), event);
     }
-  }, [apiRef, field, onClick]);
+  }, [apiRef, field, onClick, panelId, labelId]);
   if (!counter) {
     return null;
   }
+  const open = preferencePanel.open && preferencePanel.labelId === labelId;
   const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    id: labelId,
     onClick: toggleFilter,
     color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? panelId : undefined
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,

package/modern/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/modern/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/modern/components/panel/GridPreferencesPanel.js

@@ -16,7 +16,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?.panel, props, rootProps.slotProps?.basePopper, {
     children: panelContent
   }));

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 };