@mui/x-data-grid 6.4.0 → 6.5.0

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

@@ -1,9 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "headerFilterMenu", "isFilterActive", "clearButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
+import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
@@ -33,6 +34,11 @@ const renderSingleSelectOptions = ({
     }), label);
   });
 };
+const SingleSelectOperatorContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%'
+});
 function GridFilterInputSingleSelect(props) {
   const {
       item,
@@ -41,7 +47,13 @@ function GridFilterInputSingleSelect(props) {
       apiRef,
       focusElementRef,
       getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp
+      getOptionValue: getOptionValueProp,
+      placeholder,
+      tabIndex,
+      label: labelProp,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
@@ -99,36 +111,40 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  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__*/_jsx(rootProps.slots.baseSelect, _extends({
-      id: id,
-      label: label,
-      labelId: labelId,
-      value: filterValueState,
-      onChange: onFilterChange,
-      variant: "standard",
-      type: type || 'text',
-      inputProps: {
-        ref: focusElementRef,
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-      },
-      native: isSelectNative
-    }, others, rootProps.slotProps?.baseSelect, {
-      children: renderSingleSelectOptions({
-        column: resolvedColumn,
-        OptionComponent: rootProps.slots.baseSelectOption,
-        getOptionLabel,
-        getOptionValue,
-        isSelectNative,
-        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
-      })
-    }))]
+  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
+        id: labelId,
+        shrink: true,
+        variant: "standard",
+        children: label
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+        id: id,
+        label: label,
+        labelId: labelId,
+        value: filterValueState,
+        onChange: onFilterChange,
+        startAdornment: isFilterActive ? headerFilterMenu : null,
+        variant: "standard",
+        type: type || 'text',
+        inputProps: {
+          tabIndex,
+          ref: focusElementRef,
+          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        },
+        native: isSelectNative
+      }, others, rootProps.slotProps?.baseSelect, {
+        children: renderSingleSelectOptions({
+          column: resolvedColumn,
+          OptionComponent: rootProps.slots.baseSelectOption,
+          getOptionLabel,
+          getOptionValue,
+          isSelectNative,
+          baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+        })
+      }))]
+    }), clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -140,6 +156,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Used to determine the label displayed for a given value option.
@@ -153,6 +170,12 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
    * @returns {string} The value to be used.
    */
   getOptionValue: PropTypes.func,
+  headerFilterMenu: PropTypes.node,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: PropTypes.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/modern/components/panel/filterPanel/GridFilterInputValue.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"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -13,7 +13,13 @@ function GridFilterInputValue(props) {
       applyValue,
       type,
       apiRef,
