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

package/modern/hooks/features/dimensions/gridDimensionsSelectors.js

@@ -1 +1,26 @@
-export const gridDimensionsSelector = state => state.dimensions;
+import { createSelector } from "../../../utils/createSelector.js";
+export const gridDimensionsSelector = state => state.dimensions;
+
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export const gridColumnsTotalWidthSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.columnsTotalWidth);
+export const gridRowHeightSelector = state => state.dimensions.rowHeight;
+export const gridContentHeightSelector = state => state.dimensions.contentSize.height;
+export const gridHasScrollXSelector = state => state.dimensions.hasScrollX;
+export const gridHasScrollYSelector = state => state.dimensions.hasScrollY;
+export const gridHasFillerSelector = state => state.dimensions.columnsTotalWidth < state.dimensions.viewportOuterSize.width;
+export const gridHeaderHeightSelector = state => state.dimensions.headerHeight;
+export const gridGroupHeaderHeightSelector = state => state.dimensions.groupHeaderHeight;
+export const gridHeaderFilterHeightSelector = state => state.dimensions.headerFilterHeight;
+export const gridVerticalScrollbarWidthSelector = state => state.dimensions.hasScrollY ? state.dimensions.scrollbarSize : 0;
+export const gridHorizontalScrollbarHeightSelector = state => state.dimensions.hasScrollX ? state.dimensions.scrollbarSize : 0;
+export const gridHasBottomFillerSelector = state => {
+  const height = state.dimensions.hasScrollX ? state.dimensions.scrollbarSize : 0;
+  const needsLastRowBorder = state.dimensions.viewportOuterSize.height - state.dimensions.minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
+    return false;
+  }
+  return true;
+};

package/modern/hooks/features/dimensions/index.js

