@mui/x-data-grid 6.7.0 → 6.8.0

package/modern/hooks/utils/useGridSelector.js

@@ -1,16 +1,47 @@
+import * as React from 'react';
+import { useLazyRef } from './useLazyRef';
+import { useOnMount } from './useOnMount';
 import { buildWarning } from '../../utils/warning';
+import { fastObjectShallowCompare } from '../../utils/fastObjectShallowCompare';
+const stateNotInitializedWarning = buildWarning(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
-const stateNotInitializedWarning = buildWarning(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
-export const useGridSelector = (apiRef, selector) => {
+function applySelector(apiRef, selector) {
+  if (isOutputSelector(selector)) {
+    return selector(apiRef);
+  }
+  return selector(apiRef.current.state);
+}
+const defaultCompare = Object.is;
+export const objectShallowCompare = fastObjectShallowCompare;
+const createRefs = () => ({
+  state: null,
+  equals: null,
+  selector: null
+});
+export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
       stateNotInitializedWarning();
     }
   }
-  if (isOutputSelector(selector)) {
-    return selector(apiRef);
-  }
-  return selector(apiRef.current.state);
+  const refs = useLazyRef(createRefs);
+  const didInit = refs.current.selector !== null;
+  const [state, setState] = React.useState(
+  // We don't use an initialization function to avoid allocations
+  didInit ? null : applySelector(apiRef, selector));
+  refs.current.state = state;
+  refs.current.equals = equals;
+  refs.current.selector = selector;
+  useOnMount(() => {
+    return apiRef.current.store.subscribe(() => {
+      const newState = applySelector(apiRef, refs.current.selector);
+      if (!refs.current.equals(refs.current.state, newState)) {
+        refs.current.state = newState;
+        setState(newState);
+      }
+    });
+  });
+  return state;
 };

package/modern/hooks/utils/useLazyRef.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+const UNINITIALIZED = {};
+export function useLazyRef(init, initArg) {
+  const ref = React.useRef(UNINITIALIZED);
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+  return ref;
+}