-      focusElementRef
+      focusElementRef,
+      tabIndex,
+      disabled,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      InputProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = React.useRef();
@@ -44,9 +50,6 @@ function GridFilterInputValue(props) {
     const itemValue = item.value ?? '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  const InputProps = applying ? {
-    endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
-  } : others.InputProps;
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -55,7 +58,20 @@ function GridFilterInputValue(props) {
     onChange: onFilterChange,
     variant: "standard",
     type: type || 'text',
-    InputProps: InputProps,
+    InputProps: _extends({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, headerFilterMenu && isFilterActive ? {
+      startAdornment: headerFilterMenu
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: _extends({
+        tabIndex
+      }, InputProps?.inputProps)
+    }),
     InputLabelProps: {
       shrink: true
     },
@@ -71,7 +87,14 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: PropTypes.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/modern/components/panel/filterPanel/GridFilterPanel.js

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

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

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

package/modern/constants/localeTextConstants.js

@@ -58,6 +58,32 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   filterOperatorIsEmpty: 'is empty',
   filterOperatorIsNotEmpty: 'is not empty',
   filterOperatorIsAnyOf: 'is any of',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
+  // Header filter operators text
+  headerFilterOperatorContains: 'Contains',
+  headerFilterOperatorEquals: 'Equals',
+  headerFilterOperatorStartsWith: 'Starts with',
+  headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorIs: 'Is',
+  headerFilterOperatorNot: 'Is not',
+  headerFilterOperatorAfter: 'Is after',
+  headerFilterOperatorOnOrAfter: 'Is on or after',
+  headerFilterOperatorBefore: 'Is before',
+  headerFilterOperatorOnOrBefore: 'Is on or before',
+  headerFilterOperatorIsEmpty: 'Is empty',
+  headerFilterOperatorIsNotEmpty: 'Is not empty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Equals',
+  'headerFilterOperator!=': 'Not equals',
+  'headerFilterOperator>': 'Is greater than',
+  'headerFilterOperator>=': 'Is greater than or equal to',
+  'headerFilterOperator<': 'Is less than',
+  'headerFilterOperator<=': 'Is less than or equal to',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -260,7 +260,7 @@ export const useGridColumnHeaders = props => {
         const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
         const headerInfo = {
           groupId,
-          width: columnFields.map(field => apiRef.current.getColumn(field).computedWidth).reduce((acc, val) => acc + val, 0),
+          width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
           fields: columnFields,
           colIndex: columnIndex,
           hasFocus,
@@ -316,6 +316,7 @@ export const useGridColumnHeaders = props => {
   return {
     renderContext,
     getColumnHeaders,
+    getColumnsToRender,
     getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: (other = {}) => _extends({
@@ -324,6 +325,7 @@ export const useGridColumnHeaders = props => {
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    })
+    }),
+    headerHeight
   };
 };

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -153,8 +153,8 @@ export function useGridDimensions(apiRef, props) {
     if (!mainEl) {
       return;
     }
-    const height = mainEl.offsetHeight || 0;
-    const width = mainEl.offsetWidth || 0;
+    const height = mainEl.clientHeight || 0;
+    const width = mainEl.clientWidth || 0;
     const win = ownerWindow(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
     const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;

package/modern/hooks/features/editing/useGridEditing.js

@@ -29,9 +29,6 @@ export const useGridEditing = (apiRef, props) => {
     if (isCellEditableProp) {
       return isCellEditableProp(params);
     }
-    if (params.rowNode.type === 'pinnedRow') {
-      return false;
-    }
     return true;
   }, [isCellEditableProp]);
   const maybeDebounce = (id, field, debounceMs, callback) => {

package/modern/hooks/features/focus/gridFocusStateSelector.js

@@ -3,11 +3,17 @@ export const gridFocusStateSelector = state => state.focus;
 export const gridFocusCellSelector = createSelector(gridFocusStateSelector, focusState => focusState.cell);
 export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader);
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const unstable_gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
 export const gridTabIndexStateSelector = state => state.tabIndex;
 export const gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector, state => state.cell);
 export const gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeader);
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const unstable_gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeaderFilter);
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnGroupHeader);

package/modern/hooks/features/focus/useGridFocus.js

@@ -9,15 +9,18 @@ import { gridFocusCellSelector, unstable_gridFocusColumnGroupHeaderSelector } fr
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { clamp } from '../../../utils/utils';
+import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 export const focusStateInitializer = state => _extends({}, state, {
   focus: {
     cell: null,
     columnHeader: null,
+    columnHeaderFilter: null,
     columnGroupHeader: null
   },
   tabIndex: {
     cell: null,
     columnHeader: null,
+    columnHeaderFilter: null,
     columnGroupHeader: null
   }
 });
@@ -52,6 +55,7 @@ export const useGridFocus = (apiRef, props) => {
             field
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         },
         focus: {
@@ -60,6 +64,7 @@ export const useGridFocus = (apiRef, props) => {
             field
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       });
@@ -87,6 +92,7 @@ export const useGridFocus = (apiRef, props) => {
           columnHeader: {
             field
           },
+          columnHeaderFilter: null,
           cell: null,
           columnGroupHeader: null
         },
