@mui/x-data-grid 5.6.1 → 5.7.0

package/CHANGELOG.md

@@ -3,13 +3,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.7.0
+
+_Mar 24, 2022_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ✏ Add a new editing API with better support for server-side persistence and validation (#3963, #4060) @m4theushw
+
+  The new API is stable, but to avoid any breaking changes or conflicts with the old API, you must add the following flag to access it:
+
+  ```tsx
+  <DataGrid experimentalFeatures={{ newEditingApi: true }} />
+  ```
+
+  ⚠ Users relying on the old API (legacy) don't need to worry as it will continue to work until v6.
+
+  The new API also features brand new documentation with more useful demos and guides explaining how to create custom edit components.
+  Visit the new [documentation](https://mui.com/components/data-grid/editing/) for more information.
+
+- 📚 Documentation improvements
+- 🐞 Bug and typo fixes
+
+### `@mui/x-data-grid@v5.7.0` / `@mui/x-data-grid-pro@v5.7.0`
+
+#### Changes
+
+- [DataGrid] Add column order and dimensions to the portable state (#3816) @flaviendelangle
+- [DataGrid] Add new editing API (#3963) @m4theushw
+- [DataGrid] Allow to customize `ColumnsPanel` with `componentsProps` prop (#4207) @alexfauquette
+- [DataGrid] Do not unselect row when <kbd>Shift</kbd> + click on the last selected row of a range (#4196) @flaviendelangle
+- [DataGrid] Fix `showCellRightBorder` not working in the last row (#4140) @cherniavskii
+- [DataGrid] Fix error overlay not visible when `autoHeight` is enabled (#4110) @cherniavskii
+- [DataGrid] Fix white blank when scrolling (#4158) @alexfauquette
+- [DataGrid] Adjust type of the `description` prop in `GridColumnHeaderTitle` (#4247) @baahrens
+- [DataGrid] Fix focus after stopping row edit mode (#4252) @m4theushw
+- [DataGridPro] Fix pinned columns edge overflow with custom `borderRadius` (#4188) @socramm9
+- [DataGridPro] Fix tab switching order with pinned columns and `editMode="row"` (#4198) @cherniavskii
+- [l10n] Improve Persian (fa-IR) locale (#4227) @SaeedZhiany
+- [l10n] Improve Polish (pl-PL) locale (#4153) @pbmchc
+- [l10n] Improve Arabic (ar-SD) locale (#4212) @shadigaafar
+- [l10n] Improve Korean (ko-KR) locale (#4245) @kyeongsoosoo
+
+### Docs
+
+- [docs] Clean demo (#4073) @alexfauquette
+- [docs] Delete restore state demos (#4220) @flaviendelangle
+- [docs] Document Print export `X-Frame-Options` limitation (#4222) @DanailH
+- [docs] Add docs for the new editing API (#4060) @m4theushw
+- [docs] Explain how to use `printOptions.pageStyle` (#4138) @alexfauquette
+- [docs] Fix 301 links (#4165) @oliviertassinari
+- [docs] Fix 404 API links (#4164) @oliviertassinari
+- [docs] Fix broken anchor links (#4162) @alexfauquette
+- [docs] Remove useless `apiRef` from demos (#4221) @flaviendelangle
+- [docs] Sync the headers with core (#4195) @oliviertassinari
+
+### Core
+
+- [core] Add CLI to decode license key (#4126) @flaviendelangle
+- [core] Fix Lerna package change detection (#4202) @oliviertassinari
+- [core] Implement strategy pattern for pre-processors (#4030) @flaviendelangle
+- [core] Keep same reference to the column visibility model if no column has changed (#4154) @m4theushw
+- [core] Prepare `@mui/x-license-pro` for date pickers (#4123) @flaviendelangle
+- [core] Remove datagen from `@mui/x-data-grid-generator` bundle (#4163) @m4theushw
+- [core] Remove lodash `isDeepEqual` (#4159) @flaviendelangle
+- [core] Use a pipe processor for `GridPreferencePanel` children (#4216) @flaviendelangle
+- [core] Add markdown documentation for contributors (#3447) @alexfauquette
+- [test] Add regression test for `showCellRightBorder` (#4191) @cherniavskii
+- [test] Mock `getComputedStyle` to speed up unit tests (#4142) @m4theushw
+- [test] Upgrade CircleCI convenience image (#4143) @m4theushw
+
 ## 5.6.1
 
 _Mar 10, 2022_
 
 We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
 
-- [DataGrid] Allow to add margins or borders between rows (#3848) @m4theushw
+- ✨ Allow to add margins or borders between rows (#3848) @m4theushw
 
   ```tsx
   <DataGrid getRowSpacing={() => ({ top: 10, bottom: 10 })} />

package/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/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';
@@ -24,12 +26,15 @@ import { useGridDimensions } from '../hooks/features/dimensions/useGridDimension
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export const useDataGridComponent = props => {
+  var _props$experimentalFe, _props$experimentalFe2;
+
   const apiRef = useGridInitialization(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
    */
 
   useGridSelectionPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
   /**
    * Register all state initializers here.
    */
@@ -37,7 +42,7 @@ export const useDataGridComponent = props => {
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -50,6 +55,7 @@ export const useDataGridComponent = props => {
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridSorting(apiRef, props);

package/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/components/GridLoadingOverlay.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { GridOverlayProps } from './containers/GridOverlay';
-export declare const GridLoadingOverlay: React.ForwardRefExoticComponent<GridOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridLoadingOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridLoadingOverlay };

package/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/components/GridNoResultsOverlay.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-import { GridOverlayProps } from './containers/GridOverlay';
-export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<GridOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/components/GridNoRowsOverlay.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { GridOverlayProps } from './containers/GridOverlay';
-export declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<GridOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridNoRowsOverlay };

package/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/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,28 +16,18 @@ 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: () => {
-          var _rootProps$components;
+    render: errorProps => {
+      var _rootProps$components;
 
-          return /*#__PURE__*/_jsx(ErrorOverlayWrapper, {
-            children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
-          });
-        }
-      })
-    }),
+      return /*#__PURE__*/_jsx(GridMainContainer, {
+        children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
+      });
+    },
     children: children
   });
 }

package/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/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/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,10 @@ const GridEditInputCellRoot = styled(InputBase, {
 }));
 
 function GridEditInputCell(props) {
+  var _rootProps$experiment;
+
+  const rootProps = useGridRootProps();
+
   const {
     id,
     value,
@@ -44,13 +49,13 @@ function GridEditInputCell(props) {
     field,
     colDef,
     hasFocus,
-    debounceMs = SUBMIT_FILTER_STROKE_TIME
+    debounceMs = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.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 +84,8 @@ function GridEditInputCell(props) {
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
-    onChange: handleChange
+    onChange: handleChange,
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
   }, other));
 }
 
@@ -94,8 +100,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/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';
@@ -69,13 +69,20 @@ function GridEditSingleSelectCell(props) {
   }
 
   const handleChange = async event => {
+    var _rootProps$experiment;
+
     setOpen(false);
     const target = event.target;
     const isValid = await api.setEditCellValue({
       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$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.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;
@@ -104,7 +111,17 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      api.setCellMode(id, field, 'view');
+      var _rootProps$experiment2;
+
+      if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+        api.stopCellEditMode({
+          id,
+          field,
+          ignoreModifications: true
+        });
+      } else {
+        api.setCellMode(id, field, 'view');
+      }
     }
   };
 
@@ -145,7 +162,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/components/columnHeaders/GridColumnHeaderTitle.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface GridColumnHeaderTitleProps {
     label: string;
     columnWidth: number;
-    description?: string;
+    description?: React.ReactNode;
 }
 declare function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps): JSX.Element;
 declare namespace GridColumnHeaderTitle {

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -89,7 +89,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/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/components/containers/GridOverlay.d.ts

@@ -1,3 +1,10 @@
 import * as React from 'react';
-export declare type GridOverlayProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const GridOverlay: React.ForwardRefExoticComponent<GridOverlayProps & React.RefAttributes<HTMLDivElement>>;
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+export declare type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+};
+declare const GridOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridOverlay };

package/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 };