@mui/x-data-grid 5.16.0 → 5.17.2

package/hooks/features/rows/useGridRowsMeta.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { debounce } from '@mui/material/utils';
+import { debounce, capitalize } from '@mui/material/utils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -47,7 +47,7 @@ export const useGridRowsMeta = (apiRef, props) => {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
-            base: rowHeightFromDensity
+            baseCenter: rowHeightFromDensity
           },
           isResized: false,
           autoHeight: false,
@@ -62,7 +62,7 @@ export const useGridRowsMeta = (apiRef, props) => {
         sizes
       } = rowsHeightLookup.current[row.id];
       let baseRowHeight = rowHeightFromDensity;
-      const existingBaseRowHeight = sizes.base;
+      const existingBaseRowHeight = sizes.baseCenter;
 
       if (isResized) {
         // Do not recalculate resized row height and use the value from the lookup
@@ -93,12 +93,19 @@ export const useGridRowsMeta = (apiRef, props) => {
         }
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-      } // We use an object to make simple to check if a height is already added or not
+      }
 
+      const existingBaseSizes = Object.entries(sizes).reduce((acc, [key, size]) => {
+        if (/^base[A-Z]/.test(key)) {
+          acc[key] = size;
+        }
 
-      const initialHeights = {
-        base: baseRowHeight
-      };
+        return acc;
+      }, {}); // We use an object to make simple to check if a height is already added or not
+
+      const initialHeights = _extends({}, existingBaseSizes, {
+        baseCenter: baseRowHeight
+      });
 
       if (getRowSpacing) {
         var _spacing$top, _spacing$bottom;
@@ -121,9 +128,17 @@ export const useGridRowsMeta = (apiRef, props) => {
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
+      let maximumBaseSize = 0;
+      let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
-      const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
-      return acc + finalRowHeight;
+      Object.entries(processedSizes).forEach(([size, value]) => {
+        if (/^base[A-Z]/.test(size)) {
+          maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
+        } else {
+          otherSizes += value;
+        }
+      });
+      return acc + maximumBaseSize + otherSizes;
     }, 0);
     pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(row => {
       calculateRowProcessedSizes(row);
@@ -149,7 +164,7 @@ export const useGridRowsMeta = (apiRef, props) => {
   }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   const getRowHeight = React.useCallback(rowId => {
     const height = rowsHeightLookup.current[rowId];
-    return height ? height.sizes.base : rowHeightFromDensity;
+    return height ? height.sizes.baseCenter : rowHeightFromDensity;
   }, [rowHeightFromDensity]);
 
   const getRowInternalSizes = rowId => {
@@ -159,21 +174,21 @@ export const useGridRowsMeta = (apiRef, props) => {
   };
 
   const setRowHeight = React.useCallback((id, height) => {
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes.baseCenter = height;
     rowsHeightLookup.current[id].isResized = true;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
   const debouncedHydrateRowsMeta = React.useMemo(() => debounce(hydrateRowsMeta), [hydrateRowsMeta]);
-  const storeMeasuredRowHeight = React.useCallback((id, height) => {
+  const storeMeasuredRowHeight = React.useCallback((id, height, position) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
     } // Only trigger hydration if the value is different, otherwise we trigger a loop
 
 
-    const needsHydration = rowsHeightLookup.current[id].sizes.base !== height;
+    const needsHydration = rowsHeightLookup.current[id].sizes[`base${capitalize(position)}`] !== height;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes[`base${capitalize(position)}`] = height;
 
     if (needsHydration) {
       debouncedHydrateRowsMeta();
@@ -191,7 +206,11 @@ export const useGridRowsMeta = (apiRef, props) => {
     if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
       lastMeasuredRowIndex.current = index;
     }
-  }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  }, []);
+  const resetRowHeights = React.useCallback(() => {
+    rowsHeightLookup.current = {};
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
 
   React.useEffect(() => {
@@ -205,7 +224,8 @@ export const useGridRowsMeta = (apiRef, props) => {
     unstable_getRowHeight: getRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,
     unstable_setRowHeight: setRowHeight,
-    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight
+    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight,
+    resetRowHeights
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
 };

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -25,10 +25,10 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
     updateRenderZonePosition: (nextRenderContext: GridRenderContext) => void;
     getRows: (params?: {
         renderContext: GridRenderContext | null;
+        position?: string | undefined;
         minFirstColumn?: number | undefined;
         maxLastColumn?: number | undefined;
         availableSpace?: number | null | undefined;
-        ignoreAutoHeight?: boolean | undefined;
         rows?: GridRowEntry<import("../../../models").GridValidRowModel>[] | undefined;
         rowIndexOffset?: number | undefined;
     }) => JSX.Element[] | null;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -215,8 +215,19 @@ export const useGridVirtualScroller = props => {
   }, [renderContext, updateRenderZonePosition]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
     setRenderContext(nextRenderContext);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    apiRef.current.publishEvent('renderedRowsIntervalChange', {
+      firstRowToRender,
+      lastRowToRender
+    });
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext]);
+  }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   React.useEffect(() => {
     if (containerWidth == null) {
       return;
@@ -287,8 +298,8 @@ export const useGridVirtualScroller = props => {
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
       availableSpace = containerWidth,
-      ignoreAutoHeight,
-      rowIndexOffset = 0
+      rowIndexOffset = 0,
+      position = 'center'
     } = params;
 
     if (!nextRenderContext || availableSpace == null) {
@@ -358,7 +369,7 @@ export const useGridVirtualScroller = props => {
         model
       } = renderedRows[i];
       const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
-      const baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(id) || ignoreAutoHeight ? apiRef.current.unstable_getRowHeight(id) : 'auto';
+      const baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
 
       if (selectedRowsLookup[id] == null) {
@@ -384,7 +395,8 @@ export const useGridVirtualScroller = props => {
         selected: isSelected,
         index: rowIndexOffset + ((currentPage == null ? void 0 : (_currentPage$range5 = currentPage.range) == null ? void 0 : _currentPage$range5.firstRowIndex) || 0) + firstRowToRender + i,
         containerWidth: availableSpace,
-        isLastVisible: lastVisibleRowIndex
+        isLastVisible: lastVisibleRowIndex,
+        position: position
       }, typeof getRowProps === 'function' ? getRowProps(id, model) : {}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.row), id));
     }
 

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.16.0
+/** @license MUI v5.17.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/index.d.ts

@@ -45,7 +45,7 @@ export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export type { GridRestoreStatePreProcessingContext } from '../hooks/features/statePersistence/gridStatePersistenceInterface';
-export { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+export { useGridVirtualScroller, getRenderableIndexes, } from '../hooks/features/virtualization/useGridVirtualScroller';
 export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';

package/internals/index.js

@@ -38,7 +38,7 @@ export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
-export { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+export { useGridVirtualScroller, getRenderableIndexes } from '../hooks/features/virtualization/useGridVirtualScroller';
 export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';

package/legacy/components/GridRow.js

@@ -1,11 +1,8 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
-
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-
-/* eslint-disable jsx-a11y/interactive-supports-focus */
+var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -24,6 +21,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelTogg
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridDensityHeaderGroupingMaxDepthSelector } from '../hooks/features/density/densitySelector';
+import { randomNumberBetween } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -64,6 +62,7 @@ function GridRow(props) {
       row = props.row,
       index = props.index,
       styleProp = props.style,
+      position = props.position,
       rowHeight = props.rowHeight,
       className = props.className,
       visibleColumns = props.visibleColumns,
@@ -111,9 +110,9 @@ function GridRow(props) {
   React.useLayoutEffect(function () {
     if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight, position);
     }
-  }, [apiRef, rowHeight, rowId]);
+  }, [apiRef, rowHeight, rowId, position]);
   React.useLayoutEffect(function () {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -140,13 +139,13 @@ function GridRow(props) {
           entry = _entries[0];
 
       var height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height, position);
     });
     resizeObserver.observe(rootElement);
     return function () {
       return resizeObserver.disconnect();
     };
-  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
+  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (event) {
       // Ignore portal
@@ -204,48 +203,9 @@ function GridRow(props) {
 
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
+  var getCell = React.useCallback(function (column, cellProps) {
+    var _rootProps$components;
 
-  var style = _extends({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight: rowHeight
-  });
-
-  var sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
-
-  if (sizes != null && sizes.spacingTop) {
-    var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-
-  if (sizes != null && sizes.spacingBottom) {
-    var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-
-    style[_property] = sizes.spacingBottom;
-  }
-
-  var rowClassName = null;
-
-  if (typeof rootProps.getRowClassName === 'function') {
-    var indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
-
-    var rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
-      isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-      indexRelativeToCurrentPage: indexRelativeToCurrentPage
-    });
-
-    rowClassName = rootProps.getRowClassName(rowParams);
-  }
-
-  var cells = [];
-
-  for (var i = 0; i < renderedColumns.length; i += 1) {
-    var column = renderedColumns[i];
-    var indexRelativeToAllColumns = firstColumnToRender + i;
-    var isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
-    var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-    var showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     var cellParams = apiRef.current.getCellParams(rowId, column.field);
     var classNames = [];
     var disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
@@ -295,52 +255,143 @@ function GridRow(props) {
 
     var hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     var tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
+    return /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
+      value: cellParams.value,
+      field: column.field,
+      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,
+      hasFocus: hasFocus,
+      tabIndex: tabIndex,
+      className: clsx(classNames),
+      colSpan: cellProps.colSpan,
+      disableDragEvents: disableDragEvents
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+      children: content
+    }), column.field);
+  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, row, rowHeight, rowId, treeDepth, sortModel.length]);
+  var sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+  var minHeight = rowHeight;
+
+  if (minHeight === 'auto' && sizes) {
+    var numberOfBaseSizes = 0;
+    var maximumSize = Object.entries(sizes).reduce(function (acc, _ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          size = _ref4[1];
+
+      var isBaseHeight = /^base[A-Z]/.test(key);
+
+      if (!isBaseHeight) {
+        return acc;
+      }
+
+      numberOfBaseSizes += 1;
+
+      if (size > acc) {
+        return size;
+      }
+
+      return acc;
+    }, 0);
+
+    if (maximumSize > 0 && numberOfBaseSizes > 1) {
+      minHeight = maximumSize;
+    }
+  }
+
+  var style = _extends({}, styleProp, {
+    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+    // max-height doesn't support "auto"
+    minHeight: minHeight
+  });
+
+  if (sizes != null && sizes.spacingTop) {
+    var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes != null && sizes.spacingBottom) {
+    var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+
+    style[_property] = sizes.spacingBottom;
+  }
+
+  var rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+
+  if (typeof rootProps.getRowClassName === 'function') {
+    var _currentPage$range;
+
+    var indexRelativeToCurrentPage = index - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
+
+    var rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage: indexRelativeToCurrentPage
+    });
+
+    rowClassNames.push(rootProps.getRowClassName(rowParams));
+  }
+
+  var randomNumber = randomNumberBetween(10000, 20, 80);
+  var cells = [];
+
+  for (var i = 0; i < renderedColumns.length; i += 1) {
+    var column = renderedColumns[i];
+    var indexRelativeToAllColumns = firstColumnToRender + i;
+    var isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
+    var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+    var showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
 
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      var _rootProps$components;
-
-      var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
-          colSpan = _cellColSpanInfo$cell.colSpan,
-          width = _cellColSpanInfo$cell.width;
-      cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
-        value: cellParams.value,
-        field: column.field,
-        width: width,
-        rowId: rowId,
-        height: rowHeight,
-        showRightBorder: showRightBorder,
-        formattedValue: cellParams.formattedValue,
-        align: column.align || 'left',
-        cellMode: cellParams.cellMode,
-        colIndex: indexRelativeToAllColumns,
-        isEditable: cellParams.isEditable,
-        hasFocus: hasFocus,
-        tabIndex: tabIndex,
-        className: clsx(classNames),
-        colSpan: colSpan,
-        disableDragEvents: disableDragEvents
-      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
-        children: content
-      }), column.field));
+      if (row) {
+        var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
+            colSpan = _cellColSpanInfo$cell.colSpan,
+            width = _cellColSpanInfo$cell.width;
+        var cellProps = {
+          width: width,
+          colSpan: colSpan,
+          showRightBorder: showRightBorder,
+          indexRelativeToAllColumns: indexRelativeToAllColumns
+        };
+        cells.push(getCell(column, cellProps));
+      } else {
+        var _width = cellColSpanInfo.cellProps.width;
+        var contentWidth = Math.round(randomNumber());
+        cells.push( /*#__PURE__*/_jsx(rootProps.components.SkeletonCell, {
+          width: _width,
+          contentWidth: contentWidth,
+          field: column.field,
+          align: column.align
+        }, column.field));
+      }
     }
   }
 
   var emptyCellWidth = containerWidth - columnsTotalWidth;
