@mui/x-data-grid 6.4.0 → 6.5.0

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

@@ -2,10 +2,11 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
+var _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 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
     }), label);
   });
 };
+var SingleSelectOperatorContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%'
+});
 function GridFilterInputSingleSelect(props) {
   var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   var item = props.item,
@@ -42,6 +48,12 @@ function GridFilterInputSingleSelect(props) {
     focusElementRef = props.focusElementRef,
     getOptionLabelProp = props.getOptionLabel,
     getOptionValueProp = props.getOptionValue,
+    placeholder = props.placeholder,
+    tabIndex = props.tabIndex,
+    labelProp = props.label,
+    headerFilterMenu = props.headerFilterMenu,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
     others = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -102,36 +114,40 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  var label = apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.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$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
-      children: renderSingleSelectOptions({
-        column: resolvedColumn,
-        OptionComponent: rootProps.slots.baseSelectOption,
-        getOptionLabel: getOptionLabel,
-        getOptionValue: getOptionValue,
-        isSelectNative: isSelectNative,
-        baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
-      })
-    }))]
+  var label = labelProp != null ? labelProp : apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
+    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.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: tabIndex,
+          ref: focusElementRef,
+          placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        },
+        native: isSelectNative
+      }, others, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
+        children: renderSingleSelectOptions({
+          column: resolvedColumn,
+          OptionComponent: rootProps.slots.baseSelectOption,
+          getOptionLabel: getOptionLabel,
+          getOptionValue: getOptionValue,
+          isSelectNative: isSelectNative,
+          baseSelectOptionProps: (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseSelectOption
+        })
+      }))]
+    }), clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -143,6 +159,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.
@@ -156,6 +173,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/legacy/components/panel/filterPanel/GridFilterInputValue.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"];
+var _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';
@@ -15,6 +15,12 @@ function GridFilterInputValue(props) {
     type = props.type,
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
+    tabIndex = props.tabIndex,
+    disabled = props.disabled,
+    headerFilterMenu = props.headerFilterMenu,
+    isFilterActive = props.isFilterActive,
+    clearButton = props.clearButton,
+    InputProps = props.InputProps,
     others = _objectWithoutProperties(props, _excluded);
   var filterTimeout = React.useRef();
   var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
@@ -49,9 +55,6 @@ function GridFilterInputValue(props) {
     var itemValue = (_item$value2 = item.value) != null ? _item$value2 : '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  var InputProps = applying ? {
-    endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
-  } : others.InputProps;
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -60,7 +63,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: disabled
+    }, InputProps, {
+      inputProps: _extends({
+        tabIndex: tabIndex
+      }, InputProps == null ? void 0 : InputProps.inputProps)
+    }),
     InputLabelProps: {
       shrink: true
     },
@@ -76,7 +92,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/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -218,4 +218,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/legacy/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/legacy/constants/localeTextConstants.js

@@ -60,6 +60,32 @@ export var 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/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -298,10 +298,8 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         var tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
         var headerInfo = {
           groupId: groupId,
-          width: columnFields.map(function (field) {
-            return apiRef.current.getColumn(field).computedWidth;
-          }).reduce(function (acc, val) {
-            return acc + val;
+          width: columnFields.reduce(function (acc, field) {
+            return acc + apiRef.current.getColumn(field).computedWidth;
           }, 0),
           fields: columnFields,
           colIndex: columnIndex,
@@ -360,6 +358,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   return {
     renderContext: renderContext,
     getColumnHeaders: getColumnHeaders,
+    getColumnsToRender: getColumnsToRender,
     getColumnGroupHeaders: getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: function getRootProps() {
@@ -373,6 +372,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         ref: handleInnerRef,
         role: 'rowgroup'
       };
-    }
+    },
+    headerHeight: headerHeight
   };
 };

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

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

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

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

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

@@ -9,6 +9,11 @@ export var gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector
   return focusState.columnHeader;
 });
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export var unstable_gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, function (focusState) {
+  return focusState.columnHeaderFilter;
+});
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export var unstable_gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, function (focusState) {
   return focusState.columnGroupHeader;
@@ -23,6 +28,11 @@ export var gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSe
   return state.columnHeader;
 });
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export var unstable_gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, function (state) {
+  return state.columnHeaderFilter;
+});
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export var unstable_gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, function (state) {
   return state.columnGroupHeader;

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

@@ -9,16 +9,19 @@ 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 var focusStateInitializer = function focusStateInitializer(state) {
   return _extends({}, state, {
     focus: {
       cell: null,
       columnHeader: null,
+      columnHeaderFilter: null,
       columnGroupHeader: null
     },
     tabIndex: {
       cell: null,
       columnHeader: null,
+      columnHeaderFilter: null,
       columnGroupHeader: null
     }
   });
@@ -54,6 +57,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
             field: field
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         },
         focus: {
@@ -62,6 +66,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
             field: field
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       });
@@ -90,6 +95,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
           columnHeader: {
             field: field
           },
+          columnHeaderFilter: null,
           cell: null,
           columnGroupHeader: null
         },
@@ -97,6 +103,34 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
           columnHeader: {
             field: field
           },
+          columnHeaderFilter: null,
+          cell: null,
+          columnGroupHeader: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger, publishCellFocusOut]);
+  var setColumnHeaderFilterFocus = React.useCallback(function (field) {
+    var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var cell = gridFocusCellSelector(apiRef);
+    publishCellFocusOut(cell, event);
+    apiRef.current.setState(function (state) {
+      logger.debug("Focusing on column header filter with colIndex=".concat(field));
+      return _extends({}, state, {
+        tabIndex: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field: field
+          },
+          cell: null,
+          columnGroupHeader: null
+        },
+        focus: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field: field
+          },
           cell: null,
           columnGroupHeader: null
         }
@@ -118,6 +152,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
             depth: depth
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           cell: null
         },
         focus: {
@@ -126,6 +161,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
             depth: depth
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           cell: null
         }
       });
