@mui/x-data-grid 6.4.0 → 6.5.0

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridFilterPanel = void 0;
+exports.getGridFilter = exports.GridFilterPanel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -28,6 +28,7 @@ const getGridFilter = col => ({
   operator: col.filterOperators[0].value,
   id: Math.round(Math.random() * 1e5)
 });
+exports.getGridFilter = getGridFilter;
 const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

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

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  GridFilterPanel: true
+};
+Object.defineProperty(exports, "GridFilterPanel", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterPanel.GridFilterPanel;
+  }
+});
 var _GridFilterForm = require("./GridFilterForm");
 Object.keys(_GridFilterForm).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterForm[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_GridFilterForm).forEach(function (key) {
 var _GridFilterInputValue = require("./GridFilterInputValue");
 Object.keys(_GridFilterInputValue).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputValue[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_GridFilterInputValue).forEach(function (key) {
 var _GridFilterInputDate = require("./GridFilterInputDate");
 Object.keys(_GridFilterInputDate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputDate[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_GridFilterInputDate).forEach(function (key) {
 var _GridFilterInputSingleSelect = require("./GridFilterInputSingleSelect");
 Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputSingleSelect[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -47,31 +60,35 @@ Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
     }
   });
 });
-var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
-Object.keys(_GridFilterInputValueProps).forEach(function (key) {
+var _GridFilterInputBoolean = require("./GridFilterInputBoolean");
+Object.keys(_GridFilterInputBoolean).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputBoolean[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _GridFilterInputValueProps[key];
+      return _GridFilterInputBoolean[key];
     }
   });
 });
-var _GridFilterPanel = require("./GridFilterPanel");
-Object.keys(_GridFilterPanel).forEach(function (key) {
+var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
+Object.keys(_GridFilterInputValueProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridFilterPanel[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _GridFilterPanel[key];
+      return _GridFilterInputValueProps[key];
     }
   });
 });
+var _GridFilterPanel = require("./GridFilterPanel");
 var _GridFilterInputMultipleValue = require("./GridFilterInputMultipleValue");
 Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputMultipleValue[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +100,7 @@ Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
 var _GridFilterInputMultipleSingleSelect = require("./GridFilterInputMultipleSingleSelect");
 Object.keys(_GridFilterInputMultipleSingleSelect).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputMultipleSingleSelect[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/node/constants/localeTextConstants.js

@@ -64,6 +64,32 @@ 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/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -269,7 +269,7 @@ 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,
@@ -325,6 +325,7 @@ const useGridColumnHeaders = props => {
   return {
     renderContext,
     getColumnHeaders,
+    getColumnsToRender,
     getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: (other = {}) => (0, _extends2.default)({
@@ -333,7 +334,8 @@ const useGridColumnHeaders = props => {
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    })
+    }),
+    headerHeight
   };
 };
 exports.useGridColumnHeaders = useGridColumnHeaders;

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

@@ -161,8 +161,8 @@ 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 = (0, _utils.unstable_ownerWindow)(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
     const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;

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

@@ -39,9 +39,6 @@ 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/node/hooks/features/focus/gridFocusStateSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusCellSelector = void 0;
+exports.unstable_gridTabIndexColumnHeaderFilterSelector = exports.unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridFocusColumnHeaderFilterSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusCellSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridFocusStateSelector = state => state.focus;
 exports.gridFocusStateSelector = gridFocusStateSelector;
@@ -13,6 +13,10 @@ const gridFocusColumnHeaderSelector = (0, _createSelector.createSelector)(gridFo
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 exports.gridFocusColumnHeaderSelector = gridFocusColumnHeaderSelector;
+const unstable_gridFocusColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.unstable_gridFocusColumnHeaderFilterSelector = unstable_gridFocusColumnHeaderFilterSelector;
 const unstable_gridFocusColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
 exports.unstable_gridFocusColumnGroupHeaderSelector = unstable_gridFocusColumnGroupHeaderSelector;
 const gridTabIndexStateSelector = state => state.tabIndex;
@@ -23,5 +27,9 @@ const gridTabIndexColumnHeaderSelector = (0, _createSelector.createSelector)(gri
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 exports.gridTabIndexColumnHeaderSelector = gridTabIndexColumnHeaderSelector;
+const unstable_gridTabIndexColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnHeaderFilter);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.unstable_gridTabIndexColumnHeaderFilterSelector = unstable_gridTabIndexColumnHeaderFilterSelector;
 const unstable_gridTabIndexColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnGroupHeader);
 exports.unstable_gridTabIndexColumnGroupHeaderSelector = unstable_gridTabIndexColumnGroupHeaderSelector;

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

@@ -16,17 +16,20 @@ var _gridFocusStateSelector = require("./gridFocusStateSelector");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _utils2 = require("../../../utils/utils");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const focusStateInitializer = state => (0, _extends2.default)({}, state, {
   focus: {
     cell: null,
     columnHeader: null,
+    columnHeaderFilter: null,
     columnGroupHeader: null
   },
   tabIndex: {
     cell: null,
     columnHeader: null,
+    columnHeaderFilter: null,
     columnGroupHeader: null
   }
 });
@@ -62,6 +65,7 @@ const useGridFocus = (apiRef, props) => {
             field
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         },
         focus: {
@@ -70,6 +74,7 @@ const useGridFocus = (apiRef, props) => {
             field
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       });
@@ -97,6 +102,7 @@ const useGridFocus = (apiRef, props) => {
           columnHeader: {
             field
           },
+          columnHeaderFilter: null,
           cell: null,
           columnGroupHeader: null
         },
@@ -104,6 +110,33 @@ 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 = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+    publishCellFocusOut(cell, event);
+    apiRef.current.setState(state => {
+      logger.debug(`Focusing on column header filter with colIndex=${field}`);
+      return (0, _extends2.default)({}, state, {
+        tabIndex: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field
+          },
+          cell: null,
+          columnGroupHeader: null
+        },
+        focus: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field
+          },
           cell: null,
           columnGroupHeader: null
         }
@@ -124,6 +157,7 @@ const useGridFocus = (apiRef, props) => {
             depth
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           cell: null
         },
         focus: {
@@ -132,6 +166,7 @@ const useGridFocus = (apiRef, props) => {
             depth
           },
           columnHeader: null,
+          columnHeaderFilter: null,
           cell: null
         }
       });
