@mui/x-data-grid 5.6.1 → 5.7.0

package/models/params/gridRowParams.d.ts

@@ -54,6 +54,46 @@ export interface GridRowHeightParams extends GridRowEntry {
  * The getRowHeight return value.
  */
 export declare type GridRowHeightReturnValue = number | null | undefined;
+declare enum GridRowEditStartReasons {
+    enterKeyDown = "enterKeyDown",
+    cellDoubleClick = "cellDoubleClick",
+    printableKeyDown = "printableKeyDown",
+    deleteKeyDown = "deleteKeyDown"
+}
+/**
+ * Params passed to the `rowEditStart` event.
+ */
+export interface GridRowEditStartParams<R extends GridRowModel = GridRowModel> extends GridRowParams<R> {
+    /**
+     * Which field triggered this event.
+     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+     */
+    field?: string;
+    /**
+     * The reason for this event to be triggered.
+     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+     */
+    reason?: GridRowEditStartReasons;
+}
+declare enum GridRowEditStopReasons {
+    rowFocusOut = "rowFocusOut",
+    escapeKeyDown = "escapeKeyDown",
+    enterKeyDown = "enterKeyDown",
+    tabKeyDown = "tabKeyDown",
+    shiftTabKeyDown = "shiftTabKeyDown"
+}
+export interface GridRowEditStopParams<R extends GridRowModel = GridRowModel> extends GridRowParams<R> {
+    /**
+     * Which field triggered this event.
+     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+     */
+    field?: string;
+    /**
+     * The reason for this event to be triggered.
+     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+     */
+    reason?: GridRowEditStopReasons;
+}
 /**
  * Object passed as parameter in the row `getRowSpacing` callback prop.
  */
@@ -66,4 +106,4 @@ export interface GridRowSpacing {
     top?: number;
     bottom?: number;
 }
-export {};
+export { GridRowEditStartReasons, GridRowEditStopReasons };

package/models/params/gridRowParams.js

@@ -1 +1,39 @@
-export {};
+/**
+ * Object passed as parameter in the row callbacks.
+ */
+
+/**
+ * Object passed as parameter in the row `getRowClassName` callback prop.
+ */
+
+/**
+ * Object passed as parameter in the row `getRowHeight` callback prop.
+ */
+
+/**
+ * The getRowHeight return value.
+ */
+var GridRowEditStartReasons;
+/**
+ * Params passed to the `rowEditStart` event.
+ */
+
+(function (GridRowEditStartReasons) {
+  GridRowEditStartReasons["enterKeyDown"] = "enterKeyDown";
+  GridRowEditStartReasons["cellDoubleClick"] = "cellDoubleClick";
+  GridRowEditStartReasons["printableKeyDown"] = "printableKeyDown";
+  GridRowEditStartReasons["deleteKeyDown"] = "deleteKeyDown";
+})(GridRowEditStartReasons || (GridRowEditStartReasons = {}));
+
+var GridRowEditStopReasons;
+
+(function (GridRowEditStopReasons) {
+  GridRowEditStopReasons["rowFocusOut"] = "rowFocusOut";
+  GridRowEditStopReasons["escapeKeyDown"] = "escapeKeyDown";
+  GridRowEditStopReasons["enterKeyDown"] = "enterKeyDown";
+  GridRowEditStopReasons["tabKeyDown"] = "tabKeyDown";
+  GridRowEditStopReasons["shiftTabKeyDown"] = "shiftTabKeyDown";
+})(GridRowEditStopReasons || (GridRowEditStopReasons = {}));
+
+// https://github.com/mui/mui-x/pull/3738#discussion_r798504277
+export { GridRowEditStartReasons, GridRowEditStopReasons };

package/models/props/DataGridProps.d.ts

@@ -8,7 +8,7 @@ import { GridFeatureMode } from '../gridFeatureMode';
 import { Logger } from '../logger';
 import { GridSortDirection, GridSortModel } from '../gridSortModel';
 import { GridSlotsComponent } from '../gridSlotsComponent';
-import { GridRowIdGetter, GridRowsProp } from '../gridRows';
+import { GridRowIdGetter, GridRowsProp, GridRowModel } from '../gridRows';
 import { GridEventListener, GridEvents } from '../events';
 import { GridCallbackDetails, GridLocaleText } from '../api';
 import { GridApiCommunity } from '../api/gridApiCommunity';
@@ -27,6 +27,10 @@ export interface GridExperimentalFeatures {
      * Will be part of the premium-plan when fully ready.
      */
     preventCommitWhileValidating: boolean;
+    /**
+     * Enables the new API for cell editing and row editing.
+     */
+    newEditingApi: boolean;
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
      * Only works if NODE_ENV=test.
@@ -654,4 +658,12 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
      * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
      */
     experimentalFeatures?: Partial<GridExperimentalFeatures>;
+    /**
+     * Callback called before updating a row with new values in the row and cell editing.
+     * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+     * @param {GridRowModel} newRow Row object with the new values.
+     * @param {GridRowModel} oldRow Row object with the old values.
+     * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+     */
+    processRowUpdate?: (newRow: GridRowModel, oldRow: GridRowModel) => Promise<GridRowModel> | GridRowModel;
 }

package/modern/DataGrid/DataGrid.js

@@ -183,6 +183,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
@@ -600,6 +601,15 @@ DataGridRaw.propTypes = {
    */
   paginationMode: PropTypes.oneOf(['client', 'server']),
 
+  /**
+   * Callback called before updating a row with new values in the row and cell editing.
+   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+   * @param {GridRowModel} newRow Row object with the new values.
+   * @param {GridRowModel} oldRow Row object with the old values.
+   * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+   */
+  processRowUpdate: PropTypes.func,
+
   /**
    * Number of extra rows to be rendered before/after the visible slice.
    * @default 3

package/modern/DataGrid/useDataGridComponent.js

@@ -12,8 +12,10 @@ import { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
 import { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
 import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-import { useGridEditing, editingStateInitializer } from '../hooks/features/editRows/useGridEditing';
+import { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
+import { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
 import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
+import { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 import { selectionStateInitializer, useGridSelection } from '../hooks/features/selection/useGridSelection';
 import { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
@@ -30,6 +32,7 @@ export const useDataGridComponent = props => {
    */
 
   useGridSelectionPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
   /**
    * Register all state initializers here.
    */
@@ -37,7 +40,7 @@ export const useDataGridComponent = props => {
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(props.experimentalFeatures?.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -50,6 +53,7 @@ export const useDataGridComponent = props => {
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridSorting(apiRef, props);

package/modern/components/ErrorOverlay.js

@@ -4,6 +4,8 @@ const _excluded = ["message", "hasError", "errorInfo"];
 import * as React from 'react';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay } from './containers/GridOverlay';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridDensityRowHeightSelector } from '../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 // TODO v6: rename to GridErrorOverlay
 export const ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(props, ref) {
@@ -14,8 +16,13 @@ export const ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(
 
   const apiRef = useGridApiContext();
   const defaultLabel = apiRef.current.getLocaleText('errorOverlayDefaultLabel');
+  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
+    ref: ref,
+    sx: {
+      width: '100%',
+      minHeight: 2 * rowHeight
+    }
   }, other, {
     children: message || defaultLabel
   }));

package/modern/components/GridLoadingOverlay.js

@@ -1,12 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import CircularProgress from '@mui/material/CircularProgress';
 import { GridOverlay } from './containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
     ref: ref
   }, props, {
     children: /*#__PURE__*/_jsx(CircularProgress, {})
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridLoadingOverlay };

package/modern/components/GridNoRowsOverlay.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay } from './containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
   const apiRef = useGridApiContext();
   const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
