@mui/x-data-grid 6.3.1 → 6.5.0

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/clipboard/useGridClipboard.js

@@ -1,5 +1,8 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
-import { useGridApiMethod, useGridNativeEventListener } from '../../utils';
+import { useGridApiOptionHandler, useGridNativeEventListener } from '../../utils';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
+import { serializeCellValue } from '../export/serializers/csvSerializer';
 function writeToClipboardPolyfill(data) {
   var span = document.createElement('span');
   span.style.whiteSpace = 'pre';
@@ -18,6 +21,15 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+function copyToClipboard(data) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(data).catch(function () {
+      writeToClipboardPolyfill(data);
+    });
+  } else {
+    writeToClipboardPolyfill(data);
+  }
+}
 function hasNativeSelection(element) {
   var _window$getSelection;
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
@@ -38,24 +50,11 @@ function hasNativeSelection(element) {
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export var useGridClipboard = function useGridClipboard(apiRef) {
-  var copySelectedRowsToClipboard = React.useCallback(function () {
-    if (apiRef.current.getSelectedRows().size === 0) {
-      return;
-    }
-    var data = apiRef.current.getDataAsCsv({
-      includeHeaders: false,
-      delimiter: '\t'
-    });
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(data).catch(function () {
-        writeToClipboardPolyfill(data);
-      });
-    } else {
-      writeToClipboardPolyfill(data);
-    }
-  }, [apiRef]);
-  var handleKeydown = React.useCallback(function (event) {
+export var useGridClipboard = function useGridClipboard(apiRef, props) {
+  var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
+  var clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
+  var handleCopy = React.useCallback(function (event) {
     var isModifierKeyPressed = event.ctrlKey || event.metaKey;
     // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
     // be wrong with a Dvorak keyboard (as if pressing J).
@@ -67,11 +66,30 @@ export var useGridClipboard = function useGridClipboard(apiRef) {
     if (hasNativeSelection(event.target)) {
       return;
     }
-    apiRef.current.unstable_copySelectedRowsToClipboard();
-  }, [apiRef]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleKeydown);
-  var clipboardApi = {
-    unstable_copySelectedRowsToClipboard: copySelectedRowsToClipboard
-  };
-  useGridApiMethod(apiRef, clipboardApi, 'public');
+    var textToCopy = '';
+    var selectedRows = apiRef.current.getSelectedRows();
+    if (selectedRows.size > 0) {
+      textToCopy = apiRef.current.getDataAsCsv({
+        includeHeaders: false,
+        // TODO: make it configurable
+        delimiter: clipboardCopyCellDelimiter
+      });
+    } else {
+      var focusedCell = gridFocusCellSelector(apiRef);
+      if (focusedCell) {
+        var cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
+        textToCopy = serializeCellValue(cellParams, {
+          delimiterCharacter: clipboardCopyCellDelimiter,
+          ignoreValueFormatter: ignoreValueFormatter
+        });
+      }
+    }
+    textToCopy = apiRef.current.unstable_applyPipeProcessors('clipboardCopy', textToCopy);
+    if (textToCopy) {
+      copyToClipboard(textToCopy);
+      apiRef.current.publishEvent('clipboardCopy', textToCopy);
+    }
+  }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
+  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

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

@@ -11,7 +11,6 @@ import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-import { gridClasses } from '../../../constants/gridClasses';
 var isTestEnvironment = process.env.NODE_ENV === 'test';
 var hasScroll = function hasScroll(_ref) {
   var content = _ref.content,
@@ -158,14 +157,13 @@ export function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   var computeSizeAndPublishResizeEvent = React.useCallback(function () {
-    var _apiRef$current$rootE2, _previousSize$current, _previousSize$current2;
-    var rootEl = (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE2.current;
-    var mainEl = rootEl == null ? void 0 : rootEl.querySelector(".".concat(gridClasses.main));
+    var _apiRef$current$mainE, _previousSize$current, _previousSize$current2;
+    var mainEl = (_apiRef$current$mainE = apiRef.current.mainElementRef) == null ? void 0 : _apiRef$current$mainE.current;
     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/useGridCellEditing.js

@@ -97,10 +97,14 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       }
     } else if (params.isEditable) {
       var _reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      var canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event: event,
+        cellParams: params,
+        editMode: 'cell'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if (isPrintableKey(event)) {
         _reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

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/editing/useGridRowEditing.js

@@ -153,10 +153,14 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       }
     } else if (params.isEditable) {
       var _reason;
-      if (event.key === ' ') {
-        return; // Space scrolls to the last row
+      var canStartEditing = apiRef.current.unstable_applyPipeProcessors('canStartEditing', true, {
+        event: event,
+        cellParams: params,
+        editMode: 'row'
+      });
+      if (!canStartEditing) {
+        return;
       }
-
       if (isPrintableKey(event)) {
         _reason = GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

package/legacy/hooks/features/export/serializers/csvSerializer.js

@@ -1,6 +1,6 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
-var serializeCellValue = function serializeCellValue(value, delimiterCharacter) {
+function sanitizeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
     var formattedValue = value.replace(/"/g, '""');
 
@@ -13,9 +13,36 @@ var serializeCellValue = function serializeCellValue(value, delimiterCharacter)
     return formattedValue;
   }
   return value;
+}
+export var serializeCellValue = function serializeCellValue(cellParams, options) {
+  var delimiterCharacter = options.delimiterCharacter,
+    ignoreValueFormatter = options.ignoreValueFormatter;
+  var value;
+  if (ignoreValueFormatter) {
+    var _cellParams$value2;
+    var columnType = cellParams.colDef.type;
+    if (columnType === 'number') {
+      value = String(cellParams.value);
+    } else if (columnType === 'date' || columnType === 'dateTime') {
+      var _cellParams$value;
+      value = (_cellParams$value = cellParams.value) == null ? void 0 : _cellParams$value.toISOString();
+    } else if (typeof ((_cellParams$value2 = cellParams.value) == null ? void 0 : _cellParams$value2.toString) === 'function') {
+      value = cellParams.value.toString();
+    } else {
+      value = cellParams.value;
+    }
+  } else {
+    value = cellParams.formattedValue;
+  }
+  return sanitizeCellValue(value, delimiterCharacter);
 };
 var objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
-var serializeRow = function serializeRow(id, columns, getCellParams, delimiterCharacter) {
+var serializeRow = function serializeRow(_ref) {
+  var id = _ref.id,
+    columns = _ref.columns,
+    getCellParams = _ref.getCellParams,
+    delimiterCharacter = _ref.delimiterCharacter,
+    ignoreValueFormatter = _ref.ignoreValueFormatter;
   return columns.map(function (column) {
     var cellParams = getCellParams(id, column.field);
     if (process.env.NODE_ENV !== 'production') {
@@ -23,7 +50,10 @@ var serializeRow = function serializeRow(id, columns, getCellParams, delimiterCh
         objectFormattedValueWarning();
       }
     }
-    return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
+    return serializeCellValue(cellParams, {
+      delimiterCharacter: delimiterCharacter,
+      ignoreValueFormatter: ignoreValueFormatter
+    });
   });
 };
 export function buildCSV(options) {
@@ -31,9 +61,16 @@ export function buildCSV(options) {
     rowIds = options.rowIds,
     getCellParams = options.getCellParams,
     delimiterCharacter = options.delimiterCharacter,
-    includeHeaders = options.includeHeaders;
+    includeHeaders = options.includeHeaders,
+    ignoreValueFormatter = options.ignoreValueFormatter;
   var CSVBody = rowIds.reduce(function (acc, id) {
-    return "".concat(acc).concat(serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter), "\r\n");
+    return "".concat(acc).concat(serializeRow({
+      id: id,
+      columns: columns,
+      getCellParams: getCellParams,
+      delimiterCharacter: delimiterCharacter,
+      ignoreValueFormatter: ignoreValueFormatter
+    }).join(delimiterCharacter), "\r\n");
   }, '').trim();
   if (!includeHeaders) {
     return CSVBody;
@@ -41,7 +78,7 @@ export function buildCSV(options) {
   var CSVHead = "".concat(columns.filter(function (column) {
     return column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field;
   }).map(function (column) {
-    return serializeCellValue(column.headerName || column.field, delimiterCharacter);
+    return sanitizeCellValue(column.headerName || column.field, delimiterCharacter);
   }).join(delimiterCharacter), "\r\n");
   return "".concat(CSVHead).concat(CSVBody).trim();
 }

package/legacy/hooks/features/export/useGridCsvExport.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -7,7 +8,7 @@ import { buildCSV } from './serializers/csvSerializer';
 import { getColumnsToExport, defaultGetRowsToExport } from './utils';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -15,9 +16,10 @@ import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarEx
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export var useGridCsvExport = function useGridCsvExport(apiRef) {
+export var useGridCsvExport = function useGridCsvExport(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridCsvExport');
+  var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.csvExport : ignoreValueFormatterProp) || false;
   var getDataAsCsv = React.useCallback(function () {
     var _options$getRowsToExp, _options$includeHeade;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -35,9 +37,10 @@ export var useGridCsvExport = function useGridCsvExport(apiRef) {
       rowIds: exportedRowIds,
       getCellParams: apiRef.current.getCellParams,
       delimiterCharacter: options.delimiter || ',',
-      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true
+      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
+      ignoreValueFormatter: ignoreValueFormatter
     });
-  }, [logger, apiRef]);
+  }, [logger, apiRef, ignoreValueFormatter]);
   var exportDataAsCsv = React.useCallback(function (options) {
     logger.debug("Export data as CSV");
     var csv = getDataAsCsv(options);

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');
+};