@mui/x-data-grid-pro 6.4.0 → 6.5.0

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v6.5.0
+
+_May 19, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Introduce filtering on column headers for `DataGridPro` and `DataGridPremium`:
+
+  https://github.com/mui/mui-x/assets/12609561/c4c2bfec-59cf-4cab-932d-dc1983081de9
+
+  See [the documentation](https://mui.com/x/react-data-grid/filtering/#header-filters) for more information
+
+- 🌍 Improve Hebrew (he-IL) and Czech (cs-CZ) locales
+- 📝 Support for editing on pinned rows
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@6.5.0` / `@mui/x-data-grid-pro@6.5.0` / `@mui/x-data-grid-premium@6.5.0`
+
+#### Changes
+
+- [DataGrid] Fix grid size calculation when `.MuiDataGrid-main` has border (#8882) @cherniavskii
+- [DataGridPro] Filtering on Column Header (#7760) @MBilalShafi
+- [DataGridPro] Improve `treeData` and `rowGrouping` performance (#8990) @MBilalShafi
+- [DataGridPro] Support pinned rows editing (#8921) @cherniavskii
+- [l10n] Improve Hebrew (he-IL) locale (#8943) @Itzik-Tech
+- [l10n] Improve Czech (cs-CZ) locale (#8829) @harastaivan
+- [l10n] Improve Czech (cs-CZ) locale (#8956) @davidzemancz
+
+### `@mui/x-date-pickers@6.5.0` / `@mui/x-date-pickers-pro@6.5.0`
+
+#### Changes
+
+- [fields] Select the first section instead of last when clicking right of content (#9005) @noraleonte
+- [fields] Refactor prop drilling in fields (#8660) @flaviendelangle
+- [pickers] Allow to render the months before `currentMonth` instead of the one after (#8592) @flaviendelangle
+- [pickers] Fix view management when `openTo` or `views` is modified (#8997) @alexfauquette
+- [l10n] Improve Czech (cs-CZ) locale (#8829) @harastaivan
+
+### Docs
+
+- [docs] Clarify what Controlled / Uncontrolled means (#8926) @flaviendelangle
+- [docs] Fix docs using wrong service worker (#9030) @cherniavskii
+- [docs] Remove prop-types from JS demos (#9008) @flaviendelangle
+
+### Core
+
+- [core] Add assertion about checkbox rerenders (#8974) @oliviertassinari
+- [core] Allow selecting a section by type in field tests (#9009) @flaviendelangle
+- [core] Fix `yarn.lock` (#8988) @flaviendelangle
+- [core] Fix flacky adapter test (#8995) @flaviendelangle
+- [charts] Clean the axis rendering (#8948) @alexfauquette
+- [DataGrid] Memoize root props for better performance (#8942) @romgrk
+- [test] Skip flaky unit tests in JSDOM (#8994) @cherniavskii
+
 ## v6.4.0
 
 _May 12, 2023_

package/DataGridPro/DataGridPro.js

@@ -827,6 +827,11 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   treeData: PropTypes.bool,
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  unstable_headerFilters: PropTypes.bool,
   /**
    * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
    * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.

package/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -35,6 +35,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
@@ -53,6 +54,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);

package/DataGridPro/useDataGridProProps.js

@@ -1,10 +1,8 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
-import { computeSlots, uncapitalizeObjectKeys } from '@mui/x-data-grid/internals';
+import { computeSlots, uncapitalizeObjectKeys, useProps } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
 
 /**
@@ -20,19 +18,15 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenSorting: false,
   rowReordering: false,
   rowsLoadingMode: 'client',
-  getDetailPanelHeight: () => 500
+  getDetailPanelHeight: () => 500,
+  unstable_headerFilters: false
 });
 const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProProps = 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/components/GridColumnHeaders.js

@@ -6,11 +6,12 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled, alpha, useTheme } from '@mui/material/styles';
 import { getDataGridUtilityClass, gridClasses, useGridApiEventHandler, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
-import { GridBaseColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
+import { GridBaseColumnHeaders, GridColumnHeadersInner } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridPinnedPosition } from '../hooks/features/columnPinning';
 import { filterColumns } from './DataGridProVirtualScroller';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -122,6 +123,7 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     getRootProps,
     getInnerProps,
     getColumnHeaders,
+    getColumnFilters,
     getColumnGroupHeaders
   } = useGridColumnHeaders({
     innerRef,
@@ -180,6 +182,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
+      }), getColumnFilters({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
       })]
     })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
@@ -192,6 +198,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      }), getColumnFilters({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
     })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: _extends({}, ownerState, {
@@ -214,6 +224,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
       }, {
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
+      }), getColumnFilters({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
       })]
     }))]
   }));

package/components/GridDetailPanel.js

@@ -4,7 +4,7 @@ const _excluded = ["rowId", "height", "style"];
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { useGridRootProps } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DetailPanel = styled(Box, {

package/components/headerFiltering/GridHeaderFilterAdornment.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GridFilterItem, GridFilterOperator, GridColDef } from '@mui/x-data-grid';
+declare function GridHeaderFilterAdornment(props: {
+    operators: GridFilterOperator<any, any, any>[];
+    field: GridColDef['field'];
+    item: GridFilterItem;
+    applyFilterChanges: (item: GridFilterItem) => void;
+    headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
+    buttonRef: React.Ref<HTMLButtonElement>;
+}): JSX.Element | null;
+declare namespace GridHeaderFilterAdornment {
+    var propTypes: any;
+}
+export { GridHeaderFilterAdornment };

package/components/headerFiltering/GridHeaderFilterAdornment.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["operators", "item", "field", "buttonRef", "headerFilterMenuRef"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridApiContext } from '@mui/x-data-grid';
+import { unstable_useId as useId } from '@mui/utils';
+import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { OPERATOR_SYMBOL_MAPPING } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const sx = {
+  width: 22,
+  height: 22,
+  padding: '0px 0px 2px 2px'
+};
+function GridHeaderFilterAdornment(props) {
+  var _rootProps$slotProps, _OPERATOR_SYMBOL_MAPP;
+  const {
+      operators,
+      item,
+      field,
+      buttonRef,
+      headerFilterMenuRef
+    } = props,
+    others = _objectWithoutPropertiesLoose(props, _excluded);
+  const buttonId = useId();
+  const menuId = useId();
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const open = Boolean(unstable_gridHeaderFilteringMenuSelector(apiRef) === field && headerFilterMenuRef.current);
+  const handleClick = event => {
+    headerFilterMenuRef.current = event.currentTarget;
+    apiRef.current.showHeaderFilterMenu(field);
+  };
+  if (!rootProps.slots.headerFilterMenu) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+      position: "start",
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        id: buttonId,
+        ref: buttonRef,
+        "aria-label": apiRef.current.getLocaleText('filterPanelOperator'),
+        title: apiRef.current.getLocaleText('filterPanelOperator'),
+        "aria-controls": menuId,
+        "aria-expanded": open ? 'true' : undefined,
+        "aria-haspopup": "true",
+        tabIndex: -1,
+        size: "small",
+        onClick: handleClick,
+        sx: sx
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+        children: (_OPERATOR_SYMBOL_MAPP = OPERATOR_SYMBOL_MAPPING[item == null ? void 0 : item.operator]) != null ? _OPERATOR_SYMBOL_MAPP : '='
+      }))
+    }), /*#__PURE__*/_jsx(rootProps.slots.headerFilterMenu, _extends({
+      field: field,
+      open: open,
+      item: item,
+      targetRef: headerFilterMenuRef,
+      operators: operators,
+      labelledBy: buttonId,
+      id: menuId
+    }, others))]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridHeaderFilterAdornment.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  applyFilterChanges: PropTypes.func.isRequired,
+  buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  field: PropTypes.string.isRequired,
+  headerFilterMenuRef: PropTypes.shape({
+    current: PropTypes.object
+  }).isRequired,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  operators: PropTypes.arrayOf(PropTypes.shape({
+    getApplyFilterFn: PropTypes.func.isRequired,
+    getValueAsString: PropTypes.func,
+    headerLabel: PropTypes.string,
+    InputComponent: PropTypes.elementType,
+    InputComponentProps: PropTypes.object,
+    label: PropTypes.string,
+    requiresFilterValue: PropTypes.bool,
+    value: PropTypes.string.isRequired
+  })).isRequired
+} : void 0;
+export { GridHeaderFilterAdornment };

package/components/headerFiltering/GridHeaderFilterCell.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { GridFilterItem, GridFilterOperator, GridColDef } from '@mui/x-data-grid';
+import { GridStateColDef } from '@mui/x-data-grid/internals';
+export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'headerClassName'> {
+    colIndex: number;
+    height: number;
+    sortIndex?: number;
+    hasFocus?: boolean;
+    tabIndex: 0 | -1;
+    headerFilterComponent?: React.ReactNode;
+    filterOperators?: GridFilterOperator[];
+    width: number;
+    colDef: GridColDef;
+    headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
+    item: GridFilterItem;
+    showClearIcon?: boolean;
+    InputComponentProps: GridFilterOperator['InputComponentProps'];
+}
+declare const GridHeaderFilterCell: React.ForwardRefExoticComponent<GridHeaderFilterCellProps & React.RefAttributes<HTMLDivElement>>;
+export { GridHeaderFilterCell };

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -0,0 +1,224 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["colIndex", "height", "hasFocus", "headerFilterComponent", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { useGridPrivateApiContext, unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridHeaderFilterAdornment } from './GridHeaderFilterAdornment';
+import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    colDef,
+    classes,
+    showColumnVerticalBorder
+  } = ownerState;
+  const slots = {
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showColumnVerticalBorder && 'columnHeader--withRightBorder']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _filterOperators$find, _currentOperator$head, _colDef$headerName;
+  const {
+      colIndex,
+      height,
+      hasFocus,
+      headerFilterComponent,
+      filterOperators,
+      width,
+      headerClassName,
+      colDef,
+      item,
+      headerFilterMenuRef,
+      InputComponentProps,
+      showClearIcon = true
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridPrivateApiContext();
+  const columnFields = gridVisibleColumnFieldsSelector(apiRef);
+  const rootProps = useGridRootProps();
+  const cellRef = React.useRef(null);
+  const handleRef = useForkRef(ref, cellRef);
+  const inputRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+  const isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === colDef.field;
+  const isMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === colDef.field;
+  const currentOperator = filterOperators[0];
+  const InputComponent = colDef.filterable ? currentOperator.InputComponent : null;
+  const applyFilterChanges = React.useCallback(updatedItem => {
+    if (item.value && !updatedItem.value) {
+      apiRef.current.deleteFilterItem(updatedItem);
+      return;
+    }
+    apiRef.current.upsertFilterItem(updatedItem);
+  }, [apiRef, item]);
+  const clearFilterItem = React.useCallback(() => {
+    apiRef.current.deleteFilterItem(item);
+  }, [apiRef, item]);
+  React.useLayoutEffect(() => {
+    if (hasFocus && !isMenuOpen) {
+      let focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      if (isEditing && InputComponent) {
+        focusableElement = inputRef.current;
+      }
+      const elementToFocus = focusableElement || cellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
+  const onKeyDown = React.useCallback(event => {
+    if (isMenuOpen || isNavigationKey(event.key)) {
+      return;
+    }
+    switch (event.key) {
+      case 'Escape':
+        if (isEditing) {
+          apiRef.current.stopHeaderFilterEditMode();
+        }
+        break;
+      case 'Enter':
+        if (isEditing) {
+          apiRef.current.stopHeaderFilterEditMode();
+          break;
+        }
+        if (event.metaKey || event.ctrlKey) {
+          headerFilterMenuRef.current = buttonRef.current;
+          apiRef.current.showHeaderFilterMenu(colDef.field);
+          break;
+        }
+        apiRef.current.startHeaderFilterEditMode(colDef.field);
+        break;
+      case 'Tab':
+        {
+          if (isEditing) {
+            var _columnFields;
+            const fieldToFocus = (_columnFields = columnFields[colIndex + (event.shiftKey ? -1 : 1)]) != null ? _columnFields : null;
+            if (fieldToFocus) {
+              apiRef.current.startHeaderFilterEditMode(fieldToFocus);
+              apiRef.current.setColumnHeaderFilterFocus(fieldToFocus, event);
+            }
+          }
+          break;
+        }
+      default:
+        if (isEditing || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
+          break;
+        }
+        apiRef.current.startHeaderFilterEditMode(colDef.field);
+        break;
+    }
+  }, [apiRef, colDef.field, colIndex, columnFields, headerFilterMenuRef, isEditing, isMenuOpen]);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, colDef.field]);
+  const onMouseDown = React.useCallback(event => {
+    if (!hasFocus) {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+      apiRef.current.setColumnHeaderFilterFocus(colDef.field, event);
+    }
+  }, [apiRef, colDef.field, hasFocus]);
+  const mouseEventsHandlers = React.useMemo(() => ({
+    onKeyDown: publish('headerFilterKeyDown', onKeyDown),
+    onClick: publish('headerFilterClick'),
+    onMouseDown: publish('headerFilterMouseDown', onMouseDown)
+  }), [onMouseDown, onKeyDown, publish]);
+  const ownerState = _extends({}, rootProps, {
+    colDef
+  });
+  const classes = useUtilityClasses(ownerState);
+  const isNoInputOperator = (filterOperators == null ? void 0 : (_filterOperators$find = filterOperators.find(({
+    value
+  }) => item.operator === value)) == null ? void 0 : _filterOperators$find.requiresFilterValue) === false;
+  const isApplied = Boolean(item == null ? void 0 : item.value) || isNoInputOperator;
+  const label = (_currentOperator$head = currentOperator.headerLabel) != null ? _currentOperator$head : apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
+  const isFilterActive = isApplied || hasFocus;
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: clsx(classes.root, headerClassName),
+    ref: handleRef,
+    style: {
+      height,
+      width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    "aria-colindex": colIndex + 1,
+    "aria-label": headerFilterComponent == null ? (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field : undefined
+  }, other, mouseEventsHandlers, {
+    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsx(InputComponent, _extends({
+      apiRef: apiRef,
+      item: item,
+      inputRef: inputRef,
+      applyValue: applyFilterChanges,
+      onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
+      onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
+      placeholder: apiRef.current.getLocaleText('columnMenuFilter'),
+      label: isFilterActive ? capitalize(label) : ' ',
+      isFilterActive: isFilterActive,
+      headerFilterMenu: /*#__PURE__*/_jsx(GridHeaderFilterAdornment, {
+        operators: filterOperators,
+        item: item,
+        field: colDef.field,
+        applyFilterChanges: applyFilterChanges,
+        headerFilterMenuRef: headerFilterMenuRef,
+        buttonRef: buttonRef
+      }),
+      clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
+        onClick: clearFilterItem
+      }) : null,
+      disabled: isNoInputOperator,
+      tabIndex: -1
+    }, currentOperator == null ? void 0 : currentOperator.InputComponentProps, InputComponentProps)) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  colIndex: PropTypes.number.isRequired,
+  filterOperators: PropTypes.arrayOf(PropTypes.shape({
+    getApplyFilterFn: PropTypes.func.isRequired,
+    getValueAsString: PropTypes.func,
+    headerLabel: PropTypes.string,
+    InputComponent: PropTypes.elementType,
+    InputComponentProps: PropTypes.object,
+    label: PropTypes.string,
+    requiresFilterValue: PropTypes.bool,
+    value: PropTypes.string.isRequired
+  })),
+  hasFocus: PropTypes.bool,
+  /**
+   * Class name that will be added in the column header cell.
+   */
+  headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  headerFilterComponent: PropTypes.node,
+  headerFilterMenuRef: PropTypes.shape({
+    current: PropTypes.object
+  }).isRequired,
+  height: PropTypes.number.isRequired,
+  InputComponentProps: PropTypes.object,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  showClearIcon: PropTypes.bool,
+  sortIndex: PropTypes.number,
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+export { GridHeaderFilterCell };

package/components/headerFiltering/GridHeaderFilterClearButton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface GridHeaderFilterClearIconProps {
+    onClick: () => void;
+}
+declare function GridHeaderFilterClearButton({ onClick }: GridHeaderFilterClearIconProps): JSX.Element;
+export { GridHeaderFilterClearButton };

package/components/headerFiltering/GridHeaderFilterClearButton.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const sx = {
+  padding: '2px'
+};
+function GridHeaderFilterClearButton({
+  onClick
+}) {
+  var _rootProps$slotProps;
+  const rootProps = useGridRootProps();
+  return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    tabIndex: -1,
+    "aria-label": "Clear filter",
+    size: "small",
+    onClick: onClick,
+    sx: sx
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.headerFilterClearIcon, {
+      fontSize: "inherit"
+    })
+  }));
+}
+export { GridHeaderFilterClearButton };

package/components/headerFiltering/GridHeaderFilterMenu.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GridFilterOperator, GridFilterItem, GridColDef } from '@mui/x-data-grid';
+interface GridHeaderFilterMenuProps {
+    field: GridColDef['field'];
+    applyFilterChanges: (item: GridFilterItem) => void;
+    operators: GridFilterOperator<any, any, any>[];
+    item: GridFilterItem;
+    open: boolean;
+    id: string;
+    labelledBy: string;
+    targetRef: React.MutableRefObject<HTMLElement | null>;
+}
+declare function GridHeaderFilterMenu({ open, field, targetRef, applyFilterChanges, operators, item, id, labelledBy, }: GridHeaderFilterMenuProps): JSX.Element | null;
+export { GridHeaderFilterMenu };