@mui/x-data-grid 7.24.0 → 7.25.0

package/CHANGELOG.md

@@ -3,6 +3,154 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.25.0
+
+_Jan 31, 2025_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@k-rajat19, @lauri865.
+Following are all team members who have contributed to this release:
+@KenanYusuf, @MBilalShafi, @arminmeh.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.25.0`
+
+- [DataGrid] Fix `renderContext` calculation with scroll bounce / over-scroll (#16368) @lauri865
+- [DataGrid] Refactor row state propagation (#16351) @lauri865
+- [DataGrid] Add missing style overrides (#16272) (#16358) @KenanYusuf
+- [DataGrid] Fix header filters keyboard navigation when there are no rows (#16369) @k-rajat19
+- [DataGrid] Fix order of `onClick` prop on toolbar buttons (#16364) @KenanYusuf
+- [DataGrid] Improve test coverage of server side data source (#15988) @MBilalShafi
+- [DataGrid] Remove outdated warning (#16370) @MBilalShafi
+- [DataGrid] Respect width of `iconContainer` during autosizing (#16409) @michelengelen
+
+#### `@mui/x-data-grid-pro@7.25.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.25.0`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiRef` for Pro and Premium packages on React < 19 (#16348) @arminmeh
+- [DataGridPro] Fetch new rows only once when multiple models are changed in one cycle (#16382) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.25.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.25.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.25.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@7.25.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.25.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.25.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.25.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.25.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.25.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.25.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.25.0`.
+
+### Docs
+
+- [docs] Improve release documentation (#16322) @MBilalShafi
+
+### Core
+
+- [test] Fix flaky data source tests in DataGrid (#16382) @lauri865
+
+## 7.24.1
+
+_Jan 24, 2025_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌍 Improve Persian (fa-IR) locale on the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@mostafaRoosta74, @lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @JCQuintas, @cherniavskii, @LukasTy, @arminmeh.
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.24.1`
+
+- [DataGrid] Fix toggling preference panel from toolbar (#16276) @lauri865
+- [DataGrid] Only try to mount filter button if there are filters present (#16269) @lauri865
+- [DataGrid] Revert `apiRef` to be `MutableRefObject` for React versions < 19 (#16320) @arminmeh
+- [l10n] Improve Persian (fa-IR) locale (#15964) @mostafaRoosta74
+
+#### `@mui/x-data-grid-pro@7.24.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.24.1`.
+
+#### `@mui/x-data-grid-premium@7.24.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.24.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.24.1`
+
+- [fields] Reset `all` selected state on section edit (#16232) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.24.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.24.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.24.1`
+
+- [charts] Handle case where gradient stop `offset` could be `Infinite` (@JCQuintas) (#16309) @JCQuintas
+
+#### `@mui/x-charts-pro@7.24.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.24.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.24.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.24.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.24.1`.
+
+### Docs
+
+- [docs] Fix `domainLimit` definition (#16271) @alexfauquette
+
+### Core
+
+- [core] Make `@mui/x-internals` a dependency of `@mui/x-license` (#16265) @alexfauquette
+- [test] Fix flaky column pinning tests (#16228) @cherniavskii
+- [test] Fix flaky tests (#16264) @lauri865
+
 ## 7.24.0
 
 _Jan 17, 2025_

package/DataGrid/DataGrid.js

@@ -18,17 +18,11 @@ const configuration = {
     useGridRowAriaAttributes
   }
 };
-let propValidators;
-if (process.env.NODE_ENV !== 'production') {
-  propValidators = [...propValidatorsDataGrid,
-  // Only validate in MIT version
-  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
-}
 const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useDataGridComponent(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
-    validateProps(props, propValidators);
+    validateProps(props, propValidatorsDataGrid);
   }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,

package/DataGrid/useDataGridComponent.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from '../models/props/DataGridProps';
 import { GridApiCommunity, GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
-export declare const useDataGridComponent: (inputApiRef: React.RefObject<GridApiCommunity> | undefined, props: DataGridProcessedProps) => import("react").RefObject<GridPrivateApiCommunity>;
+export declare const useDataGridComponent: (inputApiRef: RefObject<GridApiCommunity> | undefined, props: DataGridProcessedProps) => import("react").RefObject<GridPrivateApiCommunity>;

package/components/GridRow.d.ts

@@ -12,7 +12,6 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     index: number;
     rowHeight: number | 'auto';
-    offsetTop: number | undefined;
     offsetLeft: number;
     columnsTotalWidth: number;
     firstColumnIndex: number;

package/components/GridRow.js

@@ -1,19 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRowModel.js";
+import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
+import { GridEditModes, GridCellModes } from "../models/gridEditRowModel.js";
 import { gridClasses } from "../constants/gridClasses.js";
 import { composeGridClasses } from "../utils/composeGridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";
 import { gridColumnPositionsSelector } from "../hooks/features/columns/gridColumnsSelector.js";
-import { useGridSelector, objectShallowCompare } from "../hooks/utils/useGridSelector.js";
+import { useGridSelector, objectShallowCompare, useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
 import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
@@ -21,12 +22,20 @@ import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
-import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";
+import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "../hooks/features/editing/gridEditingSelectors.js";
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { createSelectorV8 } from "../utils/createSelector.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const isRowReorderingEnabledSelector = createSelectorV8(gridEditRowsStateSelector, (editRows, rowReordering) => {
+  if (!rowReordering) {
+    return false;
+  }
+  const isEditingRows = !isObjectEmpty(editRows);
+  return !isEditingRows;
+});
 const GridRow = forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -65,10 +74,11 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
+  const rowReordering = rootProps.rowReordering;
+  const isRowReorderingEnabled = useGridSelectorV8(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = useForkRef(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = apiRef.current.getRowMode(rowId) === GridRowModes.Edit;
+  const editing = useGridSelectorV8(apiRef, gridRowIsEditingSelector, rowId);
   const editable = rootProps.editMode === GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -145,7 +155,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     slotProps,
     disableColumnReorder
   } = rootProps;
-  const rowReordering = rootProps.rowReordering;
   const heightEntry = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
@@ -188,6 +197,11 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
+
+  /* Start of rendering */
+  if (!rowNode) {
+    return null;
+  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -205,14 +219,12 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
         align: column.align
       }, column.field);
     }
-    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
     // fixes https://github.com/mui/mui-x/issues/11126
     const isReorderCell = column.field === '__reorder__';
-    const isEditingRows = Object.keys(editRowsState).length > 0;
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
     const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
@@ -225,20 +237,15 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState,
       isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       showLeftBorder: showLeftBorder,
-      showRightBorder: showRightBorder
+      showRightBorder: showRightBorder,
+      row: row,
+      rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
-
-  /* Start of rendering */
-
-  if (!rowNode) {
-    return null;
-  }
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, PinnedColumnPosition.LEFT);
@@ -316,7 +323,6 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isNotVisible: PropTypes.bool.isRequired,
   lastColumnIndex: PropTypes.number.isRequired,
   offsetLeft: PropTypes.number.isRequired,
-  offsetTop: PropTypes.number,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,

package/components/cell/GridCell.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { GridRowId, GridEditCellProps } from '../../models';
-import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
+import { GridRowId } from '../../models';
+import { GridAlignment, GridStateColDef } from '../../models/colDef/gridColDef';
+import { GridRowModel, GridTreeNode } from '../../models/gridRows';
 import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 import { PinnedColumnPosition } from '../../internals/constants';
 export declare const gridPinnedColumnPositionLookup: {
@@ -13,13 +14,14 @@ export type GridCellProps = React.HTMLAttributes<HTMLDivElement> & {
     align: GridAlignment;
     className?: string;
     colIndex: number;
-    column: GridColDef;
+    column: GridStateColDef;
+    row: GridRowModel;
     rowId: GridRowId;
+    rowNode: GridTreeNode;
     width: number;
     colSpan?: number;
     disableDragEvents?: boolean;
     isNotVisible: boolean;
-    editCellState: GridEditCellProps<any> | null;
     pinnedOffset?: number;
     pinnedPosition: PinnedColumnPosition;
     showRightBorder: boolean;
@@ -45,13 +47,14 @@ declare const MemoizedGridCell: React.ForwardRefExoticComponent<GridCellProps> |
     align: GridAlignment;
     className?: string;
     colIndex: number;
-    column: GridColDef;
+    column: GridStateColDef;
+    row: GridRowModel;
     rowId: GridRowId;
+    rowNode: GridTreeNode;
     width: number;
     colSpan?: number;
     disableDragEvents?: boolean;
     isNotVisible: boolean;
-    editCellState: GridEditCellProps<any> | null;
     pinnedOffset?: number;
     pinnedPosition: PinnedColumnPosition;
     showRightBorder: boolean;

package/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "row", "rowId", "rowNode", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -12,13 +12,14 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
-import { useGridSelector, objectShallowCompare } from "../../hooks/utils/useGridSelector.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector, useGridSelectorV8 } from "../../hooks/utils/useGridSelector.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { gridFocusCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
+import { gridFocusCellSelector, gridTabIndexCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import { PinnedColumnPosition } from "../../internals/constants.js";
 import { gridRowSpanningHiddenCellsSelector, gridRowSpanningSpannedCellsSelector } from "../../hooks/features/rows/gridRowSpanningSelectors.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { gridEditCellStateSelector } from "../../hooks/features/editing/gridEditingSelectors.js";
 import { attachPinnedStyle } from "../../internals/utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPinnedColumnPositionLookup = {
@@ -27,30 +28,6 @@ export const gridPinnedColumnPositionLookup = {
   [PinnedColumnPosition.NONE]: undefined,
   [PinnedColumnPosition.VIRTUAL]: undefined
 };
-const EMPTY_CELL_PARAMS = {
-  id: -1,
-  field: '__unset__',
-  row: {},
-  rowNode: {
-    id: -1,
-    depth: 0,
-    type: 'leaf',
-    parent: -1,
-    groupingKey: null
-  },
-  colDef: {
-    type: 'string',
-    field: '__unset__',
-    computedWidth: 0
-  },
-  cellMode: GridCellModes.View,
-  hasFocus: false,
-  tabIndex: -1,
-  value: null,
-  formattedValue: '__unset__',
-  isEditable: false,
-  api: {}
-};
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -74,8 +51,9 @@ let warnedOnce = false;
 const GridCell = forwardRef(function GridCell(props, ref) {
   const {
       column,
+      row,
       rowId,
-      editCellState,
+      rowNode,
       align,
       colIndex,
       width,
@@ -99,22 +77,29 @@ const GridCell = forwardRef(function GridCell(props, ref) {
       onDragOver
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const isRtl = useRtl();
   const field = column.field;
-  const cellParams = useGridSelector(apiRef, () => {
-    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
-    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
-    // updated, while `rowId`/`fieldId` reference an entry in the old state.
-    const row = apiRef.current.getRow(rowId);
-    if (!row) {
-      return EMPTY_CELL_PARAMS;
-    }
-    const result = apiRef.current.getCellParams(rowId, field);
-    result.api = apiRef.current;
-    return result;
-  }, objectShallowCompare);
+  const editCellState = useGridSelectorV8(apiRef, gridEditCellStateSelector, {
+    rowId,
+    field
+  });
+  const cellMode = editCellState ? GridCellModes.Edit : GridCellModes.View;
+  const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
+    colDef: column,
+    cellMode,
+    rowNode: rowNode,
+    tabIndex: useGridSelector(apiRef, () => {
+      const cellTabIndex = gridTabIndexCellSelector(apiRef);
+      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+    }),
+    hasFocus: useGridSelector(apiRef, () => {
+      const focus = gridFocusCellSelector(apiRef);
+      return focus?.id === rowId && focus.field === field;
+    })
+  });
+  cellParams.api = apiRef.current;
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field
@@ -122,7 +107,6 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   const hiddenCells = useGridSelector(apiRef, gridRowSpanningHiddenCellsSelector);
   const spannedCells = useGridSelector(apiRef, gridRowSpanningSpannedCellsSelector);
   const {
-    cellMode,
     hasFocus,
     isEditable = false,
     value
@@ -244,9 +228,6 @@ const GridCell = forwardRef(function GridCell(props, ref) {
       }, style)
     });
   }
-  if (cellParams === EMPTY_CELL_PARAMS) {
-    return null;
-  }
   let handleFocus = other.onFocus;
   if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
@@ -330,16 +311,12 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   colSpan: PropTypes.number,
   column: PropTypes.object.isRequired,
   disableDragEvents: PropTypes.bool,
-  editCellState: PropTypes.shape({
-    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-    isProcessingProps: PropTypes.bool,
-    isValidating: PropTypes.bool,
-    value: PropTypes.any
-  }),
   isNotVisible: PropTypes.bool.isRequired,
   pinnedOffset: PropTypes.number,
   pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
+  row: PropTypes.object.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  rowNode: PropTypes.object.isRequired,
   showLeftBorder: PropTypes.bool.isRequired,
   showRightBorder: PropTypes.bool.isRequired,
   width: PropTypes.number.isRequired

package/components/columnHeaders/GridColumnHeaderFilterIconButton.d.ts

@@ -5,8 +5,8 @@ export interface ColumnHeaderFilterIconButtonProps {
     counter?: number;
     onClick?: (params: GridColumnHeaderParams, event: React.MouseEvent<HTMLButtonElement>) => void;
 }
-declare function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonProps): React.JSX.Element | null;
-declare namespace GridColumnHeaderFilterIconButton {
+declare function GridColumnHeaderFilterIconButtonWrapped(props: ColumnHeaderFilterIconButtonProps): React.JSX.Element | null;
+declare namespace GridColumnHeaderFilterIconButtonWrapped {
     var propTypes: any;
 }
-export { GridColumnHeaderFilterIconButton };
+export { GridColumnHeaderFilterIconButtonWrapped as GridColumnHeaderFilterIconButton };

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { useGridSelector } from "../../hooks/index.js";
-import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
+import { useGridSelectorV8 } from "../../hooks/utils/useGridSelector.js";
+import { gridPreferencePanelSelectorWithLabel, gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
@@ -19,6 +19,21 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+function GridColumnHeaderFilterIconButtonWrapped(props) {
+  if (!props.counter) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridColumnHeaderFilterIconButton, _extends({}, props));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButtonWrapped.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
 function GridColumnHeaderFilterIconButton(props) {
   const {
     counter,
@@ -31,8 +46,8 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const labelId = useId();
+  const isOpen = useGridSelectorV8(apiRef, gridPreferencePanelSelectorWithLabel, labelId);
   const panelId = useId();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
@@ -53,7 +68,6 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const open = preferencePanel.open && preferencePanel.labelId === labelId;
   const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     id: labelId,
     onClick: toggleFilter,
@@ -62,8 +76,8 @@ function GridColumnHeaderFilterIconButton(props) {
     size: "small",
     tabIndex: -1,
     "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": open ? panelId : undefined
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? panelId : undefined
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,
@@ -92,4 +106,4 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTyp
   field: PropTypes.string.isRequired,
   onClick: PropTypes.func
 } : void 0;
-export { GridColumnHeaderFilterIconButton };
+export { GridColumnHeaderFilterIconButtonWrapped as GridColumnHeaderFilterIconButton };