@mui/x-data-grid 6.4.0 → 6.6.0

package/internals/index.js

@@ -4,13 +4,16 @@ export { GridVirtualScrollerRenderZone } from '../components/virtualization/Grid
 export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
+export { getGridFilter } from '../components/panel/filterPanel/GridFilterPanel';
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
 export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+export { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../hooks/features/headerFiltering/gridHeaderFilteringSelectors';
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
+export { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
@@ -32,6 +35,7 @@ export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/row
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { getRowIdFromRowModel } from '../hooks/features/rows/gridRowsUtils';
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from '../hooks/features/rows/gridRowsSelector';
+export { headerFilteringStateInitializer, useGridHeaderFiltering } from '../hooks/features/headerFiltering/useGridHeaderFiltering';
 export { calculatePinnedRowsHeight } from '../hooks/features/rows/gridRowsUtils';
 export { useGridRowSelection, rowSelectionStateInitializer } from '../hooks/features/rowSelection/useGridRowSelection';
 export { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';

package/internals/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './computeSlots';
 export * from './slotsMigration';
+export * from './useProps';

package/internals/utils/index.js

@@ -1,2 +1,3 @@
 export * from './computeSlots';
-export * from './slotsMigration';
+export * from './slotsMigration';
+export * from './useProps';

package/internals/utils/useProps.d.ts

@@ -0,0 +1,8 @@
+import { GridSlotsComponentsProps } from '../../models/gridSlotsComponentsProps';
+import { GridSlotsComponent } from '../../models';
+interface WithComponents {
+    components?: Partial<GridSlotsComponent>;
+    componentsProps?: GridSlotsComponentsProps;
+}
+export declare function useProps<T extends WithComponents>(allProps: T): readonly [Partial<GridSlotsComponent> | undefined, GridSlotsComponentsProps | undefined, Omit<T, "components" | "componentsProps">];
+export {};

package/internals/utils/useProps.js

@@ -0,0 +1,33 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components", "componentsProps"];
+import * as React from 'react';
+/** Gathers props for the root element into a single `.forwardedProps` field */
+function groupForwardedProps(props) {
+  var _props$forwardedProps;
+  const keys = Object.keys(props);
+  if (!keys.some(key => key.startsWith('aria-') || key.startsWith('data-'))) {
+    return props;
+  }
+  const newProps = {};
+  const forwardedProps = (_props$forwardedProps = props.forwardedProps) != null ? _props$forwardedProps : {};
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    if (key.startsWith('aria-') || key.startsWith('data-')) {
+      forwardedProps[key] = props[key];
+    } else {
+      newProps[key] = props[key];
+    }
+  }
+  newProps.forwardedProps = forwardedProps;
+  return newProps;
+}
+export function useProps(allProps) {
+  return React.useMemo(() => {
+    const {
+        components,
+        componentsProps
+      } = allProps,
+      themedProps = _objectWithoutPropertiesLoose(allProps, _excluded);
+    return [components, componentsProps, groupForwardedProps(themedProps)];
+  }, [allProps]);
+}

package/legacy/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 @@ var 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 var DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
@@ -184,6 +186,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/legacy/DataGrid/useDataGridProps.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["components", "componentsProps"];
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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';
 var DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -72,13 +71,14 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
 };
 var defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 export var useDataGridProps = function useDataGridProps(inProps) {
-  var _useThemeProps = useThemeProps({
+  var _useProps = useProps(useThemeProps({
       props: inProps,
       name: 'MuiDataGrid'
-    }),
-    components = _useThemeProps.components,
-    componentsProps = _useThemeProps.componentsProps,
-    themedProps = _objectWithoutProperties(_useThemeProps, _excluded);
+    })),
+    _useProps2 = _slicedToArray(_useProps, 3),
+    components = _useProps2[0],
+    componentsProps = _useProps2[1],
+    themedProps = _useProps2[2];
   var localeText = React.useMemo(function () {
     return _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText);
   }, [themedProps.localeText]);

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

@@ -4,11 +4,10 @@ var _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";
 var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
   var innerRef = props.innerRef,
     className = props.className,
@@ -49,18 +48,14 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeader
     getInnerProps = _useGridColumnHeaders.getInnerProps,
     getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
     getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
-  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/legacy/components/cell/GridActionsCell.js

@@ -183,9 +183,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/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/cell/GridEditSingleSelectCell.js

@@ -8,6 +8,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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';
@@ -123,11 +124,10 @@ function GridEditSingleSelectCell(props) {
       return;
     }
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      apiRef.current.stopCellEditMode({
-        id: id,
-        field: field,
-        ignoreModifications: true
-      });
+      var params = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
+        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+      }));
     }
   };
   var handleOpen = function handleOpen(event) {

package/legacy/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -45,9 +45,9 @@ export var ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(function (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$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {

package/legacy/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';
@@ -29,6 +30,9 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   var classes = useUtilityClasses(ownerState);
+  var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  var labelId = useId();
+  var panelId = useId();
   var toggleFilter = React.useCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
@@ -38,21 +42,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;
   }
+  var open = preferencePanel.open && preferencePanel.labelId === labelId;
   var 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 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,

package/legacy/components/containers/GridRoot.js

@@ -64,9 +64,7 @@ var 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/legacy/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/legacy/components/panel/GridPreferencesPanel.js

@@ -17,7 +17,9 @@ export var GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPre
   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/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]),