@@ -1,2 +1 @@
-export * from "./gridDimensionsSelectors.js";
-export {};
+export { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "./gridDimensionsSelectors.js";

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

@@ -1,20 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { throttle } from '@mui/x-internals/throttle';
-import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { createSelector } from "../../../utils/createSelector.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
-import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.js";
+import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.js";
 import { gridDimensionsSelector } from "./gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../density/index.js";
 import { gridRenderContextSelector } from "../virtualization/index.js";
 import { useGridSelector } from "../../utils/index.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
-import { calculatePinnedRowsHeight, getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
+import { getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
+import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
+import { isJSDOM } from "../../../utils/isJSDOM.js";
+import { isDeepEqual } from "../../../utils/utils.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -41,51 +45,44 @@ const EMPTY_DIMENSIONS = {
   topContainerHeight: 0,
   bottomContainerHeight: 0
 };
-export const dimensionsStateInitializer = state => {
+export const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;
+  const density = gridDensityFactorSelector(apiRef);
   return _extends({}, state, {
-    dimensions
+    dimensions: _extends({}, dimensions, getStaticDimensions(props, apiRef, density, gridVisiblePinnedColumnDefinitionsSelector(apiRef)))
   });
 };
+const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
+});
 export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const dimensionsState = useGridSelector(apiRef, gridDimensionsSelector);
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const validRowHeight = React.useMemo(() => getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning), [props.rowHeight]);
-  const rowHeight = Math.floor(validRowHeight * densityFactor);
-  const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
-  const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
-  const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
-  const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
-  const headersTotalHeight = getTotalHeaderHeight(apiRef, props);
-  const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
-  const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
-  const [savedSize, setSavedSize] = React.useState();
-  const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
-  const previousSize = React.useRef();
-  const getRootDimensions = () => apiRef.current.state.dimensions;
-  const setDimensions = useEventCallback(dimensions => {
+  const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
+  const isFirstSizing = React.useRef(true);
+  const {
+    rowHeight,
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    headersTotalHeight,
+    leftPinnedWidth,
+    rightPinnedWidth
+  } = getStaticDimensions(props, apiRef, densityFactor, pinnedColumns);
+  const getRootDimensions = React.useCallback(() => gridDimensionsSelector(apiRef.current.state), [apiRef]);
+  const setDimensions = React.useCallback(dimensions => {
     apiRef.current.setState(state => _extends({}, state, {
       dimensions
     }));
-  });
-  const resize = React.useCallback(() => {
-    const element = apiRef.current.mainElementRef.current;
-    if (!element) {
-      return;
-    }
-    const computedStyle = ownerWindow(element).getComputedStyle(element);
-    const newSize = {
-      width: parseFloat(computedStyle.width) || 0,
-      height: parseFloat(computedStyle.height) || 0
-    };
-    if (!previousSize.current || !areElementSizesEqual(previousSize.current, newSize)) {
-      apiRef.current.publishEvent('resize', newSize);
-      previousSize.current = newSize;
+    if (apiRef.current.rootElementRef.current) {
+      setCSSVariables(apiRef.current.rootElementRef.current, gridDimensionsSelector(apiRef.current.state));
     }
   }, [apiRef]);
   const getViewportPageSize = React.useCallback(() => {
@@ -93,10 +90,7 @@ export function useGridDimensions(apiRef, props) {
     if (!dimensions.isReady) {
       return 0;
     }
-    const currentPage = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
+    const currentPage = getVisibleRows(apiRef);
 
     // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
     // to find out the maximum number of rows that can fit in the visible part of the grid
@@ -107,17 +101,22 @@ export function useGridDimensions(apiRef, props) {
     }
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
-  }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
+  }, [apiRef, props.getRowHeight, rowHeight]);
   const updateDimensions = React.useCallback(() => {
+    if (isFirstSizing.current) {
+      return;
+    }
+    // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
+    // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
+    // https://github.com/mui/mui-x/issues/15721
     const rootElement = apiRef.current.rootElementRef.current;
-    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
-    const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
-    const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
-    const bottomContainerHeight = pinnedRowsHeight.bottom;
-    const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
+    const scrollbarSize = measureScrollbarSize(rootElement, props.scrollbarSize);
+    const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
+    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
     const contentSize = {
-      width: nonPinnedColumnsTotalWidth,
-      height: rowsMeta.currentPageTotalHeight
+      width: columnsTotalWidth,
+      height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
     };
     let viewportOuterSize;
     let viewportInnerSize;
@@ -140,7 +139,7 @@ export function useGridDimensions(apiRef, props) {
         height: rootDimensionsRef.current.height
       };
       viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width - leftPinnedWidth - rightPinnedWidth),
+        width: Math.max(0, viewportOuterSize.width),
         height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
       };
       const content = contentSize;
@@ -191,54 +190,36 @@ export function useGridDimensions(apiRef, props) {
       bottomContainerHeight
     };
     const prevDimensions = apiRef.current.state.dimensions;
+    if (isDeepEqual(prevDimensions, newDimensions)) {
+      return;
+    }
     setDimensions(newDimensions);
     if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  const updateDimensionCallback = useEventCallback(updateDimensions);
+  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? throttle(() => {
+    updateDimensionCallback();
+    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
+  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
   const apiPublic = {
-    resize,
     getRootDimensions
   };
   const apiPrivate = {
     updateDimensions,
     getViewportPageSize
   };
+  useEnhancedEffect(updateDimensions, [updateDimensions]);
   useGridApiMethod(apiRef, apiPublic, 'public');
   useGridApiMethod(apiRef, apiPrivate, 'private');
-  useEnhancedEffect(() => {
-    if (savedSize) {
-      updateDimensions();
-      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-    }
-  }, [apiRef, savedSize, updateDimensions]);
-  const root = apiRef.current.rootElementRef.current;
-  useEnhancedEffect(() => {
-    if (!root) {
-      return;
-    }
-    const set = (k, v) => root.style.setProperty(k, v);
-    set('--DataGrid-width', `${dimensionsState.viewportOuterSize.width}px`);
-    set('--DataGrid-hasScrollX', `${Number(dimensionsState.hasScrollX)}`);
-    set('--DataGrid-hasScrollY', `${Number(dimensionsState.hasScrollY)}`);
-    set('--DataGrid-scrollbarSize', `${dimensionsState.scrollbarSize}px`);
-    set('--DataGrid-rowWidth', `${dimensionsState.rowWidth}px`);
-    set('--DataGrid-columnsTotalWidth', `${dimensionsState.columnsTotalWidth}px`);
-    set('--DataGrid-leftPinnedWidth', `${dimensionsState.leftPinnedWidth}px`);
-    set('--DataGrid-rightPinnedWidth', `${dimensionsState.rightPinnedWidth}px`);
-    set('--DataGrid-headerHeight', `${dimensionsState.headerHeight}px`);
-    set('--DataGrid-headersTotalHeight', `${dimensionsState.headersTotalHeight}px`);
-    set('--DataGrid-topContainerHeight', `${dimensionsState.topContainerHeight}px`);
-    set('--DataGrid-bottomContainerHeight', `${dimensionsState.bottomContainerHeight}px`);
-    set('--height', `${dimensionsState.rowHeight}px`);
-  }, [root, dimensionsState]);
-  const isFirstSizing = React.useRef(true);
+  const handleRootMount = React.useCallback(root => {
+    setCSSVariables(root, gridDimensionsSelector(apiRef.current.state));
+  }, [apiRef]);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
-
-    // jsdom has no layout capabilities
-    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
@@ -247,28 +228,58 @@ export function useGridDimensions(apiRef, props) {
       logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
-    if (isFirstSizing.current) {
+    if (isFirstSizing.current || !debouncedUpdateDimensions) {
       // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      setSavedSize(size);
       isFirstSizing.current = false;
+      updateDimensions();
       return;
     }
-    debouncedSetSavedSize(size);
-  }, [props.autoHeight, debouncedSetSavedSize, logger]);
-  useEnhancedEffect(updateDimensions, [updateDimensions]);
-  useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateDimensions);
-  useGridApiOptionHandler(apiRef, 'paginationModelChange', updateDimensions);
-  useGridApiOptionHandler(apiRef, 'columnsChange', updateDimensions);
-  useGridApiEventHandler(apiRef, 'resize', handleResize);
+    debouncedUpdateDimensions();
+  }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
+  useGridApiOptionHandler(apiRef, 'rootMount', handleRootMount);
+  useGridApiOptionHandler(apiRef, 'resize', handleResize);
   useGridApiOptionHandler(apiRef, 'debouncedResize', props.onResize);
 }
-function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
+function setCSSVariables(root, dimensions) {
+  const set = (k, v) => root.style.setProperty(k, v);
+  set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
+  set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
+  set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
+  set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
+  set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
+  set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
+  set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
+  set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
+  set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
+  set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
+  set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+  set('--height', `${dimensions.rowHeight}px`);
+}
+function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
+  const validRowHeight = getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning);
+  return {
+    rowHeight: Math.floor(validRowHeight * density),
+    headerHeight: Math.floor(props.columnHeaderHeight * density),
+    groupHeaderHeight: Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * density),
+    headerFilterHeight: Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * density),
+    columnsTotalWidth: columnsTotalWidthSelector(apiRef),
+    headersTotalHeight: getTotalHeaderHeight(apiRef, props),
+    leftPinnedWidth: pinnedColumnns.left.reduce((w, col) => w + col.computedWidth, 0),
+    rightPinnedWidth: pinnedColumnns.right.reduce((w, col) => w + col.computedWidth, 0)
+  };
+}
+const scrollbarSizeCache = new WeakMap();
+function measureScrollbarSize(rootElement, scrollbarSize) {
   if (scrollbarSize !== undefined) {
     return scrollbarSize;
   }
-  if (rootElement === null || columnsTotalWidth === 0) {
+  if (rootElement === null) {
     return 0;
   }
+  const cachedSize = scrollbarSizeCache.get(rootElement);
+  if (cachedSize !== undefined) {
+    return cachedSize;
+  }
   const doc = ownerDocument(rootElement);
   const scrollDiv = doc.createElement('div');
   scrollDiv.style.width = '99px';
@@ -279,14 +290,9 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
   rootElement.appendChild(scrollDiv);
   const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
   rootElement.removeChild(scrollDiv);
+  scrollbarSizeCache.set(rootElement, size);
   return size;
 }
-
-// Get rid of floating point imprecision errors
-// https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
-function roundToDecimalPlaces(value, decimals) {
-  return Math.round(value * 10 ** decimals) / 10 ** decimals;
-}
 function areElementSizesEqual(a, b) {
   return a.width === b.width && a.height === b.height;
 }

package/modern/hooks/features/editing/gridEditingSelectors.js

@@ -1,4 +1,15 @@
+import { createSelector } from "../../../utils/createSelector.js";
+import { GridEditModes } from "../../../models/gridEditRowModel.js";
+
 /**
  * Select the row editing state.
  */
-export const gridEditRowsStateSelector = state => state.editRows;
+export const gridEditRowsStateSelector = state => state.editRows;
+export const gridRowIsEditingSelector = createSelector(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  editMode
+}) => editMode === GridEditModes.Row && Boolean(editRows[rowId]));
+export const gridEditCellStateSelector = createSelector(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  field
+}) => editRows[rowId]?.[field] ?? null);

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -11,7 +11,7 @@ import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.j
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
-import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
 import { getDefaultCellValue } from "./utils.js";