@@ -137,8 +173,18 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
   }, [apiRef]);
   var moveFocusToRelativeCell = React.useCallback(function (id, field, direction) {
     var columnIndexToFocus = apiRef.current.getColumnIndex(field);
-    var rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
     var visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    var currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+    var pinnedRows = gridPinnedRowsSelector(apiRef);
+
+    // Include pinned rows as well
+    var currentPageRows = [].concat(pinnedRows.top || [], currentPage.rows, pinnedRows.bottom || []);
+    var rowIndexToFocus = currentPageRows.findIndex(function (row) {
+      return row.id === id;
+    });
     if (direction === 'right') {
       columnIndexToFocus += 1;
     } else if (direction === 'left') {
@@ -146,14 +192,10 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
     } else {
       rowIndexToFocus += 1;
     }
-    var 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;
       }
@@ -165,8 +207,11 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
         columnIndexToFocus = visibleColumns.length - 1;
       }
     }
-    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
-    var rowToFocus = currentPage.rows[rowIndexToFocus];
+    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPageRows.length - 1);
+    var rowToFocus = currentPageRows[rowIndexToFocus];
+    if (!rowToFocus) {
+      return;
+    }
     var colSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowToFocus.id, columnIndexToFocus);
     if (colSpanInfo && colSpanInfo.spannedByColSpan) {
       if (direction === 'left' || direction === 'below') {
@@ -218,6 +263,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
         focus: {
           cell: null,
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       });
@@ -258,6 +304,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
           focus: {
             cell: null,
             columnHeader: null,
+            columnHeaderFilter: null,
             columnGroupHeader: null
           }
         });
@@ -288,6 +335,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
           focus: {
             cell: null,
             columnHeader: null,
+            columnHeaderFilter: null,
             columnGroupHeader: null
           }
         });
@@ -296,7 +344,8 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
   }, [apiRef]);
   var focusApi = {
     setCellFocus: setCellFocus,
-    setColumnHeaderFocus: setColumnHeaderFocus
+    setColumnHeaderFocus: setColumnHeaderFocus,
+    setColumnHeaderFilterFocus: setColumnHeaderFilterFocus
   };
   var focusPrivateApi = {
     moveFocusToRelativeCell: moveFocusToRelativeCell,

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

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

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

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

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

@@ -0,0 +1,93 @@
+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 var headerFilteringStateInitializer = function headerFilteringStateInitializer(state) {
+  return _extends({}, state, {
+    headerFiltering: {
+      editing: null,
+      menuOpen: null
+    }
+  });
+};
+export var useGridHeaderFiltering = function useGridHeaderFiltering(apiRef, props) {
+  var logger = useGridLogger(apiRef, 'useGridHeaderFiltering');
+  var setHeaderFilterState = React.useCallback(function (headerFilterState) {
+    apiRef.current.setState(function (state) {
+      var _headerFilterState$ed, _headerFilterState$me;
+      // 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$ed = headerFilterState.editing) != null ? _headerFilterState$ed : null,
+          menuOpen: (_headerFilterState$me = headerFilterState.menuOpen) != null ? _headerFilterState$me : null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.signature]);
+  var startHeaderFilterEditMode = React.useCallback(function (field) {
+    logger.debug("Starting edit mode on header filter for field: ".concat(field));
+    apiRef.current.setHeaderFilterState({
+      editing: field
+    });
+  }, [apiRef, logger]);
+  var stopHeaderFilterEditMode = React.useCallback(function () {
+    logger.debug("Stopping edit mode on header filter");
+    apiRef.current.setHeaderFilterState({
+      editing: null
+    });
+  }, [apiRef, logger]);
+  var showHeaderFilterMenu = React.useCallback(function (field) {
+    logger.debug("Opening header filter menu for field: ".concat(field));
+    apiRef.current.setHeaderFilterState({
+      menuOpen: field
+    });
+  }, [apiRef, logger]);
+  var hideHeaderFilterMenu = React.useCallback(function () {
+    logger.debug("Hiding header filter menu for active field");
+    var fieldToFocus = apiRef.current.state.headerFiltering.menuOpen;
+    if (fieldToFocus) {
+      var columnLookup = gridColumnLookupSelector(apiRef);
+      var columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
+      var 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
+        var visibleOrderedFields = orderedFields.filter(function (field) {
+          if (field === fieldToFocus) {
+            return true;
+          }
+          return columnVisibilityModel[field] !== false;
+        });
+        var fieldIndex = visibleOrderedFields.indexOf(fieldToFocus);
+        fieldToFocus = visibleOrderedFields[fieldIndex + 1] || visibleOrderedFields[fieldIndex - 1];
+      }
+      apiRef.current.setHeaderFilterState({
+        menuOpen: null
+      });
+      apiRef.current.setColumnHeaderFilterFocus(fieldToFocus);
+    }
+  }, [apiRef, logger]);
+  var headerFilterPrivateApi = {
+    setHeaderFilterState: setHeaderFilterState
+  };
+  var headerFilterApi = {
+    startHeaderFilterEditMode: startHeaderFilterEditMode,
+    stopHeaderFilterEditMode: stopHeaderFilterEditMode,
+    showHeaderFilterMenu: showHeaderFilterMenu,
+    hideHeaderFilterMenu: hideHeaderFilterMenu
+  };
+  useGridApiMethod(apiRef, headerFilterApi, 'public');
+  useGridApiMethod(apiRef, headerFilterPrivateApi, 'private');
+};

package/legacy/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';