@mui/x-data-grid 8.17.0 → 8.19.0

package/hooks/core/useGridVirtualizer.d.ts

@@ -1,9 +1,83 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridPrivateApiCommunity } from "../../models/api/gridApiCommunity.js";
-import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
-type RootProps = DataGridProcessedProps;
+import * as React from 'react';
+import { Dimensions, Virtualization } from '@mui/x-virtualizer';
 /**
  * Virtualizer setup
  */
-export declare function useGridVirtualizer(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
-export {};
+export declare function useGridVirtualizer(): {
+  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
+  api: {
+    updateDimensions: (firstUpdate?: boolean) => void;
+    debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
+    rowsMeta: {
+      getRowHeight: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      setLastMeasuredRowIndex: (index: number) => void;
+      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer/models").RowId, height: number) => void;
+      hydrateRowsMeta: () => void;
+      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer/models").RowId) => () => void | undefined;
+      rowHasAutoHeight: (id: import("@mui/x-virtualizer/models").RowId) => any;
+      getRowHeightEntry: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      getLastMeasuredRowIndex: () => number;
+      resetRowHeights: () => void;
+    };
+  } & {
+    getters: {
+      setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+      getOffsetTop: () => number;
+      getRows: (rowParams?: {
+        rows?: import("@mui/x-virtualizer/models").RowEntry[];
+        position?: import("@mui/x-virtualizer/models").PinnedRowPosition;
+        renderContext?: import("@mui/x-virtualizer/models").RenderContext;
+      }, unstable_rowTree?: Record<import("@mui/x-virtualizer/models").RowId, any>) => React.ReactNode[];
+      rows: import("@mui/x-virtualizer/models").RowEntry[];
+      getContainerProps: () => {
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
+      };
+      getScrollerProps: () => {
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
+        style: React.CSSProperties;
+        role: string;
+        tabIndex: number | undefined;
+      };
+      getContentProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        style: React.CSSProperties;
+        role: string;
+      };
+      getScrollbarVerticalProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+      getScrollbarHorizontalProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+      getScrollAreaProps: () => {
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+    };
+    useVirtualization: () => import("@mui/x-virtualizer").BaseState;
+    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+    forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+  } & {
+    resetColSpan: () => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+  } & {
+    getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
+  } & {
+    getViewportPageSize: () => number;
+  };
+};

package/hooks/core/useGridVirtualizer.js

@@ -30,10 +30,11 @@ var _dataGridPropsDefaultValues = require("../../constants/dataGridPropsDefaultV
 var _gridRowsUtils = require("../features/rows/gridRowsUtils");
 var _gridColumnsUtils = require("../features/columns/gridColumnsUtils");
 var _useGridOverlays = require("../features/overlays/useGridOverlays");
+var _useGridRootProps = require("../utils/useGridRootProps");
+var _useGridPrivateApiContext = require("../utils/useGridPrivateApiContext");
+var _useGridRowsMeta = require("../features/rows/useGridRowsMeta");
+var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function identity(x) {
-  return x;
-}
 const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _gridColumnsSelector.gridColumnPositionsSelector, (visibleColumns, positions) => {
   const colCount = visibleColumns.length;
   if (colCount === 0) {
@@ -57,8 +58,10 @@ const addGridDimensionsCreator = () => (0, _lruMemoize.lruMemoize)((dimensions,
 /**
  * Virtualizer setup
  */
-function useGridVirtualizer(apiRef, rootProps) {
+function useGridVirtualizer() {
   const isRtl = (0, _RtlProvider.useRtl)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const {
     listView
   } = rootProps;
@@ -113,9 +116,11 @@ function useGridVirtualizer(apiRef, rootProps) {
   } = rootProps;
   // </ROWS_META>
 
-  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
   const RowSlot = rootProps.slots.row;
   const rowSlotProps = rootProps.slotProps?.row;
+  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
+  // We need it to trigger a new render, but rowsMeta needs access to the latest value, hence we cannot pass it to the focusedVirtualCell callback in the virtualizer params
+  (0, _utils.eslintUseValue)(focusedVirtualCell);
   const virtualizer = (0, _xVirtualizer.useVirtualizer)({
     refs: {
       container: apiRef.current.mainElementRef,
@@ -179,7 +184,7 @@ function useGridVirtualizer(apiRef, rootProps) {
     } : undefined, [apiRef, getRowSpacing, currentPage.rows, currentPage.rowIdToIndexMap]),
     applyRowHeight: (0, _useEventCallback.default)((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
     virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
-    focusedVirtualCell: (0, _useEventCallback.default)(() => focusedVirtualCell),
+    focusedVirtualCell: (0, _useEventCallback.default)(() => (0, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector)(apiRef)),
     resizeThrottleMs: rootProps.resizeThrottleMs,
     onResize: (0, _useEventCallback.default)(size => apiRef.current.publishEvent('resize', size)),
     onWheel: (0, _useEventCallback.default)(event => {
@@ -235,23 +240,33 @@ function useGridVirtualizer(apiRef, rootProps) {
     apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
   });
   (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.Dimensions.selectors.dimensions, (_, dimensions) => {
+    if (!dimensions.isReady) {
+      return;
+    }
     apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
       dimensions: addGridDimensions(dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight)
     }));
   });
-  (0, _store.useStoreEffect)(virtualizer.store, identity, (_, state) => {
-    if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
+  (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.Dimensions.selectors.rowsMeta, (_, rowsMeta) => {
+    if (rowsMeta !== apiRef.current.state.rowsMeta) {
       apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
-        rowsMeta: state.rowsMeta
+        rowsMeta
       }));
     }
-    if (state.virtualization !== apiRef.current.state.virtualization) {
+  });
+  (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.Virtualization.selectors.store, (_, virtualization) => {
+    if (virtualization.renderContext === _xVirtualizer.EMPTY_RENDER_CONTEXT) {
+      return;
+    }
+    if (virtualization !== apiRef.current.state.virtualization) {
       apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
-        virtualization: state.virtualization
+        virtualization
       }));
     }
   });
   apiRef.current.register('private', {
     virtualizer
   });
+  (0, _useGridRowsMeta.useGridRowsMeta)(apiRef, rootProps);
+  return virtualizer;
 }

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -19,7 +19,9 @@ const columnGroupsStateInitializer = (state, props, apiRef) => {
     lastColumnGroupingModel: props.columnGroupingModel
   };
   if (!props.columnGroupingModel) {
-    return state;
+    return (0, _extends2.default)({}, state, {
+      columnGrouping: undefined
+    });
   }
   const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
   const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
@@ -73,6 +75,9 @@ const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
+    if (!columnGroupingModel && !apiRef.current.caches.columnGrouping.lastColumnGroupingModel) {
+      return;
+    }
     apiRef.current.caches.columnGrouping.lastColumnGroupingModel = columnGroupingModel;
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -24,6 +24,16 @@ const columnMenuStateInitializer = state => (0, _extends2.default)({}, state, {
 exports.columnMenuStateInitializer = columnMenuStateInitializer;
 const useGridColumnMenu = apiRef => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridColumnMenu');
+  const subscriptionRefs = React.useRef({});
+  const unsubscribeFromScrollChange = React.useCallback(() => {
+    subscriptionRefs.current.wheel?.();
+    subscriptionRefs.current.touchMove?.();
+  }, []);
+  const subscribeToScrollChange = React.useCallback(() => {
+    unsubscribeFromScrollChange();
+    subscriptionRefs.current.wheel = apiRef.current.subscribeEvent('virtualScrollerWheel', apiRef.current.hideColumnMenu);
+    subscriptionRefs.current.touchMove = apiRef.current.subscribeEvent('virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
+  }, [apiRef, unsubscribeFromScrollChange]);
 
   /**
    * API METHODS
@@ -41,6 +51,7 @@ const useGridColumnMenu = apiRef => {
           return state;
         }
         logger.debug('Opening Column Menu');
+        subscribeToScrollChange();
         return (0, _extends2.default)({}, state, {
           columnMenu: {
             open: true,
@@ -50,7 +61,7 @@ const useGridColumnMenu = apiRef => {
       });
       apiRef.current.hidePreferences();
     }
-  }, [apiRef, logger]);
+  }, [apiRef, logger, subscribeToScrollChange]);
   const hideColumnMenu = React.useCallback(() => {
     const columnMenuState = (0, _columnMenuSelector.gridColumnMenuSelector)(apiRef);
     if (columnMenuState.field) {
@@ -86,12 +97,13 @@ const useGridColumnMenu = apiRef => {
     if (shouldUpdate) {
       apiRef.current.setState(state => {
         logger.debug('Hiding Column Menu');
+        unsubscribeFromScrollChange();
         return (0, _extends2.default)({}, state, {
           columnMenu: newState
         });
       });
     }
-  }, [apiRef, logger]);
+  }, [apiRef, logger, unsubscribeFromScrollChange]);
   const toggleColumnMenu = React.useCallback(field => {
     logger.debug('Toggle Column Menu');
     const columnMenu = (0, _columnMenuSelector.gridColumnMenuSelector)(apiRef);
@@ -108,7 +120,5 @@ const useGridColumnMenu = apiRef => {
   };
   (0, _utils.useGridApiMethod)(apiRef, columnMenuApi, 'public');
   (0, _utils.useGridEvent)(apiRef, 'columnResizeStart', hideColumnMenu);
-  (0, _utils.useGridEvent)(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
-  (0, _utils.useGridEvent)(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };
 exports.useGridColumnMenu = useGridColumnMenu;

package/hooks/features/columns/useGridColumnSpanning.js

@@ -11,10 +11,15 @@ var _useGridEvent = require("../../utils/useGridEvent");
  * @requires useGridParamsApi (method)
  */
 const useGridColumnSpanning = apiRef => {
-  const virtualizer = apiRef.current.virtualizer;
-  const resetColSpan = virtualizer.api.resetColSpan;
-  const getCellColSpanInfo = virtualizer.api.getCellColSpanInfo;
-  const calculateColSpan = virtualizer.api.calculateColSpan;
+  const resetColSpan = () => {
+    return apiRef.current.virtualizer.api.resetColSpan();
+  };
+  const getCellColSpanInfo = (...params) => {
+    return apiRef.current.virtualizer.api.getCellColSpanInfo(...params);
+  };
+  const calculateColSpan = (...params) => {
+    apiRef.current.virtualizer.api.calculateColSpan(...params);
+  };
   const columnSpanningPublicApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };

package/hooks/features/dimensions/useGridDimensions.js

@@ -52,8 +52,10 @@ const EMPTY_DIMENSIONS = {
 const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;
   const density = (0, _density.gridDensityFactorSelector)(apiRef);
+  const dimensionsWithStatic = (0, _extends2.default)({}, dimensions, getStaticDimensions(props, apiRef, density, (0, _columns.gridVisiblePinnedColumnDefinitionsSelector)(apiRef)));
+  apiRef.current.store.state.dimensions = dimensionsWithStatic;
   return (0, _extends2.default)({}, state, {
-    dimensions: (0, _extends2.default)({}, dimensions, getStaticDimensions(props, apiRef, density, (0, _columns.gridVisiblePinnedColumnDefinitionsSelector)(apiRef)))
+    dimensions: dimensionsWithStatic
   });
 };
 exports.dimensionsStateInitializer = dimensionsStateInitializer;
@@ -65,16 +67,17 @@ const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_columns.g
   return (0, _roundToDecimalPlaces.roundToDecimalPlaces)(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 function useGridDimensions(apiRef, props) {
-  const virtualizer = apiRef.current.virtualizer;
-  const updateDimensions = virtualizer.api.updateDimensions;
-  const getViewportPageSize = virtualizer.api.getViewportPageSize;
   const getRootDimensions = React.useCallback(() => (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef), [apiRef]);
   const apiPublic = {
     getRootDimensions
   };
   const apiPrivate = {
-    updateDimensions,
-    getViewportPageSize
+    updateDimensions: () => {
+      return apiRef.current.virtualizer.api.updateDimensions();
+    },
+    getViewportPageSize: () => {
+      return apiRef.current.virtualizer.api.getViewportPageSize();
+    }
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPublic, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPrivate, 'private');
@@ -103,6 +106,9 @@ function useGridDimensions(apiRef, props) {
     /* eslint-enable react-hooks/rules-of-hooks */
   }
   (0, _store.useStoreEffect)(apiRef.current.store, s => s.dimensions, (previous, next) => {
+    if (!next.isReady) {
+      return;
+    }
     if (apiRef.current.rootElementRef.current) {
       setCSSVariables(apiRef.current.rootElementRef.current, next);
     }

package/hooks/features/export/useGridPrintExport.js

@@ -16,15 +16,15 @@ var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _gridClasses = require("../../../constants/gridClasses");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
-var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils = require("./utils");
 var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _toolbar = require("../../../components/toolbar");
-var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
+var _GridVirtualScrollbar = require("../../../components/virtualization/GridVirtualScrollbar");
 var _jsxRuntime = require("react/jsx-runtime");
+const DEBUG_MODE = false;
 function raf() {
   return new Promise(resolve => {
     requestAnimationFrame(() => {
@@ -37,6 +37,10 @@ function buildPrintWindow(title) {
   iframeEl.style.position = 'absolute';
   iframeEl.style.width = '0px';
   iframeEl.style.height = '0px';
+  if (DEBUG_MODE) {
+    iframeEl.style.width = '100%';
+    iframeEl.style.height = '10000px';
+  }
   iframeEl.title = title || document.title;
   return iframeEl;
 }
@@ -104,40 +108,36 @@ const useGridPrintExport = (apiRef, props) => {
     if (!printDoc) {
       return;
     }
-    const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef);
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);
+    const virtualScrollerContent = gridClone.querySelector(`.${_gridClasses.gridClasses.virtualScrollerContent}`);
 
     // Allow to overflow to not hide the border of the last row
     const gridMain = gridClone.querySelector(`.${_gridClasses.gridClasses.main}`);
     gridMain.style.overflow = 'visible';
-
-    // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
-    gridClone.style.contain = 'size';
-    let gridToolbarElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.toolbar}`)?.offsetHeight || 0;
-    let gridFooterElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.footerContainer}`)?.offsetHeight || 0;
+    gridClone.querySelector(`.${_gridClasses.gridClasses.virtualScrollerRenderZone}`).style.position = 'static';
+    virtualScrollerContent.style.flexBasis = 'auto';
+    gridClone.querySelector(`.${_gridClasses.gridClasses['scrollbar--vertical']}`)?.remove();
+    if (!(virtualScrollerContent.nextSibling instanceof HTMLElement && virtualScrollerContent.nextSibling.classList.contains(_gridClasses.gridClasses.filler))) {
+      const filler = document.createElement('div');
+      filler.style.height = _GridVirtualScrollbar.scrollbarSizeCssExpression;
+      virtualScrollerContent.insertAdjacentElement('afterend', filler);
+    }
     const gridFooterElement = gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
       gridClone.querySelector(`.${_gridClasses.gridClasses.toolbar}`)?.remove();
-      gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter && gridFooterElement) {
       gridFooterElement.remove();
-      gridFooterElementHeight = 0;
     }
-
-    // Expand container height to accommodate all rows
-    const computedTotalHeight = rowsMeta.currentPageTotalHeight + (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props) + gridToolbarElementHeight + gridFooterElementHeight;
-    gridClone.style.height = `${computedTotalHeight}px`;
+    gridClone.style.height = 'auto';
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
     if (!normalizeOptions.hideFooter && gridFooterElement) {
       // the footer is always being placed at the bottom of the page as if all rows are exported
       // so if getRowsToExport is being used to only export a subset of rows then we need to
       // adjust the footer position to be correctly placed at the bottom of the grid
-      gridFooterElement.style.position = 'absolute';
       gridFooterElement.style.width = '100%';
-      gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
     }
 
     // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
@@ -165,13 +165,13 @@ const useGridPrintExport = (apiRef, props) => {
     }
 
     // Trigger print
-    if (process.env.NODE_ENV !== 'test') {
+    if (process.env.NODE_ENV !== 'test' && !DEBUG_MODE) {
       // wait for remote stylesheets to load
       Promise.all(stylesheetLoadPromises).then(() => {
         printWindow.contentWindow.print();
       });
     }
-  }, [apiRef, doc, props]);
+  }, [apiRef, doc]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);

package/hooks/features/filter/useGridFilter.d.ts

@@ -9,4 +9,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">, configuration: GridConfiguration) => void;
+export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics" | "signature">, configuration: GridConfiguration) => void;

package/hooks/features/filter/useGridFilter.js

@@ -363,7 +363,9 @@ const useGridFilter = (apiRef, props, configuration) => {
    * 1ST RENDER
    */
   (0, _useFirstRender.useFirstRender)(() => {
-    updateFilteredRows();
+    if (props.signature === 'DataGrid') {
+      updateFilteredRows();
+    }
   });
 
   /**

package/hooks/features/focus/useGridFocus.js

@@ -232,7 +232,6 @@ const useGridFocus = (apiRef, props) => {
     apiRef.current.setCellFocus(id, field);
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    // GRID_CELL_NAVIGATION_KEY_DOWN handles the focus on Enter, Tab and navigation keys
     if (event.key === 'Enter' || event.key === 'Tab' || event.key === 'Shift' || (0, _keyboardUtils.isNavigationKey)(event.key)) {
       return;
     }

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

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
  * @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" | "signature" | "headerFilters">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters" | "tabNavigation">) => void;