@@ -11,4 +12,12 @@ export const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRo
   }, props, {
     children: noRowsLabel
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridNoRowsOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridNoRowsOverlay };

package/modern/components/base/GridErrorHandler.js

@@ -1,21 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridLogger } from '../../hooks/utils/useGridLogger';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridAutoSizer } from '../GridAutoSizer';
-import { GridEvents } from '../../models/events/gridEvents';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ErrorOverlayWrapper = styled('div')({
-  position: 'absolute',
-  top: 0,
-  width: '100%',
-  height: '100%'
-});
 
 function GridErrorHandler(props) {
   const {
@@ -25,23 +16,13 @@ function GridErrorHandler(props) {
   const logger = useGridLogger(apiRef, 'GridErrorHandler');
   const rootProps = useGridRootProps();
   const error = apiRef.current.state.error;
-  const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent(GridEvents.resize, size);
-  }, [apiRef]);
   return /*#__PURE__*/_jsx(ErrorBoundary, {
     hasError: error != null,
     componentProps: error,
     api: apiRef,
     logger: logger,
     render: errorProps => /*#__PURE__*/_jsx(GridMainContainer, {
-      children: /*#__PURE__*/_jsx(GridAutoSizer, {
-        nonce: rootProps.nonce,
-        disableHeight: rootProps.autoHeight,
-        onResize: handleResize,
-        children: () => /*#__PURE__*/_jsx(ErrorOverlayWrapper, {
-          children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, rootProps.componentsProps?.errorOverlay))
-        })
-      })
+      children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, rootProps.componentsProps?.errorOverlay))
     }),
     children: children
   });