@@ -338,7 +338,7 @@ export const useGridCellEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+          warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };
       try {
@@ -442,7 +442,7 @@ export const useGridCellEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   useEnhancedEffect(() => {
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
@@ -451,7 +451,7 @@ export const useGridCellEditing = (apiRef, props) => {
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;
-        const originalId = idToIdLookup[id] ?? id;
+        const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({
             id: originalId,

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -9,10 +9,10 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
+import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
-import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
@@ -21,7 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef();
+  const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,
@@ -232,11 +232,10 @@ export const useGridRowEditing = (apiRef, props) => {
   useGridApiOptionHandler(apiRef, 'rowEditStart', props.onRowEditStart);
   useGridApiOptionHandler(apiRef, 'rowEditStop', props.onRowEditStop);
   const getRowMode = React.useCallback(id => {
-    if (props.editMode === GridEditModes.Cell) {
-      return GridRowModes.View;
-    }
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
+    const isEditing = gridRowIsEditingSelector(apiRef.current.state, {
+      rowId: id,
+      editMode: props.editMode
+    });
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
   const updateRowModesModel = useEventCallback(newModel => {
@@ -414,7 +413,7 @@ export const useGridRowEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+          warnOnce(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };
       try {
@@ -571,7 +570,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   useEnhancedEffect(() => {
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later
     const copyOfPrevRowModesModel = prevRowModesModel.current;
@@ -583,7 +582,7 @@ export const useGridRowEditing = (apiRef, props) => {
         mode: GridRowModes.View
       };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
-      const originalId = idToIdLookup[id] ?? id;
+      const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
         updateStateToStartRowEditMode(_extends({
           id: originalId

package/modern/hooks/features/export/useGridPrintExport.js

@@ -44,7 +44,7 @@ export const useGridPrintExport = (apiRef, props) => {
   const previousGridState = React.useRef(null);
   const previousColumnVisibility = React.useRef({});
   const previousRows = React.useRef([]);
-  const previousVirtualizationState = React.useRef();
+  const previousVirtualizationState = React.useRef(null);
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef.current);
   }, [apiRef, hasRootReference]);

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

@@ -1,3 +1,4 @@
+import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
 import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 import { gridSortedRowEntriesSelector } from "../sorting/gridSortingSelector.js";
 import { gridColumnLookupSelector } from "../columns/gridColumnsSelector.js";
@@ -49,7 +50,12 @@ export const gridFilteredDescendantCountLookupSelector = createSelector(gridFilt
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export const gridExpandedSortedRowEntriesSelector = createSelectorMemoized(gridVisibleRowsLookupSelector, gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => sortedRows.filter(row => visibleRowsLookup[row.id] !== false));
+export const gridExpandedSortedRowEntriesSelector = createSelectorMemoized(gridVisibleRowsLookupSelector, gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => {
+  if (isObjectEmpty(visibleRowsLookup)) {
+    return sortedRows;
+  }
+  return sortedRows.filter(row => visibleRowsLookup[row.id] !== false);
+});
 
 /**
  * Get the id of the rows accessible after the filtering process.
@@ -63,7 +69,7 @@ export const gridExpandedSortedRowIdsSelector = createSelectorMemoized(gridExpan
  * Contains the collapsed children.
  * @category Filtering
  */
-export const gridFilteredSortedRowEntriesSelector = createSelectorMemoized(gridFilteredRowsLookupSelector, gridSortedRowEntriesSelector, (filteredRowsLookup, sortedRows) => sortedRows.filter(row => filteredRowsLookup[row.id] !== false));
+export const gridFilteredSortedRowEntriesSelector = createSelectorMemoized(gridFilteredRowsLookupSelector, gridSortedRowEntriesSelector, (filteredRowsLookup, sortedRows) => isObjectEmpty(filteredRowsLookup) ? sortedRows : sortedRows.filter(row => filteredRowsLookup[row.id] !== false));
 
 /**
  * Get the id of the rows accessible after the filtering process.

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

@@ -1,4 +1,9 @@
 import { GridLogicOperator } from "../../../models/gridFilterItem.js";
+export const defaultGridFilterLookup = {
+  filteredRowsLookup: {},
+  filteredChildrenCountLookup: {},
+  filteredDescendantCountLookup: {}
+};
 export const getDefaultGridFilterModel = () => ({
   items: [],
   logicOperator: GridLogicOperator.And,

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

@@ -19,7 +19,7 @@ function getHasEval() {
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
@@ -133,7 +133,7 @@ let filterItemsApplierId = 1;
 /**
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
@@ -181,7 +181,7 @@ export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {

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, apiRef.current.instanceId);
+      const filterModel = gridFilterModelSelector(state, undefined, apiRef.current.instanceId);
       const filterState = apiRef.current.getFilterState(filterModel);
       const newState = _extends({}, state, {
         filter: _extends({}, state.filter, filterState)
@@ -271,12 +268,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 +287,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];

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

@@ -326,10 +326,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

package/modern/hooks/features/index.js

@@ -7,6 +7,7 @@ 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";