@@ -141,8 +176,16 @@ const useGridFocus = (apiRef, props) => {
   const getColumnGroupHeaderFocus = React.useCallback(() => (0, _gridFocusStateSelector.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 = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+    const pinnedRows = (0, _gridRowsSelector.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') {
@@ -150,14 +193,10 @@ const useGridFocus = (apiRef, props) => {
     } else {
       rowIndexToFocus += 1;
     }
-    const currentPage = (0, _useGridVisibleRows.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;
       }
@@ -169,8 +208,11 @@ const useGridFocus = (apiRef, props) => {
         columnIndexToFocus = visibleColumns.length - 1;
       }
     }
-    rowIndexToFocus = (0, _utils2.clamp)(rowIndexToFocus, 0, currentPage.rows.length - 1);
-    const rowToFocus = currentPage.rows[rowIndexToFocus];
+    rowIndexToFocus = (0, _utils2.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') {
@@ -224,6 +266,7 @@ const useGridFocus = (apiRef, props) => {
       focus: {
         cell: null,
         columnHeader: null,
+        columnHeaderFilter: null,
         columnGroupHeader: null
       }
     }));
@@ -262,6 +305,7 @@ const useGridFocus = (apiRef, props) => {
         focus: {
           cell: null,
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       }));
@@ -290,6 +334,7 @@ const useGridFocus = (apiRef, props) => {
         focus: {
           cell: null,
           columnHeader: null,
+          columnHeaderFilter: null,
           columnGroupHeader: null
         }
       }));
@@ -297,7 +342,8 @@ const useGridFocus = (apiRef, props) => {
   }, [apiRef]);
   const focusApi = {
     setCellFocus,
-    setColumnHeaderFocus
+    setColumnHeaderFocus,
+    setColumnHeaderFilterFocus
   };
   const focusPrivateApi = {
     moveFocusToRelativeCell,

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unstable_gridHeaderFilteringStateSelector = exports.unstable_gridHeaderFilteringMenuSelector = exports.unstable_gridHeaderFilteringEditFieldSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+/* eslint-disable @typescript-eslint/naming-convention */
+
+const unstable_gridHeaderFilteringStateSelector = state => state.headerFiltering;
+exports.unstable_gridHeaderFilteringStateSelector = unstable_gridHeaderFilteringStateSelector;
+const unstable_gridHeaderFilteringEditFieldSelector = (0, _createSelector.createSelector)(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
+exports.unstable_gridHeaderFilteringEditFieldSelector = unstable_gridHeaderFilteringEditFieldSelector;
+const unstable_gridHeaderFilteringMenuSelector = (0, _createSelector.createSelector)(unstable_gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);
+exports.unstable_gridHeaderFilteringMenuSelector = unstable_gridHeaderFilteringMenuSelector;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _gridHeaderFilteringSelectors = require("./gridHeaderFilteringSelectors");
+Object.keys(_gridHeaderFilteringSelectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridHeaderFilteringSelectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridHeaderFilteringSelectors[key];
+    }
+  });
+});

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

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridHeaderFiltering = exports.headerFilteringStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _utils = require("../../utils");
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const headerFilteringStateInitializer = state => (0, _extends2.default)({}, state, {
+  headerFiltering: {
+    editing: null,
+    menuOpen: null
+  }
+});
+exports.headerFilteringStateInitializer = headerFilteringStateInitializer;
+const useGridHeaderFiltering = (apiRef, props) => {
+  const logger = (0, _utils.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 (0, _extends2.default)({}, 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 = (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef);
+      const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+      const orderedFields = (0, _gridColumnsSelector.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
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, headerFilterApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, headerFilterPrivateApi, 'private');
+};
+exports.useGridHeaderFiltering = useGridHeaderFiltering;

package/node/hooks/features/index.js

@@ -145,4 +145,15 @@ Object.keys(_statePersistence).forEach(function (key) {
       return _statePersistence[key];
     }
   });
+});
+var _headerFiltering = require("./headerFiltering");
+Object.keys(_headerFiltering).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _headerFiltering[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _headerFiltering[key];
+    }
+  });
 });