@@ -94,6 +100,33 @@ export const useGridFocus = (apiRef, props) => {
           columnHeader: {
             field
           },
+          columnHeaderFilter: null,
+          cell: null,
+          columnGroupHeader: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger, publishCellFocusOut]);
+  const setColumnHeaderFilterFocus = React.useCallback((field, event = {}) => {
+    const cell = gridFocusCellSelector(apiRef);
+    publishCellFocusOut(cell, event);
+    apiRef.current.setState(state => {
+      logger.debug(`Focusing on column header filter with colIndex=${field}`);
+      return _extends({}, state, {
+        tabIndex: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field
+          },
+          cell: null,
+          columnGroupHeader: null
+        },
+        focus: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field
+          },
           cell: null,
           columnGroupHeader: null
         }
@@ -114,6 +147,7 @@ export const useGridFocus = (apiRef, props) => {
             depth
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           cell: null
         },
         focus: {
@@ -122,6 +156,7 @@ export const useGridFocus = (apiRef, props) => {
             depth
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           cell: null
         }
       });
@@ -131,8 +166,16 @@ export const useGridFocus = (apiRef, props) => {
   const getColumnGroupHeaderFocus = React.useCallback(() => unstable_gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
     let columnIndexToFocus = apiRef.current.getColumnIndex(field);
-    let rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
     const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+    const pinnedRows = gridPinnedRowsSelector(apiRef);
+
+    // Include pinned rows as well
+    const currentPageRows = [].concat(pinnedRows.top || [], currentPage.rows, pinnedRows.bottom || []);
+    let rowIndexToFocus = currentPageRows.findIndex(row => row.id === id);
     if (direction === 'right') {
       columnIndexToFocus += 1;
     } else if (direction === 'left') {
@@ -140,14 +183,10 @@ export const useGridFocus = (apiRef, props) => {
     } else {
       rowIndexToFocus += 1;
     }
-    const currentPage = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
     if (columnIndexToFocus >= visibleColumns.length) {
       // Go to next row if we are after the last column
       rowIndexToFocus += 1;
-      if (rowIndexToFocus < currentPage.rows.length) {
+      if (rowIndexToFocus < currentPageRows.length) {
         // Go to first column of the next row if there's one more row
         columnIndexToFocus = 0;
       }
@@ -159,8 +198,11 @@ export const useGridFocus = (apiRef, props) => {
         columnIndexToFocus = visibleColumns.length - 1;
       }
     }
-    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
-    const rowToFocus = currentPage.rows[rowIndexToFocus];
+    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPageRows.length - 1);
+    const rowToFocus = currentPageRows[rowIndexToFocus];
+    if (!rowToFocus) {
+      return;
+    }
     const colSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowToFocus.id, columnIndexToFocus);
     if (colSpanInfo && colSpanInfo.spannedByColSpan) {
       if (direction === 'left' || direction === 'below') {
@@ -214,6 +256,7 @@ export const useGridFocus = (apiRef, props) => {
       focus: {
         cell: null,
         columnHeader: null,
+        columnHeaderFilter: null,
         columnGroupHeader: null
       }
     }));
@@ -252,6 +295,7 @@ export const useGridFocus = (apiRef, props) => {
         focus: {
           cell: null,
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       }));
@@ -280,6 +324,7 @@ export const useGridFocus = (apiRef, props) => {
         focus: {
           cell: null,
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       }));
@@ -287,7 +332,8 @@ export const useGridFocus = (apiRef, props) => {
   }, [apiRef]);
   const focusApi = {
     setCellFocus,
-    setColumnHeaderFocus
+    setColumnHeaderFocus,
+    setColumnHeaderFilterFocus
   };
   const focusPrivateApi = {
     moveFocusToRelativeCell,

package/modern/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { createSelector } from '../../../utils/createSelector';
+export const unstable_gridHeaderFilteringStateSelector = state => state.headerFiltering;
+export const unstable_gridHeaderFilteringEditFieldSelector = createSelector(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
+export const unstable_gridHeaderFilteringMenuSelector = createSelector(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);

package/modern/hooks/features/headerFiltering/index.js

@@ -0,0 +1 @@
+export * from './gridHeaderFilteringSelectors';

package/modern/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils';
+import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+export const headerFilteringStateInitializer = state => _extends({}, state, {
+  headerFiltering: {
+    editing: null,
+    menuOpen: null
+  }
+});
+export const useGridHeaderFiltering = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridHeaderFiltering');
+  const setHeaderFilterState = React.useCallback(headerFilterState => {
+    apiRef.current.setState(state => {
+      // Safety check to avoid MIT users from using it
+      // This hook should ultimately be moved to the Pro package
+      if (props.signature === 'DataGrid') {
+        return state;
+      }
+      return _extends({}, state, {
+        headerFiltering: {
+          editing: headerFilterState.editing ?? null,
+          menuOpen: headerFilterState.menuOpen ?? null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.signature]);
+  const startHeaderFilterEditMode = React.useCallback(field => {
+    logger.debug(`Starting edit mode on header filter for field: ${field}`);
+    apiRef.current.setHeaderFilterState({
+      editing: field
+    });
+  }, [apiRef, logger]);
+  const stopHeaderFilterEditMode = React.useCallback(() => {
+    logger.debug(`Stopping edit mode on header filter`);
+    apiRef.current.setHeaderFilterState({
+      editing: null
+    });
+  }, [apiRef, logger]);
+  const showHeaderFilterMenu = React.useCallback(field => {
+    logger.debug(`Opening header filter menu for field: ${field}`);
+    apiRef.current.setHeaderFilterState({
+      menuOpen: field
+    });
+  }, [apiRef, logger]);
+  const hideHeaderFilterMenu = React.useCallback(() => {
+    logger.debug(`Hiding header filter menu for active field`);
+    let fieldToFocus = apiRef.current.state.headerFiltering.menuOpen;
+    if (fieldToFocus) {
+      const columnLookup = gridColumnLookupSelector(apiRef);
+      const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
+      const orderedFields = gridColumnFieldsSelector(apiRef);
+
+      // If the column was removed from the grid, we need to find the closest visible field
+      if (!columnLookup[fieldToFocus]) {
+        fieldToFocus = orderedFields[0];
+      }
+
+      // If the field to focus is hidden, we need to find the closest visible field
+      if (columnVisibilityModel[fieldToFocus] === false) {
+        // contains visible column fields + the field that was just hidden
+        const visibleOrderedFields = orderedFields.filter(field => {
+          if (field === fieldToFocus) {
+            return true;
+          }
+          return columnVisibilityModel[field] !== false;
+        });
+        const fieldIndex = visibleOrderedFields.indexOf(fieldToFocus);
+        fieldToFocus = visibleOrderedFields[fieldIndex + 1] || visibleOrderedFields[fieldIndex - 1];
+      }
+      apiRef.current.setHeaderFilterState({
+        menuOpen: null
+      });
+      apiRef.current.setColumnHeaderFilterFocus(fieldToFocus);
+    }
+  }, [apiRef, logger]);
+  const headerFilterPrivateApi = {
+    setHeaderFilterState
+  };
+  const headerFilterApi = {
+    startHeaderFilterEditMode,
+    stopHeaderFilterEditMode,
+    showHeaderFilterMenu,
+    hideHeaderFilterMenu
+  };
+  useGridApiMethod(apiRef, headerFilterApi, 'public');
+  useGridApiMethod(apiRef, headerFilterPrivateApi, 'private');
+};

package/modern/hooks/features/index.js

@@ -11,4 +11,5 @@ export * from './rows';
 export * from './rowSelection';
 export * from './sorting';
 export * from './dimensions';
-export * from './statePersistence';
+export * from './statePersistence';
+export * from './headerFiltering';