@mui/x-data-grid 7.24.0 → 7.25.0

package/modern/components/virtualization/GridVirtualScroller.js

@@ -20,9 +20,11 @@ import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerF
 import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
 import { GridVirtualScrollbar as Scrollbar } from "./GridVirtualScrollbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    dimensions,
+    loadingOverlayVariant
   } = ownerState;
   const slots = {
     root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
@@ -33,7 +35,12 @@ const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
 const Scroller = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScroller',
-  overridesResolver: (props, styles) => styles.virtualScroller
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScroller, ownerState.dimensions.hasScrollX && styles['virtualScroller--hasScrollX']];
+  }
 })({
   position: 'relative',
   height: '100%',
@@ -56,7 +63,12 @@ function GridVirtualScroller(props) {
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const overlaysProps = useGridOverlays();
-  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
+  const ownerState = {
+    classes: rootProps.classes,
+    dimensions,
+    loadingOverlayVariant: overlaysProps.loadingOverlayVariant
+  };
+  const classes = useUtilityClasses(ownerState);
   const virtualScroller = useGridVirtualScroller();
   const {
     getContainerProps,
@@ -71,6 +83,7 @@ function GridVirtualScroller(props) {
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
+    ownerState: ownerState,
     children: [/*#__PURE__*/_jsx(GridScrollArea, {
       scrollDirection: "left"
     }), /*#__PURE__*/_jsx(GridScrollArea, {
@@ -78,7 +91,7 @@ function GridVirtualScroller(props) {
     }), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
-      ownerState: rootProps,
+      ownerState: ownerState,
       children: [/*#__PURE__*/_jsxs(TopContainer, {
         children: [!rootProps.unstable_listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "top",

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -19,14 +19,23 @@ const useUtilityClasses = (props, overflowedContent) => {
 const VirtualScrollerContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
-  overridesResolver: (props, styles) => styles.virtualScrollerContent
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
+  }
 })({});
 const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerContent(props, ref) {
   const rootProps = useGridRootProps();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({}, props, {
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: clsx(classes.root, props.className),
     ref: ref
   }));

package/modern/hooks/features/columnMenu/useGridColumnMenu.js

@@ -40,7 +40,6 @@ export const useGridColumnMenu = apiRef => {
         });
       });
       apiRef.current.hidePreferences();
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const hideColumnMenu = React.useCallback(() => {
@@ -82,7 +81,6 @@ export const useGridColumnMenu = apiRef => {
           columnMenu: newState
         });
       });
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const toggleColumnMenu = React.useCallback(field => {

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -500,7 +500,8 @@ export const useGridColumnResize = (apiRef, props) => {
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
         const totalWidth = visibleColumns.reduce((total, column) => total + (widthByField[column.field] ?? column.computedWidth ?? column.width), 0);
-        const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
+        const dimensions = apiRef.current.getRootDimensions();
+        const availableWidth = dimensions.viewportInnerSize.width;
         const remainingWidth = availableWidth - totalWidth;
         if (remainingWidth > 0) {
           const widthPerColumn = remainingWidth / (newColumns.length || 1);

package/modern/hooks/features/columns/useGridColumns.js

@@ -242,9 +242,13 @@ export function useGridColumns(apiRef, props) {
    */
 
   const prevInnerWidth = React.useRef(null);
-  const handleGridSizeChange = viewportInnerSize => {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
+  const handleGridSizeChange = size => {
+    if (prevInnerWidth.current !== size.width) {
+      prevInnerWidth.current = size.width;
+      const hasFlexColumns = gridVisibleColumnDefinitionsSelector(apiRef).some(col => col.flex && col.flex > 0);
+      if (!hasFlexColumns) {
+        return;
+      }
       setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), apiRef.current.getRootDimensions()));
     }
   };

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

@@ -15,6 +15,8 @@ import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { calculatePinnedRowsHeight, 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";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -60,7 +62,7 @@ export function useGridDimensions(apiRef, props) {
   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 columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 1);
   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);
@@ -110,6 +112,9 @@ export function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const updateDimensions = React.useCallback(() => {
+    // 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);
@@ -118,7 +123,7 @@ export function useGridDimensions(apiRef, props) {
     const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
       width: nonPinnedColumnsTotalWidth,
-      height: rowsMeta.currentPageTotalHeight
+      height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
     };
     let viewportOuterSize;
     let viewportInnerSize;
@@ -237,9 +242,6 @@ export function useGridDimensions(apiRef, props) {
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
-
-    // jsdom has no layout capabilities
-    const isJSDOM = /jsdom|HappyDOM/.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;
@@ -282,12 +284,6 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
   rootElement.removeChild(scrollDiv);
   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,10 @@
+import { createSelectorV8 } from "../../../utils/createSelector.js";
 /**
  * Select the row editing state.
  */
-export const gridEditRowsStateSelector = state => state.editRows;
+export const gridEditRowsStateSelector = state => state.editRows;
+export const gridRowIsEditingSelector = createSelectorV8(gridEditRowsStateSelector, (editRows, rowId) => Boolean(editRows[rowId]));
+export const gridEditCellStateSelector = createSelectorV8(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  field
+}) => editRows[rowId]?.[field] ?? null);

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

@@ -1 +1 @@
-export * from "./gridEditingSelectors.js";
+export { gridEditRowsStateSelector } from "./gridEditingSelectors.js";

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";
@@ -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";
@@ -235,8 +235,7 @@ export const useGridRowEditing = (apiRef, props) => {
     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, id);
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
   const updateRowModesModel = useEventCallback(newModel => {
@@ -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/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.RefObject<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.RefObject<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.RefObject<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/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/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;
 
   /**
@@ -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;
     }
@@ -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.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/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 => {

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

@@ -1 +1,8 @@
-export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+import { createSelectorV8 } from "../../../utils/createSelector.js";
+export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+export const gridPreferencePanelSelectorWithLabel = createSelectorV8(gridPreferencePanelStateSelector, (panel, labelId) => {
+  if (panel.open && panel.labelId === labelId) {
+    return true;
+  }
+  return false;
+});

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

@@ -1,3 +1,3 @@
-export * from "./gridPreferencePanelSelector.js";
+export { gridPreferencePanelStateSelector } from "./gridPreferencePanelSelector.js";
 export * from "./gridPreferencePanelState.js";
 export * from "./gridPreferencePanelsValue.js";

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

@@ -15,42 +15,29 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
  */
 export const useGridPreferencesPanel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef(undefined);
-  const immediateTimeout = React.useRef(undefined);
 
   /**
    * API METHODS
    */
   const hidePreferences = React.useCallback(() => {
-    logger.debug('Hiding Preferences Panel');
-    const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
-    if (preferencePanelState.openedPanelValue) {
+    apiRef.current.setState(state => {
+      if (!state.preferencePanel.open) {
+        return state;
+      }
+      logger.debug('Hiding Preferences Panel');
+      const preferencePanelState = gridPreferencePanelStateSelector(state);
       apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
-    }
-    apiRef.current.setState(state => _extends({}, state, {
-      preferencePanel: {
-        open: false
-      }
-    }));
-    apiRef.current.forceUpdate();
+      return _extends({}, state, {
+        preferencePanel: {
+          open: false
+        }
+      });
+    });
   }, [apiRef, logger]);
-
-  // This is to prevent the preferences from closing when you open a select box or another panel,
-  // The issue is in MUI core V4 => Fixed in V5
-  const doNotHidePanel = React.useCallback(() => {
-    immediateTimeout.current = setTimeout(() => clearTimeout(hideTimeout.current), 0);
-  }, []);
-
-  // This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
-  // we can cancel the action if the trigger element still need the panel...
-  const hidePreferencesDelayed = React.useCallback(() => {
-    hideTimeout.current = setTimeout(hidePreferences, 100);
-  }, [hidePreferences]);
   const showPreferences = React.useCallback((newValue, panelId, labelId) => {
     logger.debug('Opening Preferences Panel');
-    doNotHidePanel();
     apiRef.current.setState(state => _extends({}, state, {
       preferencePanel: _extends({}, state.preferencePanel, {
         open: true,
@@ -62,11 +49,10 @@ export const useGridPreferencesPanel = (apiRef, props) => {
     apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
-    apiRef.current.forceUpdate();
-  }, [logger, doNotHidePanel, apiRef]);
+  }, [logger, apiRef]);
   useGridApiMethod(apiRef, {
     showPreferences,
-    hidePreferences: hidePreferencesDelayed
+    hidePreferences
   }, 'public');
 
   /**
@@ -99,14 +85,4 @@ export const useGridPreferencesPanel = (apiRef, props) => {
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(hideTimeout.current);
-      clearTimeout(immediateTimeout.current);
-    };
-  }, []);
 };

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -12,7 +12,7 @@ import { gridExpandedSortedRowIdsSelector, gridFilteredRowsLookupSelector } from
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
@@ -64,7 +64,6 @@ export const useGridRowSelection = (apiRef, props) => {
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
-  const visibleRows = useGridVisibleRows(apiRef, props);
   const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
@@ -412,6 +411,7 @@ export const useGridRowSelection = (apiRef, props) => {
             end = previousRowIndex;
           }
         }
+        const visibleRows = getVisibleRows(apiRef);
         const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
         apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
         return;
@@ -426,7 +426,7 @@ export const useGridRowSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
+  }, [apiRef, handleSingleRowSelection, selectRows, canHaveMultipleSelection]);
   useGridApiEventHandler(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
   useGridApiEventHandler(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
   useGridApiEventHandler(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));