@mui/x-data-grid 5.16.0 → 5.17.2

package/modern/components/GridRow.js

@@ -1,10 +1,6 @@
 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", "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 */
+const _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';
@@ -23,6 +19,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 +61,7 @@ function GridRow(props) {
     row,
     index,
     style: styleProp,
+    position,
     rowHeight,
     className,
     visibleColumns,
@@ -110,9 +108,9 @@ function GridRow(props) {
   React.useLayoutEffect(() => {
     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(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -137,11 +135,11 @@ function GridRow(props) {
     const resizeObserver = new ResizeObserver(entries => {
       const [entry] = entries;
       const 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 () => resizeObserver.disconnect();
-  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
+  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     // The target is not an element when triggered by a Select inside the cell
@@ -197,47 +195,7 @@ function GridRow(props) {
 
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
-
-  const style = _extends({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight: rowHeight
-  });
-
-  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
-
-  if (sizes?.spacingTop) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-
-  if (sizes?.spacingBottom) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-    style[property] = sizes.spacingBottom;
-  }
-
-  let rowClassName = null;
-
-  if (typeof rootProps.getRowClassName === 'function') {
-    const indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
-
-    const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
-      isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-      indexRelativeToCurrentPage
-    });
-
-    rowClassName = rootProps.getRowClassName(rowParams);
-  }
-
-  const cells = [];
-
-  for (let i = 0; i < renderedColumns.length; i += 1) {
-    const column = renderedColumns[i];
-    const indexRelativeToAllColumns = firstColumnToRender + i;
-    const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
-    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-    const showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
+  const getCell = React.useCallback((column, cellProps) => {
     const cellParams = apiRef.current.getCellParams(rowId, column.field);
     const classNames = [];
     const disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
@@ -283,51 +241,139 @@ function GridRow(props) {
 
     const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     const 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.componentsProps?.cell, {
+      children: content
+    }), column.field);
+  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, row, rowHeight, rowId, treeDepth, sortModel.length]);
+  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+  let minHeight = rowHeight;
+
+  if (minHeight === 'auto' && sizes) {
+    let numberOfBaseSizes = 0;
+    const maximumSize = Object.entries(sizes).reduce((acc, [key, size]) => {
+      const 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;
+    }
+  }
+
+  const style = _extends({}, styleProp, {
+    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+    // max-height doesn't support "auto"
+    minHeight
+  });
+
+  if (sizes?.spacingTop) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes?.spacingBottom) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+    style[property] = sizes.spacingBottom;
+  }
+
+  const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+
+  if (typeof rootProps.getRowClassName === 'function') {
+    const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
+
+    const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
+    });
+
+    rowClassNames.push(rootProps.getRowClassName(rowParams));
+  }
+
+  const randomNumber = randomNumberBetween(10000, 20, 80);
+  const cells = [];
+
+  for (let i = 0; i < renderedColumns.length; i += 1) {
+    const column = renderedColumns[i];
+    const indexRelativeToAllColumns = firstColumnToRender + i;
+    const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
+    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+    const showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
 
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      const {
-        colSpan,
-        width
-      } = cellColSpanInfo.cellProps;
-      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.componentsProps?.cell, {
-        children: content
-      }), column.field));
+      if (row) {
+        const {
+          colSpan,
+          width
+        } = cellColSpanInfo.cellProps;
+        const cellProps = {
+          width,
+          colSpan,
+          showRightBorder,
+          indexRelativeToAllColumns
+        };
+        cells.push(getCell(column, cellProps));
+      } else {
+        const {
+          width
+        } = cellColSpanInfo.cellProps;
+        const contentWidth = Math.round(randomNumber());
+        cells.push( /*#__PURE__*/_jsx(rootProps.components.SkeletonCell, {
+          width: width,
+          contentWidth: contentWidth,
+          field: column.field,
+          align: column.align
+        }, column.field));
+      }
     }
   }
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
+  const 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(...rowClassNames, 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
     })]
@@ -352,8 +398,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/modern/components/cell/GridBooleanCell.js

@@ -123,7 +123,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/modern/components/cell/GridCell.js

@@ -96,6 +96,14 @@ function GridCell(props) {
       onMouseUp(event);
     }
   }, [apiRef, field, onMouseUp, rowId]);