package/modern/components/cell/GridEditBooleanCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';

package/modern/components/cell/GridEditDateCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps"];
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';

package/modern/components/cell/GridEditInputCell.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -9,6 +9,7 @@ import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -37,6 +38,8 @@ const GridEditInputCellRoot = styled(InputBase, {
 }));
 
 function GridEditInputCell(props) {
+  const rootProps = useGridRootProps();
+
   const {
     id,
     value,
@@ -44,13 +47,13 @@ function GridEditInputCell(props) {
     field,
     colDef,
     hasFocus,
-    debounceMs = SUBMIT_FILTER_STROKE_TIME
+    debounceMs = rootProps.experimentalFeatures?.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME,
+    isProcessingProps
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
-  const rootProps = useGridRootProps();
   const ownerState = {
     classes: rootProps.classes
   };
@@ -79,7 +82,8 @@ function GridEditInputCell(props) {
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState ?? '',
-    onChange: handleChange
+    onChange: handleChange,
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
   }, other));
 }
 
@@ -94,8 +98,63 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
   debounceMs: PropTypes.number,
-  isValidating: PropTypes.bool
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any.isRequired,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {GridCellValue} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired
 } : void 0;
 export { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -73,7 +73,12 @@ function GridEditSingleSelectCell(props) {
       id,
       field,
       value: target.value
-    }, event); // We use isValid === false because the default return is undefined which evaluates to true with !isValid
+    }, event);
+
+    if (rootProps.experimentalFeatures?.newEditingApi) {
+      return;
+    } // We use isValid === false because the default return is undefined which evaluates to true with !isValid
+
 
     if (rootProps.editMode === GridEditModes.Row || isValid === false) {
       return;
@@ -102,7 +107,15 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      api.setCellMode(id, field, 'view');
+      if (rootProps.experimentalFeatures?.newEditingApi) {
+        api.stopCellEditMode({
+          id,
+          field,
+          ignoreModifications: true
+        });
+      } else {
+        api.setCellMode(id, field, 'view');
+      }
     }
   };
 
@@ -143,7 +156,62 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: PropTypes.any.isRequired,
-  isValidating: PropTypes.bool
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any.isRequired,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {GridCellValue} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired
 } : void 0;
 export { GridEditSingleSelectCell };
 export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -87,7 +87,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderTitle.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   columnWidth: PropTypes.number.isRequired,
-  description: PropTypes.string,
+  description: PropTypes.node,
   label: PropTypes.string.isRequired
 } : void 0;
 export { GridColumnHeaderTitle };

package/modern/components/columnHeaders/GridColumnHeaders.js

@@ -35,7 +35,9 @@ const GridColumnHeadersRoot = styled('div', {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center',
-    borderBottom: `1px solid ${borderColor}`
+    borderBottom: `1px solid ${borderColor}`,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius
   };
 });
 export const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {

package/modern/components/containers/GridOverlay.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
@@ -33,7 +34,7 @@ const GridOverlayRoot = styled('div', {
   justifyContent: 'center',
   backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity)
 }));
-export const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
   const {
     className
   } = props,
@@ -48,4 +49,12 @@ export const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(pr
     ref: ref,
     className: clsx(classes.root, className)
   }, other));
-});
+});
+process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridOverlay };

package/modern/components/containers/GridRootStyles.js

@@ -108,11 +108,11 @@ export const GridRootStyles = styled('div', {
     [`&.${gridClasses.autoHeight}`]: {
       height: 'auto',
       [`& .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
-        borderColor: 'transparent'
+        borderBottomColor: 'transparent'
       }
     },
     [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
-      borderColor: 'transparent'
+      borderBottomColor: 'transparent'
     },
     [`& .${gridClasses.columnHeader}, & .${gridClasses.cell}`]: {
       WebkitTapHighlightColor: 'transparent',

package/modern/components/panel/GridColumnsPanel.js

@@ -54,7 +54,7 @@ const GridColumnsPanelRowRoot = styled('div', {
 const GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel() {
+export function GridColumnsPanel(props) {
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef(null);
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
@@ -100,7 +100,7 @@ export function GridColumnsPanel() {
   React.useEffect(() => {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -149,5 +149,5 @@ export function GridColumnsPanel() {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]
     })]
-  });
+  }));
 }