@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.1

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

@@ -8,7 +8,7 @@ import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { gridColumnLookupSelector } from "../columns/gridColumnsSelector.js";
 import { GridPreferencePanelsValue } from "../preferencesPanel/gridPreferencePanelsValue.js";
-import { getDefaultGridFilterModel } from "./gridFilterState.js";
+import { defaultGridFilterLookup, getDefaultGridFilterModel } from "./gridFilterState.js";
 import { gridFilterModelSelector } from "./gridFilterSelector.js";
 import { useFirstRender } from "../../utils/useFirstRender.js";
 import { gridRowsLookupSelector } from "../rows/index.js";
@@ -20,12 +20,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? getDefaultGridFilterModel();
   return _extends({}, state, {
-    filter: {
-      filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
-      filteredRowsLookup: {},
-      filteredChildrenCountLookup: {},
-      filteredDescendantCountLookup: {}
-    },
+    filter: _extends({
+      filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef)
+    }, defaultGridFilterLookup),
     visibleRowsLookup: {}
   });
 };
@@ -59,7 +56,7 @@ export const useGridFilter = (apiRef, props) => {
   });
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
-      const filterModel = gridFilterModelSelector(state, undefined, apiRef.current.instanceId);
+      const filterModel = gridFilterModelSelector(apiRef);
       const filterState = apiRef.current.getFilterState(filterModel);
       const newState = _extends({}, state, {
         filter: _extends({}, state.filter, filterState)
@@ -81,10 +78,6 @@ export const useGridFilter = (apiRef, props) => {
   /**
    * API METHODS
    */
-  const applyFilters = React.useCallback(() => {
-    updateFilteredRows();
-    apiRef.current.forceUpdate();
-  }, [apiRef, updateFilteredRows]);
   const upsertFilterItem = React.useCallback(item => {
     const filterModel = gridFilterModelSelector(apiRef);
     const items = [...filterModel.items];
@@ -213,7 +206,7 @@ export const useGridFilter = (apiRef, props) => {
   }, [props.disableMultipleColumnsFiltering, props.filterMode, props.disableEval, apiRef]);
   const filterApi = {
     setFilterLogicOperator,
-    unstable_applyFilters: applyFilters,
+    unstable_applyFilters: updateFilteredRows,
     deleteFilterItem,
     upsertFilterItem,
     upsertFilterItems,
@@ -231,6 +224,11 @@ export const useGridFilter = (apiRef, props) => {
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const filterModelToExport = gridFilterModelSelector(apiRef);
+
+    // Remove the additional `fromInput` property from the filter model
+    filterModelToExport.items.forEach(item => {
+      delete item.fromInput;
+    });
     const shouldExportFilterModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
     !context.exportOnlyDirtyModels ||
@@ -271,12 +269,8 @@ export const useGridFilter = (apiRef, props) => {
   } = props;
   const getRowsRef = useLazyRef(createMemoizedValues);
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
-      return {
-        filteredRowsLookup: {},
-        filteredChildrenCountLookup: {},
-        filteredDescendantCountLookup: {}
-      };
+    if (props.filterMode !== 'client' || !params.isRowMatchingFilters || !params.filterModel.items.length && !params.filterModel.quickFilterValues?.length) {
+      return defaultGridFilterLookup;
     }
     const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = {};
@@ -294,7 +288,9 @@ export const useGridFilter = (apiRef, props) => {
       const id = getRowId ? getRowId(row) : row.id;
       isRowMatchingFilters(row, undefined, result);
       const isRowPassing = passFilterLogic([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
-      filteredRowsLookup[id] = isRowPassing;
+      if (!isRowPassing) {
+        filteredRowsLookup[id] = isRowPassing;
+      }
     }
     const footerId = 'auto-generated-group-footer-root';
     const footer = dataRowIdToModelLookup[footerId];
@@ -339,11 +335,7 @@ export const useGridFilter = (apiRef, props) => {
         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, 'columnsChange', handleColumnsChange);
   useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);

package/modern/hooks/features/focus/gridFocusState.d.ts

@@ -0,0 +1,20 @@
+import { GridCellCoordinates } from "../../../models/gridCell.js";
+export type GridColumnIdentifier = {
+  field: string;
+};
+export type GridColumnGroupIdentifier = {
+  field: string;
+  depth: number;
+};
+export interface GridFocusState {
+  cell: GridCellCoordinates | null;
+  columnHeader: GridColumnIdentifier | null;
+  columnHeaderFilter: GridColumnIdentifier | null;
+  columnGroupHeader: GridColumnGroupIdentifier | null;
+}
+export interface GridTabIndexState {
+  cell: GridCellCoordinates | null;
+  columnHeader: GridColumnIdentifier | null;
+  columnHeaderFilter: GridColumnIdentifier | null;
+  columnGroupHeader: GridColumnGroupIdentifier | null;
+}

package/modern/hooks/features/focus/gridFocusStateSelector.d.ts

@@ -0,0 +1,12 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridFocusState, GridTabIndexState } from "./gridFocusState.js";
+export declare const gridFocusStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, GridFocusState>;
+export declare const gridFocusCellSelector: import("../../..").OutputSelector<GridStateCommunity, GridFocusState, import("../../..").GridCellCoordinates | null>;
+export declare const gridFocusColumnHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, GridFocusState, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridFocusColumnHeaderFilterSelector: import("../../..").OutputSelector<GridStateCommunity, GridFocusState, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridFocusColumnGroupHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, GridFocusState, import("./gridFocusState").GridColumnGroupIdentifier | null>;
+export declare const gridTabIndexStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, GridTabIndexState>;
+export declare const gridTabIndexCellSelector: import("../../..").OutputSelector<GridStateCommunity, GridTabIndexState, import("../../..").GridCellCoordinates | null>;
+export declare const gridTabIndexColumnHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, GridTabIndexState, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridTabIndexColumnHeaderFilterSelector: import("../../..").OutputSelector<GridStateCommunity, GridTabIndexState, import("./gridFocusState").GridColumnIdentifier | null>;
+export declare const gridTabIndexColumnGroupHeaderSelector: import("../../..").OutputSelector<GridStateCommunity, GridTabIndexState, import("./gridFocusState").GridColumnGroupIdentifier | null>;

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

@@ -1,10 +1,10 @@
-import { createSelector } from "../../../utils/createSelector.js";
-export const gridFocusStateSelector = state => state.focus;
+import { createSelector, createRootSelector } from "../../../utils/createSelector.js";
+export const gridFocusStateSelector = createRootSelector(state => state.focus);
 export const gridFocusCellSelector = createSelector(gridFocusStateSelector, focusState => focusState.cell);
 export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader);
 export const gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
 export const gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
-export const gridTabIndexStateSelector = state => state.tabIndex;
+export const gridTabIndexStateSelector = createRootSelector(state => state.tabIndex);
 export const gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector, state => state.cell);
 export const gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeader);
 export const gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeaderFilter);

package/modern/hooks/features/focus/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./gridFocusStateSelector.js";
+export * from "./gridFocusState.js";

package/modern/hooks/features/focus/useGridFocus.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+export declare const focusStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridRows (method)
+ * @requires useGridEditing (event)
+ */
+export declare const useGridFocus: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => void;

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventcallback } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import ownerDocument from '@mui/utils/ownerDocument';
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
@@ -71,7 +72,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
 
     // The row might have been deleted
     if (!apiRef.current.getRow(id)) {
@@ -108,7 +108,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
   const setColumnHeaderFilterFocus = React.useCallback((field, event = {}) => {
     const cell = gridFocusCellSelector(apiRef);
@@ -134,7 +133,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
   const setColumnGroupHeaderFocus = React.useCallback((field, depth, event = {}) => {
     const cell = gridFocusCellSelector(apiRef);
@@ -163,7 +161,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const getColumnGroupHeaderFocus = React.useCallback(() => gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
@@ -304,7 +301,6 @@ export const useGridFocus = (apiRef, props) => {
           columnGroupHeader: null
         }
       }));
-      apiRef.current.forceUpdate();
 
       // There's a focused cell but another element (not a cell) was clicked
       // Publishes an event to notify that the focus was lost
@@ -326,10 +322,11 @@ export const useGridFocus = (apiRef, props) => {
     // If the focused cell is in a row which does not exist anymore,
     // focus previous row or remove the focus
     if (cell && !apiRef.current.getRow(cell.id)) {
-      const lastFocusedRowId = gridFocusCellSelector(apiRef)?.id;
+      const lastFocusedRowId = cell.id;
       let nextRowId = null;
       if (typeof lastFocusedRowId !== 'undefined') {
-        const lastFocusedRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(lastFocusedRowId);
+        const rowEl = apiRef.current.getRowElement(lastFocusedRowId);
+        const lastFocusedRowIndex = rowEl?.dataset.rowindex ? Number(rowEl?.dataset.rowindex) : 0;
         const currentPage = getVisibleRows(apiRef, {
           pagination: props.pagination,
           paginationMode: props.paginationMode
@@ -350,7 +347,7 @@ export const useGridFocus = (apiRef, props) => {
       }));
     }
   }, [apiRef, props.pagination, props.paginationMode]);
-  const handlePaginationModelChange = useEventcallback(() => {
+  const handlePaginationModelChange = useEventCallback(() => {
     const currentFocusedCell = gridFocusCellSelector(apiRef);
     if (!currentFocusedCell) {
       return;

package/modern/hooks/features/headerFiltering/gridHeaderFilteringSelectors.d.ts

@@ -0,0 +1,5 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+export declare const gridHeaderFilteringStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState>;
+export declare const gridHeaderFilteringEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, boolean>;
+export declare const gridHeaderFilteringEditFieldSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;
+export declare const gridHeaderFilteringMenuSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;

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

@@ -1,5 +1,5 @@
-import { createSelector } from "../../../utils/createSelector.js";
-export const gridHeaderFilteringStateSelector = state => state.headerFiltering;
+import { createSelector, createRootSelector } from "../../../utils/createSelector.js";
+export const gridHeaderFilteringStateSelector = createRootSelector(state => state.headerFiltering);
 export const gridHeaderFilteringEnabledSelector = createSelector(gridHeaderFilteringStateSelector,
 // No initialization in MIT, so we need to default to false to be used by `getTotalHeaderHeight`
 headerFilteringState => headerFilteringState?.enabled ?? false);

package/modern/hooks/features/headerFiltering/index.d.ts

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

package/modern/hooks/features/headerFiltering/useGridHeaderFiltering.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+export declare const headerFilteringStateInitializer: GridStateInitializer;
+export declare const useGridHeaderFiltering: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "signature" | "headerFilters">) => void;

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

@@ -27,7 +27,6 @@ export const useGridHeaderFiltering = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, props.signature, props.headerFilters]);
   const startHeaderFilterEditMode = React.useCallback(field => {
     logger.debug(`Starting edit mode on header filter for field: ${field}`);

package/modern/hooks/features/index.d.ts

@@ -0,0 +1,19 @@
+export * from "./columnMenu/index.js";
+export * from "./columns/index.js";
+export * from "./columnGrouping/index.js";
+export * from "./columnResize/index.js";
+export * from "./density/index.js";
+export * from "./editing/index.js";
+export * from "./filter/index.js";
+export * from "./focus/index.js";
+export * from "./listView/index.js";
+export * from "./pagination/index.js";
+export * from "./preferencesPanel/index.js";
+export * from "./rows/index.js";
+export * from "./rowSelection/index.js";
+export * from "./sorting/index.js";
+export * from "./dimensions/index.js";
+export * from "./statePersistence/index.js";
+export * from "./headerFiltering/index.js";
+export * from "./virtualization/index.js";
+export * from "./dataSource/index.js";

package/modern/hooks/features/index.js

@@ -16,4 +16,5 @@ export * from "./sorting/index.js";
 export * from "./dimensions/index.js";
 export * from "./statePersistence/index.js";
 export * from "./headerFiltering/index.js";
-export * from "./virtualization/index.js";
+export * from "./virtualization/index.js";
+export * from "./dataSource/index.js";

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+/**
+ * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridFocus (method) - can be after
+ * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
+ */
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "unstable_listView">) => void;

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

@@ -6,7 +6,6 @@ import { gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector }
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { gridExpandedSortedRowEntriesSelector } from "../filter/gridFilterSelector.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSelectionColDef.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
@@ -16,8 +15,14 @@ import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridCo
 import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
-import { enrichPageRowsWithPinnedRows, getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
+import { getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
+import { createSelectorMemoized } from "../../../utils/createSelector.js";
+import { gridVisibleRowsSelector } from "../pagination/index.js";
+import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
+const gridVisibleRowsWithPinnedRowsSelector = createSelectorMemoized(gridVisibleRowsSelector, gridPinnedRowsSelector, (visibleRows, pinnedRows) => {
+  return (pinnedRows.top || []).concat(visibleRows.rows, pinnedRows.bottom || []);
+});
 
 /**
  * @requires useGridSorting (method) - can be after
@@ -30,10 +35,11 @@ import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
  */
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
-  const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
   const isRtl = useRtl();
   const listView = props.unstable_listView;
-  const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
+  const getCurrentPageRows = React.useCallback(() => {
+    return gridVisibleRowsWithPinnedRowsSelector(apiRef);
+  }, [apiRef]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
@@ -53,7 +59,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = listView ? gridListColumnSelector(apiRef.current.state).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    const field = listView ? gridListColumnSelector(apiRef).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
     const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
@@ -92,8 +98,8 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
-    return currentPageRows[rowIndex]?.id;
-  }, [currentPageRows]);
+    return getCurrentPageRows()[rowIndex]?.id;
+  }, [getCurrentPageRows]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
     const isFromInsideContent = !!headerTitleNode && headerTitleNode.contains(event.target);
@@ -102,6 +108,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
@@ -113,12 +120,10 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     switch (event.key) {
       case 'ArrowDown':
         {
-          if (firstRowIndexInPage !== null) {
-            if (headerFilteringEnabled) {
-              goToHeaderFilter(colIndexBefore, event);
-            } else {
-              goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
-            }
+          if (headerFilteringEnabled) {
+            goToHeaderFilter(colIndexBefore, event);
+          } else if (firstRowIndexInPage !== null) {
+            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
           }
           break;
         }
@@ -192,13 +197,14 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
+  }, [apiRef, getCurrentPageRows, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
     const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
     const isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field;
     if (isEditing || isHeaderMenuOpen || !isNavigationKey(event.key)) {
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = 0;
@@ -278,7 +284,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, getCurrentPageRows, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
     if (focusedColumnGroup === null) {
@@ -293,6 +299,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       depth,
       maxDepth
     } = params;
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const currentColIndex = apiRef.current.getColumnIndex(currentField);
     const colIndexBefore = currentField ? apiRef.current.getColumnIndex(currentField) : 0;
@@ -364,7 +371,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, getCurrentPageRows, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (isEventTargetInPortal(event)) {
@@ -383,6 +390,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (!canUpdateFocus) {
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     if (currentPageRows.length === 0) {
       return;
     }
@@ -393,7 +401,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const visibleColumns = listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
+    const visibleColumns = listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
     const lastColIndex = visibleColumns.length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
@@ -511,7 +519,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
+  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/modern/hooks/features/keyboardNavigation/utils.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridColDef, GridRowId } from "../../../models/index.js";
+import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+export declare const getLeftColumnIndex: ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}: {
+  currentColIndex: number;
+  firstColIndex: number;
+  lastColIndex: number;
+  isRtl: boolean;
+}) => number | null;
+export declare const getRightColumnIndex: ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}: {
+  currentColIndex: number;
+  firstColIndex: number;
+  lastColIndex: number;
+  isRtl: boolean;
+}) => number | null;
+export declare function findNonRowSpannedCell(apiRef: RefObject<GridApiCommunity>, rowId: GridRowId, field: GridColDef['field'], rowSpanScanDirection: 'up' | 'down'): GridRowId;

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

@@ -1,10 +1,5 @@
 import { gridFilteredSortedRowIdsSelector } from "../filter/gridFilterSelector.js";
 import { gridRowSpanningHiddenCellsSelector } from "../rows/gridRowSpanningSelectors.js";
-import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
-export function enrichPageRowsWithPinnedRows(apiRef, rows) {
-  const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
-  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
-}
 export const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,

package/modern/hooks/features/listView/gridListViewSelectors.d.ts

@@ -0,0 +1,7 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+/**
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
+ */
+export declare const gridListColumnSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./useGridListView").GridListViewState>;

package/modern/hooks/features/listView/gridListViewSelectors.js

@@ -1,6 +1,7 @@
+import { createRootSelector } from "../../../utils/createSelector.js";
 /**
  * Get the list column definition
  * @category List View
  * @ignore - Do not document
  */
-export const gridListColumnSelector = state => state.listViewColumn;
+export const gridListColumnSelector = createRootSelector(state => state.listViewColumn);

package/modern/hooks/features/listView/index.d.ts

@@ -0,0 +1 @@
+export * from "./gridListViewSelectors.js";

package/modern/hooks/features/listView/useGridListView.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from '@mui/x-internals/types';
+import type { GridListColDef } from '../../../models/colDef/gridColDef';
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+export type GridListViewState = (GridListColDef & {
+  computedWidth: number;
+}) | undefined;
+export declare const listViewStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'unstable_listColumn'>>;
+export declare function useGridListView(apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView' | 'unstable_listColumn'>): void;

package/modern/hooks/features/listView/useGridListView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { warnOnce } from '@mui/x-internals/warning';
 import { gridDimensionsSelector } from "../dimensions/index.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
@@ -37,7 +38,7 @@ export function useGridListView(apiRef, props) {
   /*
    * EFFECTS
    */
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     const listColumn = props.unstable_listColumn;
     if (listColumn) {
       apiRef.current.setState(state => {
@@ -56,5 +57,5 @@ export function useGridListView(apiRef, props) {
   }, [props.unstable_listView, props.unstable_listColumn]);
 }
 function getListColumnWidth(apiRef) {
-  return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;
+  return gridDimensionsSelector(apiRef).viewportInnerSize.width;
 }

package/modern/hooks/features/overlays/useGridOverlays.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GridLoadingOverlayVariant } from "../../../components/GridLoadingOverlay.js";
+import type { GridOverlayType } from '../../../components/base/GridOverlays';
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export declare const useGridOverlays: () => {
+  getOverlay: () => React.JSX.Element | null;
+  overlaysProps: {
+    overlayType: GridOverlayType;
+    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+  };
+};

package/modern/hooks/features/overlays/useGridOverlays.js

@@ -7,23 +7,30 @@ import { gridExpandedRowCountSelector } from "../filter/index.js";
 import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
 import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.js";
 import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { gridVisibleColumnDefinitionsSelector } from "../columns/index.js";
+
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridOverlays = () => {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  const showNoColumnsOverlay = !loading && visibleColumns.length === 0;
   let overlayType = null;
   let loadingOverlayVariant = null;
+  if (showNoColumnsOverlay) {
+    overlayType = 'noColumnsOverlay';
+  }
   if (showNoRowsOverlay) {
     overlayType = 'noRowsOverlay';
   }
@@ -32,7 +39,7 @@ export const useGridOverlays = () => {
   }
   if (loading) {
     overlayType = 'loadingOverlay';
-    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
+    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
   }
   const overlaysProps = {
     overlayType,