+  const publishMouseDown = React.useCallback(eventName => event => {
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+  }, [apiRef, field, onMouseDown, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {
@@ -200,7 +208,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/modern/components/cell/GridEditBooleanCell.js

@@ -159,7 +159,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/modern/components/cell/GridEditDateCell.js

@@ -213,7 +213,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/modern/components/cell/GridEditInputCell.js

@@ -176,7 +176,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/modern/components/cell/GridEditSingleSelectCell.js

@@ -258,7 +258,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/modern/components/cell/GridSkeletonCell.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _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";
+
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['cell', 'cellSkeleton', `cell--text${capitalize(align)}`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridSkeletonCell(props) {
+  const {
+    align,
+    width,
+    contentWidth
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes,
+    align
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx("div", _extends({
+    className: classes.root,
+    style: {
+      width
+    }
+  }, other, {
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      width: `${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/modern/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';

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -183,7 +183,8 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.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/modern/components/containers/GridRootStyles.js

@@ -35,6 +35,8 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses.cellContent}`]: styles.cellContent
   }, {
     [`& .${gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${gridClasses.cellSkeleton}`]: styles.cellSkeleton
   }, {
     [`& .${gridClasses.checkboxInput}`]: styles.checkboxInput
   }, {

package/modern/components/panel/GridColumnsPanel.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["sort"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { switchClasses } from '@mui/material/Switch';
@@ -54,7 +57,9 @@ const GridColumnsPanelRowRoot = styled('div', {
 const GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel(props) {
+const collator = new Intl.Collator();
+
+function GridColumnsPanel(props) {
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef(null);
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
@@ -66,6 +71,24 @@ export function GridColumnsPanel(props) {
   };
   const classes = useUtilityClasses(ownerState);
 
+  const {
+    sort
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const sortedColumns = React.useMemo(() => {
+    switch (sort) {
+      case 'asc':
+        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
+
+      case 'desc':
+        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
+
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+
   const toggleColumn = event => {
     const {
       name: field
@@ -99,16 +122,16 @@ export function GridColumnsPanel(props) {
   }, []);
   const currentColumns = React.useMemo(() => {
     if (!searchValue) {
-      return columns;
+      return sortedColumns;
     }
 
     const searchValueToCheck = searchValue.toLowerCase();
-    return columns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
-  }, [columns, searchValue]);
+    return sortedColumns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
+  }, [sortedColumns, searchValue]);
   React.useEffect(() => {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -155,4 +178,13 @@ export function GridColumnsPanel(props) {
       }))]
     })]
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sort: PropTypes.oneOf(['asc', 'desc'])
+} : void 0;
+export { GridColumnsPanel };

package/modern/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridSkeletonCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -52,6 +52,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  SkeletonCell: GridSkeletonCell,
   ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay,

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -11,6 +11,7 @@ import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { deepClone } from '../../../utils/utils';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
 const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export const useGridCellEditing = (apiRef, props) => {
@@ -319,7 +320,11 @@ export const useGridCellEditing = (apiRef, props) => {
     if (error || isProcessingProps) {
       // Attempt to change cell mode to "view" was not successful
       // Update previous mode to allow another attempt
-      prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+      prevCellModesModel.current[id][field].mode = GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+      updateFieldInCellModesModel(id, field, {
+        mode: GridCellModes.Edit
+      });
       return;
     }
 
@@ -435,7 +440,8 @@ export const useGridCellEditing = (apiRef, props) => {
     const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     const copyOfPrevCellModes = prevCellModesModel.current;
-    prevCellModesModel.current = cellModesModel;
+    prevCellModesModel.current = deepClone(cellModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;

package/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -12,6 +12,7 @@ import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { deepClone } from '../../../utils/utils';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
 const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export const useGridRowEditing = (apiRef, props) => {
@@ -401,7 +402,11 @@ export const useGridRowEditing = (apiRef, props) => {
     const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
 
     if (hasSomeFieldWithError) {
-      prevRowModesModel.current[id].mode = GridRowModes.Edit;
+      prevRowModesModel.current[id].mode = GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+      updateRowInRowModesModel(id, {
+        mode: GridRowModes.Edit
+      });
       return;
     }
 
@@ -584,7 +589,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     const copyOfPrevRowModesModel = prevRowModesModel.current;
-    prevRowModesModel.current = rowModesModel;
+    prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(rowModesModel).forEach(([id, params]) => {
       const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
       const originalId = idToIdLookup[id] ?? id;