+  var eventHandlers = row ? {
+    onClick: publishClick,
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
+  } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: clsx(rowClassName, classes.root, className),
+    className: clsx.apply(void 0, _toConsumableArray(rowClassNames).concat([classes.root, className])),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
-    style: style,
-    onClick: publishClick,
-    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
-    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
-    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
-  }, other, {
+    style: style
+  }, eventHandlers, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     })]
@@ -365,8 +416,9 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
+  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.object.isRequired,
+  row: PropTypes.object,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/legacy/components/cell/GridBooleanCell.js

@@ -133,7 +133,8 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/legacy/components/cell/GridCell.js

@@ -99,6 +99,16 @@ function GridCell(props) {
       }
     };
   }, [apiRef, field, onMouseUp, rowId]);
+  var publishMouseDown = React.useCallback(function (eventName) {
+    return function (event) {
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+
+      if (onMouseDown) {
+        onMouseDown(event);
+      }
+    };
+  }, [apiRef, field, onMouseDown, rowId]);
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (event) {
       // Ignore portal
@@ -205,7 +215,7 @@ function GridCell(props) {
     tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
     onClick: publish('cellClick', onClick),
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),
-    onMouseDown: publish('cellMouseDown', onMouseDown),
+    onMouseDown: publishMouseDown('cellMouseDown'),
     onMouseUp: publishMouseUp('cellMouseUp'),
     onKeyDown: publish('cellKeyDown', onKeyDown)
   }, draggableEventHandlers, other, {

package/legacy/components/cell/GridEditBooleanCell.js

@@ -201,7 +201,8 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/legacy/components/cell/GridEditDateCell.js

@@ -252,7 +252,8 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/legacy/components/cell/GridEditInputCell.js

@@ -218,7 +218,8 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]),
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -321,7 +321,8 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/legacy/components/cell/GridSkeletonCell.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["field", "align", "width", "contentWidth"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Skeleton from '@mui/material/Skeleton';
+import { capitalize } from '@mui/material/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var align = ownerState.align,
+      classes = ownerState.classes;
+  var slots = {
+    root: ['cell', 'cellSkeleton', "cell--text".concat(capitalize(align))]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridSkeletonCell(props) {
+  var field = props.field,
+      align = props.align,
+      width = props.width,
+      contentWidth = props.contentWidth,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes,
+    align: align
+  };
+  var classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx("div", _extends({
+    className: classes.root,
+    style: {
+      width: width
+    }
+  }, other, {
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      width: "".concat(contentWidth, "%")
+    })
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.string.isRequired,
+  contentWidth: PropTypes.number.isRequired,
+  field: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+export { GridSkeletonCell };

package/legacy/components/cell/index.js

@@ -5,4 +5,5 @@ export * from './GridEditDateCell';
 export * from './GridEditInputCell';
 export * from './GridEditSingleSelectCell';
 export * from './GridActionsCell';
-export * from './GridActionsCellItem';
+export * from './GridActionsCellItem';
+export * from './GridSkeletonCell';