package/modern/hooks/utils/useOnMount.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+const EMPTY = [];
+export function useOnMount(fn) {
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(fn, EMPTY);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.7.0
+ * @mui/x-data-grid v6.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/locales/elGR.js

@@ -1,3 +1,4 @@
+import { elGR as elGRCore } from '@mui/material/locale';
 import { getGridLocalization } from '../utils/getGridLocalization';
 const elGRGrid = {
   // Root
@@ -19,17 +20,15 @@ const elGRGrid = {
   toolbarFiltersTooltipShow: 'Εμφάνιση φίλτρων',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} ενεργά φίλτρα` : `${count} ενεργό φίλτρο`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
-
+  toolbarQuickFilterPlaceholder: 'Αναζήτηση…',
+  toolbarQuickFilterLabel: 'Αναζήτηση',
+  toolbarQuickFilterDeleteIconLabel: 'Καθαρισμός',
   // Export selector toolbar button text
   toolbarExport: 'Εξαγωγή',
   toolbarExportLabel: 'Εξαγωγή',
   toolbarExportCSV: 'Λήψη ως CSV',
-  // toolbarExportPrint: 'Print',
-  // toolbarExportExcel: 'Download as Excel',
-
+  toolbarExportPrint: 'Εκτύπωση',
+  toolbarExportExcel: 'Λήψη ως Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Εύρεση στήλης',
   columnsPanelTextFieldPlaceholder: 'Επικεφαλίδα στήλης',
@@ -38,9 +37,9 @@ const elGRGrid = {
   columnsPanelHideAllButton: 'Απόκρυψη όλων',
   // Filter panel text
   filterPanelAddFilter: 'Προσθήκη φίλτρου',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Αφαίρεση όλων',
   filterPanelDeleteIconLabel: 'Διαγραφή',
-  // filterPanelLogicOperator: 'Logic operator',
+  filterPanelLogicOperator: 'Λογικός τελεστής',
   filterPanelOperator: 'Τελεστές',
   filterPanelOperatorAnd: 'Καί',
   filterPanelOperatorOr: 'Ή',
@@ -60,44 +59,41 @@ const elGRGrid = {
   filterOperatorOnOrBefore: 'είναι ίσο ή πριν',
   filterOperatorIsEmpty: 'είναι κενό',
   filterOperatorIsNotEmpty: 'δεν είναι κενό',
-  // filterOperatorIsAnyOf: 'is any of',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  filterOperatorIsAnyOf: 'είναι οποιοδήποτε από',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'Περιέχει',
+  headerFilterOperatorEquals: 'Ισούται',
+  headerFilterOperatorStartsWith: 'Ξεκινάει με',
+  headerFilterOperatorEndsWith: 'Τελειώνει με',
+  headerFilterOperatorIs: 'Είναι',
+  headerFilterOperatorNot: 'Δεν είναι',
+  headerFilterOperatorAfter: 'Είναι μετά',
+  headerFilterOperatorOnOrAfter: 'Είναι ίσο ή μετά',
+  headerFilterOperatorBefore: 'Είναι πριν',
+  headerFilterOperatorOnOrBefore: 'Είναι ίσο ή πριν',
+  headerFilterOperatorIsEmpty: 'Είναι κενό',
+  headerFilterOperatorIsNotEmpty: 'Δεν είναι κενό',
+  headerFilterOperatorIsAnyOf: 'Είναι οποιοδήποτε από',
+  'headerFilterOperator=': 'Ισούται',
+  'headerFilterOperator!=': 'Δεν ισούται',
+  'headerFilterOperator>': 'Μεγαλύτερο από',
+  'headerFilterOperator>=': 'Μεγαλύτερο ή ίσο με',
+  'headerFilterOperator<': 'Μικρότερο από',
+  'headerFilterOperator<=': 'Μικρότερο ή ίσο με',
   // Filter values text
-  // filterValueAny: 'any',
-  // filterValueTrue: 'true',
-  // filterValueFalse: 'false',
-
+  filterValueAny: 'οποιοδήποτε',
+  filterValueTrue: 'αληθές',
+  filterValueFalse: 'ψευδές',
   // Column menu text
   columnMenuLabel: 'Μενού',
   columnMenuShowColumns: 'Εμφάνιση στηλών',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Διαχείριση στηλών',
   columnMenuFilter: 'Φίλτρο',
   columnMenuHideColumn: 'Απόκρυψη',
   columnMenuUnsort: 'Απενεργοποίηση ταξινόμησης',
@@ -114,49 +110,40 @@ const elGRGrid = {
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} από ${totalCount.toLocaleString()}`,
   // Checkbox selection text
-  // checkboxSelectionHeaderName: 'Checkbox selection',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
-
+  checkboxSelectionHeaderName: 'Επιλογή πλαισίου ελέγχου',
+  checkboxSelectionSelectAllRows: 'Επιλέξτε όλες τις σειρές',
+  checkboxSelectionUnselectAllRows: 'Καταργήση επιλογής όλων των σειρών',
+  checkboxSelectionSelectRow: 'Επιλογή γραμμής',
+  checkboxSelectionUnselectRow: 'Καταργήση επιλογής γραμμής',
   // Boolean cell text
-  // booleanCellTrueLabel: 'yes',
-  // booleanCellFalseLabel: 'no',
-
+  booleanCellTrueLabel: 'ναί',
+  booleanCellFalseLabel: 'όχι',
   // Actions cell more text
-  actionsCellMore: 'περισσότερα'
-
+  actionsCellMore: 'περισσότερα',
   // Column pinning text
-  // pinToLeft: 'Pin to left',
-  // pinToRight: 'Pin to right',
-  // unpin: 'Unpin',
-
+  pinToLeft: 'Καρφιτσώμα στα αριστερά',
+  pinToRight: 'Καρφιτσώμα στα δεξιά',
+  unpin: 'Ξεκαρφίτσωμα',
   // Tree Data
-  // treeDataGroupingHeaderName: 'Group',
-  // treeDataExpand: 'see children',
-  // treeDataCollapse: 'hide children',
-
+  treeDataGroupingHeaderName: 'Ομαδοποίηση',
+  treeDataExpand: 'εμφάνιση περιεχομένων',
+  treeDataCollapse: 'απόκρυψη περιεχομένων',
   // Grouping columns
-  // groupingColumnHeaderName: 'Group',
-  // groupColumn: name => `Group by ${name}`,
-  // unGroupColumn: name => `Stop grouping by ${name}`,
-
+  groupingColumnHeaderName: 'Ομαδοποίηση',
+  groupColumn: name => `Ομαδοποίηση κατά ${name}`,
+  unGroupColumn: name => `Διακοπή ομαδοποίησης κατά ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
-
+  detailPanelToggle: 'Εναλλαγή πίνακα λεπτομερειών',
+  expandDetailPanel: 'Ανάπτυξη',
+  collapseDetailPanel: 'Σύμπτυξη',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-
+  rowReorderingHeaderName: 'Αναδιάταξη γραμμών',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Συσσωμάτωση',
+  aggregationFunctionLabelSum: 'άθροισμα',
+  aggregationFunctionLabelAvg: 'μέση τιμή',
+  aggregationFunctionLabelMin: 'ελάχιστο',
+  aggregationFunctionLabelMax: 'μέγιστο',
+  aggregationFunctionLabelSize: 'μέγεθος'
 };
-
-export const elGR = getGridLocalization(elGRGrid);
+export const elGR = getGridLocalization(elGRGrid, elGRCore);

package/modern/utils/Store.js

@@ -0,0 +1,24 @@
+export class Store {
+  static create(value) {
+    return new Store(value);
+  }
+  constructor(_value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = value => {
+      this.value = value;
+      this.listeners.forEach(l => l(value));
+    };
+    this.value = _value;
+    this.listeners = new Set();
+  }
+}

package/modern/utils/doesSupportPreventScroll.js

@@ -0,0 +1,13 @@
+// Based on https://stackoverflow.com/a/59518678
+let cachedSupportsPreventScroll;
+export function doesSupportPreventScroll() {
+  if (cachedSupportsPreventScroll === undefined) {
+    document.createElement('div').focus({
+      get preventScroll() {
+        cachedSupportsPreventScroll = true;
+        return false;
+      }
+    });
+  }
+  return cachedSupportsPreventScroll;
+}

package/modern/utils/fastMemo.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { fastObjectShallowCompare } from './fastObjectShallowCompare';
+export function fastMemo(component) {
+  return /*#__PURE__*/React.memo(component, fastObjectShallowCompare);
+}

package/modern/utils/fastObjectShallowCompare.js

@@ -0,0 +1,32 @@
+const is = Object.is;
+export function fastObjectShallowCompare(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (!(a instanceof Object) || !(b instanceof Object)) {
+    return false;
+  }
+  let aLength = 0;
+  let bLength = 0;
+
+  /* eslint-disable no-restricted-syntax */
+  /* eslint-disable guard-for-in */
+  for (const key in a) {
+    aLength += 1;
+    if (!is(a[key], b[key])) {
+      return false;
+    }
+    if (!(key in b)) {
+      return false;
+    }
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars */
+  for (const _ in b) {
+    bLength += 1;
+  }
+  /* eslint-enable no-restricted-syntax */
+  /* eslint-enable guard-for-in */
+
+  return aLength === bLength;
+}

package/modern/utils/keyboardUtils.js

@@ -10,11 +10,13 @@ export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace';
 
 // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
-// We need to ignore shortcuts, for example: select all:
+// So event.key.length === 1 is often enough.
+//
+// However, we also need to ignore shortcuts, for example: select all:
 // - Windows: Ctrl+A, event.ctrlKey is true
 // - macOS: ⌘ Command+A, event.metaKey is true
 export function isPrintableKey(event) {
-  return event.key.length === 1 && event.ctrlKey === false && event.metaKey === false;
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
 }
 export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];

package/node/components/GridColumnHeaders.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _fastMemo = require("../utils/fastMemo");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
 var _GridColumnHeadersInner = require("./columnHeaders/GridColumnHeadersInner");
@@ -68,7 +69,6 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     }))
   }));
 });
-exports.GridColumnHeaders = GridColumnHeaders;
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -108,4 +108,6 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   minColumnIndex: _propTypes.default.number,
   sortColumnLookup: _propTypes.default.object.isRequired,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
-} : void 0;
+} : void 0;
+const MemoizedGridColumnHeaders = (0, _fastMemo.fastMemo)(GridColumnHeaders);
+exports.GridColumnHeaders = MemoizedGridColumnHeaders;

package/node/components/GridRow.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _fastMemo = require("../utils/fastMemo");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
@@ -26,10 +27,10 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
 var _utils2 = require("../utils/utils");
+var _GridCell = require("./cell/GridCell");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -75,8 +76,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       containerWidth,
       firstColumnToRender,
       isLastVisible = false,
-      focusedCell,
-      tabbableCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -191,78 +190,27 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
     slots,
     slotProps,
-    classes: rootClasses,
-    disableColumnReorder,
-    getCellClassName
+    disableColumnReorder
   } = rootProps;
+  const CellComponent = slots.cell === _GridCell.GridCellV7 ? _GridCell.GridCellV7 : _GridCell.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((0, _clsx.default)(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((0, _extends2.default)({}, cellParams, {
-        api: apiRef.current
-      }));
-      // TODO move to GridCell
-      classNames.push((0, _clsx.default)(_gridClasses.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 = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded2);
-      const params = (0, _extends2.default)({}, cellParams, {
-        row: updatedRow
-      }, editCellStateRest, {
-        api: apiRef.current
-      });
-      content = column.renderEditCell(params);
-      // TODO move to GridCell
-      classNames.push((0, _clsx.default)(_gridClasses.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__*/(0, _jsxRuntime.jsx)(CellComponent, (0, _extends2.default)({
-      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: (0, _clsx.default)(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 = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.unstable_getRowInternalSizes(rowId)), _useGridSelector.objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
     let numberOfBaseSizes = 0;
@@ -311,7 +259,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const randomNumber = (0, _utils2.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];
@@ -335,7 +287,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
           width
         } = cellColSpanInfo.cellProps;
         const contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.skeletonCell, {
+        cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
           width: width,
           contentWidth: contentWidth,
           field: column.field,
@@ -366,7 +318,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     })]
   }));
 });
-exports.GridRow = GridRow;
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -402,4 +353,6 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    */
   tabbableCell: _propTypes.default.string,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object)
-} : void 0;
+} : void 0;
+const MemoizedGridRow = (0, _fastMemo.fastMemo)(GridRow);
+exports.GridRow = MemoizedGridRow;