@mui/x-data-grid 6.6.0 → 6.8.0

package/locales/itIT.js

@@ -83,10 +83,10 @@ const itITGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'qualunque',

package/locales/jaJP.js

@@ -83,10 +83,10 @@ const jaJPGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'いずれか',

package/locales/koKR.js

@@ -83,10 +83,10 @@ const koKRGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: '아무값',

package/locales/nbNO.js

@@ -83,10 +83,10 @@ const nbNOGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'noen',

package/locales/plPL.js

@@ -83,10 +83,10 @@ const plPLGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'dowolny',

package/locales/ptBR.js

@@ -83,10 +83,10 @@ const ptBRGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'qualquer',

package/locales/roRO.js

@@ -83,10 +83,10 @@ const roROGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'Aleatoriu',

package/locales/ruRU.js

@@ -92,10 +92,10 @@ const ruRUGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'любой',

package/locales/skSK.js

@@ -91,10 +91,10 @@ const skSKGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'akýkoľvek',

package/locales/svSE.js

@@ -83,10 +83,10 @@ const svSEGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'något',

package/locales/trTR.js

@@ -60,18 +60,17 @@ const trTRGrid = {
   filterOperatorIsEmpty: 'boş',
   filterOperatorIsNotEmpty: 'dolu',
   filterOperatorIsAnyOf: 'herhangi biri',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorContains: 'Şunu içerir',
+  headerFilterOperatorEquals: 'Şuna eşittir',
+  headerFilterOperatorStartsWith: 'Şununla başlar',
+  headerFilterOperatorEndsWith: 'Şununla biter',
   // headerFilterOperatorIs: 'Is',
   // headerFilterOperatorNot: 'Is not',
   // headerFilterOperatorAfter: 'Is after',
@@ -83,10 +82,10 @@ const trTRGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'herhangi',
@@ -96,9 +95,9 @@ const trTRGrid = {
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Sütunları göster',
   columnMenuManageColumns: 'Sütunları yönet',
-  columnMenuFilter: 'Filtre uygula',
+  columnMenuFilter: 'Filtre Ekle',
   columnMenuHideColumn: 'Gizle',
-  columnMenuUnsort: 'Sıralama',
+  columnMenuUnsort: 'Varsayılan Sıralama',
   columnMenuSortAsc: 'Sırala - Artan',
   columnMenuSortDesc: 'Sırala - Azalan',
   // Column header text

package/locales/ukUA.js

@@ -97,10 +97,10 @@ const ukUAGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'будь-який',

package/locales/urPK.js

@@ -83,10 +83,10 @@ const urPKGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'کوئی بھی',

package/locales/viVN.js

@@ -83,10 +83,10 @@ const viVNGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'bất kỳ giá trị nào',

package/locales/zhCN.js

@@ -83,10 +83,10 @@ const zhCNGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: '任何',

package/locales/zhTW.js

@@ -83,10 +83,10 @@ const zhTWGrid = {
   // headerFilterOperatorIsAnyOf: 'Is any of',
   // 'headerFilterOperator=': 'Equals',
   // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Is greater than',
-  // 'headerFilterOperator>=': 'Is greater than or equal to',
-  // 'headerFilterOperator<': 'Is less than',
-  // 'headerFilterOperator<=': 'Is less than or equal to',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: '任何值',

package/models/api/gridCoreApi.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GridEventPublisher, GridEventListener, GridEvents } from '../events';
+import { Store } from '../../utils/Store';
 import { EventManager, EventListenerOptions } from '../../utils/EventManager';
 import { GridApiCaches } from '../gridApiCaches';
 import type { GridApiCommon, GridPrivateApiCommon } from './gridApiCommon';
@@ -34,6 +35,11 @@ export interface GridCoreApi {
     instanceId: {
         id: number;
     };
+    /**
+     * The pub/sub store containing a reference to the public state.
+     * @ignore - do not document.
+     */
+    store: Store<GridApiCommon['state']>;
 }
 export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPrivateApi extends GridPrivateApiCommon> {
     /**

package/models/colDef/gridColDef.d.ts

@@ -102,8 +102,9 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     sortComparator?: GridComparatorFn<V>;
     /**
-     * Type allows to merge this object with a default definition [[GridColDef]].
+     * The type of the column.
      * @default 'string'
+     * @see See {@link https://mui.com/x/react-data-grid/column-definition/#column-types column types docs} for more details.
      */
     type?: GridColType;
     /**
@@ -230,7 +231,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
  */
 export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
     /**
-     * Type allows to merge this object with a default definition [[GridColDef]].
+     * The type of the column.
      * @default 'actions'
      */
     type: 'actions';
@@ -248,7 +249,7 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
  */
 export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridBaseColDef<R, V, F> {
     /**
-     * Type allows to merge this object with a default definition [[GridColDef]].
+     * The type of the column.
      * @default 'singleSelect'
      */
     type: 'singleSelect';

package/models/colDef/gridColType.d.ts

@@ -1,2 +1,4 @@
+type LiteralUnion<LiteralType, BaseType> = LiteralType | (BaseType & Record<never, never>);
 export type GridNativeColTypes = 'string' | 'number' | 'date' | 'dateTime' | 'boolean' | 'singleSelect' | 'actions';
-export type GridColType = GridNativeColTypes | string;
+export type GridColType = LiteralUnion<GridNativeColTypes, string>;
+export {};

package/models/events/gridEventLookup.d.ts

@@ -214,6 +214,14 @@ export interface GridHeaderFilterEventLookup {
         params: GridColumnHeaderParams;
         event: React.KeyboardEvent<HTMLElement>;
     };
+    /**
+     * Fired when a column header filter is blurred.
+     * @ignore - do not document.
+     */
+    headerFilterBlur: {
+        params: GridColumnHeaderParams;
+        event: React.KeyboardEvent<HTMLElement>;
+    };
 }
 export interface GridColumnGroupHeaderEventLookup {
     /**
@@ -555,20 +563,20 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         event: React.TouchEvent;
     };
     /**
-     * Fired when the value of the selection checkbox of the header is changed
+     * Fired when the value of the selection checkbox of the header is changed.
      */
     headerSelectionCheckboxChange: {
         params: GridHeaderSelectionCheckboxParams;
     };
     /**
-     * Fired when the value of the selection checkbox of a row is changed
+     * Fired when the value of the selection checkbox of a row is changed.
      */
     rowSelectionCheckboxChange: {
         params: GridRowSelectionCheckboxParams;
         event: React.ChangeEvent<HTMLElement>;
     };
     /**
-     * Fired when the data is copied to the clipboard
+     * Fired when the data is copied to the clipboard.
      */
     clipboardCopy: {
         params: string;

package/modern/components/GridColumnHeaders.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { fastMemo } from '../utils/fastMemo';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
@@ -100,4 +101,5 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   sortColumnLookup: PropTypes.object.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
-export { GridColumnHeaders };
+const MemoizedGridColumnHeaders = fastMemo(GridColumnHeaders);
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/modern/components/GridRow.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { fastMemo } from '../utils/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
@@ -21,6 +21,7 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { randomNumberBetween } from '../utils/utils';
+import { GridCellWrapper, GridCellV7 } from './cell/GridCell';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -67,8 +68,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       containerWidth,
       firstColumnToRender,
       isLastVisible = false,
-      focusedCell,
-      tabbableCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -183,78 +182,27 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
     slots,
     slotProps,
-    classes: rootClasses,
-    disableColumnReorder,
-    getCellClassName
+    disableColumnReorder
   } = rootProps;
+  const CellComponent = slots.cell === GridCellV7 ? GridCellV7 : GridCellWrapper;
   const rowReordering = rootProps.rowReordering;
-  const CellComponent = slots.cell;
-  const getCell = React.useCallback((column, cellProps) => {
-    const cellParams = apiRef.current.getCellParams(rowId, column.field);
-    const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
-      id: rowId,
-      field: column.field
-    });
+  const getCell = (column, cellProps) => {
     const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
-    if (column.cellClassName) {
-      classNames.push(clsx(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
-    }
-    const editCellState = editRowsState[rowId] ? editRowsState[rowId][column.field] : null;
-    let content;
-    if (editCellState == null && column.renderCell) {
-      content = column.renderCell(_extends({}, cellParams, {
-        api: apiRef.current
-      }));
-      // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--withRenderer'], rootClasses?.['cell--withRenderer']));
-    }
-    if (editCellState != null && column.renderEditCell) {
-      const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
-
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
-      const params = _extends({}, cellParams, {
-        row: updatedRow
-      }, editCellStateRest, {
-        api: apiRef.current
-      });
-      content = column.renderEditCell(params);
-      // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--editing'], rootClasses?.['cell--editing']));
-    }
-    if (getCellClassName) {
-      // TODO move to GridCell
-      classNames.push(getCellClassName(cellParams));
-    }
-    const hasFocus = focusedCell === column.field;
-    const tabIndex = tabbableCell === column.field ? 0 : -1;
-    const isSelected = apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
-      id: rowId,
-      field: column.field
-    });
+    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
     return /*#__PURE__*/_jsx(CellComponent, _extends({
-      value: cellParams.value,
-      field: column.field,
+      column: column,
       width: cellProps.width,
       rowId: rowId,
       height: rowHeight,
       showRightBorder: cellProps.showRightBorder,
-      formattedValue: cellParams.formattedValue,
       align: column.align || 'left',
-      cellMode: cellParams.cellMode,
       colIndex: cellProps.indexRelativeToAllColumns,
-      isEditable: cellParams.isEditable,
-      isSelected: isSelected,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: clsx(classNames),
       colSpan: cellProps.colSpan,
-      disableDragEvents: disableDragEvents
-    }, slotProps?.cell, {
-      children: content
-    }), column.field);
-  }, [apiRef, rowId, disableColumnReorder, rowReordering, sortModel.length, treeDepth, editRowsState, getCellClassName, focusedCell, tabbableCell, CellComponent, rowHeight, slotProps?.cell, rootClasses]);
-  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState
+    }, slotProps?.cell), column.field);
+  };
+  const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
     let numberOfBaseSizes = 0;
@@ -303,7 +251,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const randomNumber = randomNumberBetween(10000, 20, 80);
-  const rowType = apiRef.current.getRowNode(rowId).type;
+  const rowNode = apiRef.current.getRowNode(rowId);
+  if (!rowNode) {
+    return null;
+  }
+  const rowType = rowNode.type;
   const cells = [];
   for (let i = 0; i < renderedColumns.length; i += 1) {
     const column = renderedColumns[i];
@@ -327,7 +279,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
           width
         } = cellColSpanInfo.cellProps;
         const contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/_jsx(rootProps.slots.skeletonCell, {
+        cells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
           width: width,
           contentWidth: contentWidth,
           field: column.field,
@@ -394,4 +346,5 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   tabbableCell: PropTypes.string,
   visibleColumns: PropTypes.arrayOf(PropTypes.object)
 } : void 0;
-export { GridRow };
+const MemoizedGridRow = fastMemo(GridRow);
+export { MemoizedGridRow as GridRow };