@mui/x-data-grid 6.4.0 → 6.6.0

package/modern/hooks/features/filter/useGridFilter.js

@@ -19,11 +19,21 @@ export const filterStateInitializer = (state, props, apiRef) => {
   return _extends({}, state, {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
-      visibleRowsLookup: {},
       filteredDescendantCountLookup: {}
-    }
+    },
+    visibleRowsLookup: {}
   });
 };
+const getVisibleRowsLookup = params => {
+  // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
+  return params.filteredRowsLookup;
+};
+function getVisibleRowsLookupState(apiRef, state) {
+  return apiRef.current.applyStrategyProcessor('visibleRowsLookupCreation', {
+    tree: state.rows.tree,
+    filteredRowsLookup: state.filter.filteredRowsLookup
+  });
+}
 
 /**
  * @requires useGridColumns (method, event)
@@ -47,9 +57,13 @@ export const useGridFilter = (apiRef, props) => {
         isRowMatchingFilters,
         filterModel: filterModel ?? getDefaultGridFilterModel()
       });
-      return _extends({}, state, {
+      const newState = _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
       });
+      const visibleRowsLookupState = getVisibleRowsLookupState(apiRef, newState);
+      return _extends({}, newState, {
+        visibleRowsLookup: visibleRowsLookupState
+      });
     });
     apiRef.current.publishEvent('filteredRowsSet');
   }, [props.filterMode, apiRef]);
@@ -105,7 +119,7 @@ export const useGridFilter = (apiRef, props) => {
       items
     }), 'deleteFilterItem');
   }, [apiRef]);
-  const showFilterPanel = React.useCallback(targetColumnField => {
+  const showFilterPanel = React.useCallback((targetColumnField, panelId, labelId) => {
     logger.debug('Displaying filter panel');
     if (targetColumnField) {
       const filterModel = gridFilterModelSelector(apiRef);
@@ -150,7 +164,7 @@ export const useGridFilter = (apiRef, props) => {
         items: newFilterItems
       }));
     }
-    apiRef.current.showPreferences(GridPreferencePanelsValue.filters);
+    apiRef.current.showPreferences(GridPreferencePanelsValue.filters, panelId, labelId);
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
   const hideFilterPanel = React.useCallback(() => {
     logger.debug('Hiding filter panel');
@@ -256,13 +270,10 @@ export const useGridFilter = (apiRef, props) => {
       }
       return {
         filteredRowsLookup,
-        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
-        visibleRowsLookup: filteredRowsLookup,
         filteredDescendantCountLookup: {}
       };
     }
     return {
-      visibleRowsLookup: {},
       filteredRowsLookup: {},
       filteredDescendantCountLookup: {}
     };
@@ -272,6 +283,7 @@ export const useGridFilter = (apiRef, props) => {
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * EVENTS
@@ -292,13 +304,21 @@ export const useGridFilter = (apiRef, props) => {
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef]);
+  const updateVisibleRowsLookupState = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        visibleRowsLookup: getVisibleRowsLookupState(apiRef, state)
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
 
   // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
   // Otherwise, the state is not consistent during the render
   useGridApiEventHandler(apiRef, 'rowsSet', updateFilteredRows);
-  useGridApiEventHandler(apiRef, 'rowExpansionChange', apiRef.current.unstable_applyFilters);
   useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
   useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
 
   /**
    * 1ST RENDER

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';

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -14,6 +14,7 @@ import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { useGridSelector } from '../../utils/useGridSelector';
+import { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
@@ -68,6 +69,9 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
   const theme = useTheme();
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
+  const headerFilteringEnabled =
+  // @ts-expect-error // TODO move relevant code to the `DataGridPro`
+  props.signature !== 'DataGrid' && props.unstable_headerFilters;
 
   /**
    * @param {number} colIndex Index of the column to focus
@@ -104,6 +108,14 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef, logger]);
+  const goToHeaderFilter = React.useCallback((colIndex, event) => {
+    logger.debug(`Navigating to header filter col ${colIndex}`);
+    apiRef.current.scrollToIndexes({
+      colIndex
+    });
+    const field = apiRef.current.getVisibleColumns()[colIndex].field;
+    apiRef.current.setColumnHeaderFilterFocus(field, event);
+  }, [apiRef, logger]);
   const goToGroupHeader = React.useCallback((colIndex, depth, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
     apiRef.current.scrollToIndexes({
@@ -115,7 +127,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
-    return currentPageRows[rowIndex].id;
+    return currentPageRows?.[rowIndex].id;
   }, [currentPageRows]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
@@ -141,7 +153,11 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowDown':
         {
           if (firstRowIndexInPage !== null) {
-            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
+            if (headerFilteringEnabled) {
+              goToHeaderFilter(colIndexBefore, event);
+            } else {
+              goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
+            }
           }
           break;
         }
@@ -215,7 +231,97 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, theme.direction, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
+  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, theme.direction, goToHeader, goToGroupHeader]);
+  const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
+    const dimensions = apiRef.current.getRootDimensions();
+    if (!dimensions) {
+      return;
+    }
+    const isEditing = unstable_gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
+    const isHeaderMenuOpen = unstable_gridHeaderFilteringMenuSelector(apiRef) === params.field;
+    if (isEditing || isHeaderMenuOpen || !isNavigationKey(event.key)) {
+      return;
+    }
+    const viewportPageSize = apiRef.current.getViewportPageSize();
+    const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
+    const firstRowIndexInPage = 0;
+    const lastRowIndexInPage = currentPageRows.length - 1;
+    const firstColIndex = 0;
+    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    let shouldPreventDefault = true;
+    switch (event.key) {
+      case 'ArrowDown':
+        {
+          const rowId = getRowIdFromIndex(firstRowIndexInPage);
+          if (firstRowIndexInPage !== null && rowId != null) {
+            goToCell(colIndexBefore, rowId);
+          }
+          break;
+        }
+      case 'ArrowRight':
+        {
+          const rightColIndex = getRightColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex,
+            lastColIndex,
+            direction: theme.direction
+          });
+          if (rightColIndex !== null) {
+            goToHeaderFilter(rightColIndex, event);
+          }
+          break;
+        }
+      case 'ArrowLeft':
+        {
+          const leftColIndex = getLeftColumnIndex({
+            currentColIndex: colIndexBefore,
+            firstColIndex,
+            lastColIndex,
+            direction: theme.direction
+          });
+          if (leftColIndex !== null) {
+            goToHeaderFilter(leftColIndex, event);
+          } else {
+            apiRef.current.setColumnHeaderFilterFocus(params.field, event);
+          }
+          break;
+        }
+      case 'ArrowUp':
+        {
+          goToHeader(colIndexBefore, event);
+          break;
+        }
+      case 'PageDown':
+        {
+          if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage)));
+          }
+          break;
+        }
+      case 'Home':
+        {
+          goToHeaderFilter(firstColIndex, event);
+          break;
+        }
+      case 'End':
+        {
+          goToHeaderFilter(lastColIndex, event);
+          break;
+        }
+      case ' ':
+        {
+          // prevent Space event from scrolling
+          break;
+        }
+      default:
+        {
+          shouldPreventDefault = false;
+        }
+    }
+    if (shouldPreventDefault) {
+      event.preventDefault();
+    }
+  }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
   const focusedColumnGroup = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const dimensions = apiRef.current.getRootDimensions();
@@ -350,6 +456,8 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           if (rowIndexBefore > firstRowIndexInPage) {
             goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore - 1));
+          } else if (headerFilteringEnabled) {
+            goToHeaderFilter(colIndexBefore, event);
           } else {
             goToHeader(colIndexBefore, event);
           }
@@ -450,7 +558,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, theme.direction, getRowIdFromIndex, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, theme.direction, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {
@@ -462,6 +570,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   }, []);
   useGridRegisterPipeProcessor(apiRef, 'canStartEditing', checkIfCanStartEditing);
   useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'headerFilterKeyDown', handleHeaderFilterKeyDown);
   useGridApiEventHandler(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

package/modern/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -48,13 +48,15 @@ export const useGridPreferencesPanel = (apiRef, props) => {
   const hidePreferencesDelayed = React.useCallback(() => {
     hideTimeout.current = setTimeout(hidePreferences, 100);
   }, [hidePreferences]);
-  const showPreferences = React.useCallback(newValue => {
+  const showPreferences = React.useCallback((newValue, panelId, labelId) => {
     logger.debug('Opening Preferences Panel');
     doNotHidePanel();
     apiRef.current.setState(state => _extends({}, state, {
       preferencePanel: _extends({}, state.preferencePanel, {
         open: true,
-        openedPanelValue: newValue
+        openedPanelValue: newValue,
+        panelId,
+        labelId
       })
     }));
     apiRef.current.publishEvent('preferencePanelOpen', {

package/modern/hooks/features/rows/useGridRows.js

@@ -115,8 +115,23 @@ export const useGridRows = (apiRef, props) => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
+    const nonPinnedRowsUpdates = [];
+    updates.forEach(update => {
+      const id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
+      const rowNode = apiRef.current.getRowNode(id);
+      if (rowNode?.type === 'pinnedRow') {
+        // @ts-ignore because otherwise `release:build` doesn't work
+        const pinnedRowsCache = apiRef.current.caches.pinnedRows;
+        const prevModel = pinnedRowsCache.idLookup[id];
+        if (prevModel) {
+          pinnedRowsCache.idLookup[id] = _extends({}, prevModel, update);
+        }
+      } else {
+        nonPinnedRowsUpdates.push(update);
+      }
+    });
     const cache = updateCacheWithNewRows({
-      updates,
+      updates: nonPinnedRowsUpdates,
       getRowId: props.getRowId,
       previousCache: apiRef.current.caches.rows
     });

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -104,17 +104,14 @@ export const useGridRowsMeta = (apiRef, props) => {
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
       }
-      const existingBaseSizes = Object.entries(sizes).reduce((acc, [key, size]) => {
+      const initialHeights = {};
+      /* eslint-disable-next-line no-restricted-syntax */
+      for (const key in sizes) {
         if (/^base[A-Z]/.test(key)) {
-          acc[key] = size;
+          initialHeights[key] = sizes[key];
         }
-        return acc;
-      }, {});
-
-      // We use an object to make simple to check if a height is already added or not
-      const initialHeights = _extends({}, existingBaseSizes, {
-        baseCenter: baseRowHeight
-      });
+      }
+      initialHeights.baseCenter = baseRowHeight;
       if (getRowSpacing) {
         const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
         const spacing = getRowSpacing(_extends({}, row, {
@@ -135,13 +132,15 @@ export const useGridRowsMeta = (apiRef, props) => {
       let maximumBaseSize = 0;
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
-      Object.entries(processedSizes).forEach(([size, value]) => {
-        if (/^base[A-Z]/.test(size)) {
+      /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
+      for (const key in processedSizes) {
+        const value = processedSizes[key];
+        if (/^base[A-Z]/.test(key)) {
           maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
         } else {
           otherSizes += value;
         }
-      });
+      }
       return acc + maximumBaseSize + otherSizes;
     }, 0);
     pinnedRows?.top?.forEach(row => {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.4.0
+ * @mui/x-data-grid v6.6.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the