@mui/x-data-grid 5.6.0 → 5.8.0

package/node/DataGrid/DataGrid.js

@@ -102,6 +102,7 @@ DataGridRaw.propTypes = {
    * Set of columns of type [[GridColumns]].
    */
   columns: (0, _utils.chainPropTypes)(_propTypes.default.array.isRequired, props => {
+    // @ts-ignore because otherwise `build:api` doesn't work
     if (props.columns && props.columns.some(column => column.resizable)) {
       return new Error([`MUI: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
     }
@@ -205,7 +206,9 @@ 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.default.shape({
-    preventCommitWhileValidating: _propTypes.default.bool
+    newEditingApi: _propTypes.default.bool,
+    preventCommitWhileValidating: _propTypes.default.bool,
+    warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
 
   /**
@@ -244,7 +247,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Function that applies CSS classes dynamically on rows.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
    * @returns {string} The CSS class to apply to the row.
    */
   getRowClassName: _propTypes.default.func,
@@ -261,6 +264,13 @@ DataGridRaw.propTypes = {
    */
   getRowId: _propTypes.default.func,
 
+  /**
+   * Function that allows to specify the spacing between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row spacing values.
+   */
+  getRowSpacing: _propTypes.default.func,
+
   /**
    * Set the height in pixel of the column headers in the grid.
    * @default 56
@@ -313,7 +323,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Set the locale text of the grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/internals/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: _propTypes.default.object,
 
@@ -511,6 +521,28 @@ DataGridRaw.propTypes = {
    */
   onPageSizeChange: _propTypes.default.func,
 
+  /**
+   * Callback fired when the preferences panel is closed.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelClose: _propTypes.default.func,
+
+  /**
+   * Callback fired when the preferences panel is opened.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelOpen: _propTypes.default.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: _propTypes.default.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -614,6 +646,16 @@ DataGridRaw.propTypes = {
    */
   paginationMode: _propTypes.default.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`.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
+   */
+  processRowUpdate: _propTypes.default.func,
+
   /**
    * Number of extra rows to be rendered before/after the visible slice.
    * @default 3
@@ -635,7 +677,13 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  rows: _propTypes.default.array.isRequired,
+
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
 
   /**
    * Select the pageSize dynamically using the component UI.

package/node/DataGrid/useDataGridComponent.js

@@ -25,22 +25,20 @@ var _useGridFilter = require("../hooks/features/filter/useGridFilter");
 
 var _useGridFocus = require("../hooks/features/focus/useGridFocus");
 
-var _useGridKeyboard = require("../hooks/features/keyboard/useGridKeyboard");
-
-var _useGridKeyboardNavigation = require("../hooks/features/keyboard/useGridKeyboardNavigation");
+var _useGridKeyboardNavigation = require("../hooks/features/keyboardNavigation/useGridKeyboardNavigation");
 
 var _useGridPagination = require("../hooks/features/pagination/useGridPagination");
 
-var _useGridPage = require("../hooks/features/pagination/useGridPage");
-
-var _useGridPageSize = require("../hooks/features/pagination/useGridPageSize");
-
 var _useGridPreferencesPanel = require("../hooks/features/preferencesPanel/useGridPreferencesPanel");
 
-var _useGridEditing = require("../hooks/features/editRows/useGridEditing");
+var _useGridEditing = require("../hooks/features/editRows/useGridEditing.old");
+
+var _useGridEditing2 = require("../hooks/features/editRows/useGridEditing.new");
 
 var _useGridRows = require("../hooks/features/rows/useGridRows");
 
+var _useGridRowsPreProcessors = require("../hooks/features/rows/useGridRowsPreProcessors");
+
 var _useGridParamsApi = require("../hooks/features/rows/useGridParamsApi");
 
 var _useGridSelection = require("../hooks/features/selection/useGridSelection");
@@ -60,38 +58,47 @@ var _useGridRowsMeta = require("../hooks/features/rows/useGridRowsMeta");
 var _useGridStatePersistence = require("../hooks/features/statePersistence/useGridStatePersistence");
 
 const useDataGridComponent = props => {
+  var _props$experimentalFe, _props$experimentalFe2;
+
   const apiRef = (0, _useGridInitialization.useGridInitialization)(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
    */
 
   (0, _useGridSelectionPreProcessors.useGridSelectionPreProcessors)(apiRef, props);
+  (0, _useGridRowsPreProcessors.useGridRowsPreProcessors)(apiRef);
   /**
    * Register all state initializers here.
    */
 
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridFilter.filterStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridPageSize.pageSizeStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridPage.pageStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridSelection.selectionStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? _useGridEditing2.editingStateInitializer : _useGridEditing.editingStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridFocus.focusStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridSorting.sortingStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridPreferencesPanel.preferencePanelStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridFilter.filterStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
+  (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridSelection.useGridSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
   (0, _useGridParamsApi.useGridParamsApi)(apiRef);
-  (0, _useGridEditing.useGridEditing)(apiRef, props);
+  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _useGridEditing2.useGridEditing : _useGridEditing.useGridEditing;
+  useGridEditing(apiRef, props);
   (0, _useGridFocus.useGridFocus)(apiRef, props);
   (0, _useGridSorting.useGridSorting)(apiRef, props);
-  (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef, props);
+  (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef);
   (0, _useGridFilter.useGridFilter)(apiRef, props);
   (0, _useGridDensity.useGridDensity)(apiRef, props);
   (0, _useGridPagination.useGridPagination)(apiRef, props);
   (0, _useGridRowsMeta.useGridRowsMeta)(apiRef, props);
   (0, _useGridScroll.useGridScroll)(apiRef, props);
   (0, _useGridColumnMenu.useGridColumnMenu)(apiRef);
-  (0, _useGridKeyboard.useGridKeyboard)(apiRef);
-  (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridCsvExport.useGridCsvExport)(apiRef);
   (0, _useGridPrintExport.useGridPrintExport)(apiRef, props);
   (0, _useGridClipboard.useGridClipboard)(apiRef);

package/node/DataGrid/useDataGridProps.js

@@ -73,6 +73,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   paginationMode: _models.GridFeatureModeConstant.client,
   rowHeight: 52,
   rowsPerPageOptions: [25, 50, 100],
+  rowSpacingType: 'margin',
   showCellRightBorder: false,
   showColumnRightBorder: false,
   sortingOrder: ['asc', 'desc', null],
@@ -101,8 +102,8 @@ const useDataGridProps = inProps => {
     }
 
     const mergedComponents = {};
-    Object.keys(_constants.DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(key => {
-      mergedComponents[key] = overrides[key] === undefined ? _constants.DATA_GRID_DEFAULT_SLOTS_COMPONENTS[key] : overrides[key];
+    Object.entries(_constants.DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
+      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
     });
     return mergedComponents;
   }, [themedProps.components]);

package/node/colDef/gridDateColDef.js

@@ -26,7 +26,7 @@ function gridDateFormatter({
     return value.toLocaleDateString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 
 function gridDateTimeFormatter({
@@ -36,7 +36,7 @@ function gridDateTimeFormatter({
     return value.toLocaleString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 
 const GRID_DATE_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {

package/node/{models/colDef → colDef}/gridDefaultColumnTypes.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getGridDefaultColumnTypes = exports.DEFAULT_GRID_COL_TYPE_KEY = void 0;
 
-var _gridStringColDef = require("../../colDef/gridStringColDef");
+var _gridStringColDef = require("./gridStringColDef");
 
-var _gridNumericColDef = require("../../colDef/gridNumericColDef");
+var _gridNumericColDef = require("./gridNumericColDef");
 
-var _gridDateColDef = require("../../colDef/gridDateColDef");
+var _gridDateColDef = require("./gridDateColDef");
 
-var _gridBooleanColDef = require("../../colDef/gridBooleanColDef");
+var _gridBooleanColDef = require("./gridBooleanColDef");
 
-var _gridSingleSelectColDef = require("../../colDef/gridSingleSelectColDef");
+var _gridSingleSelectColDef = require("./gridSingleSelectColDef");
 
-var _gridActionsColDef = require("../../colDef/gridActionsColDef");
+var _gridActionsColDef = require("./gridActionsColDef");
 
 const DEFAULT_GRID_COL_TYPE_KEY = '__default__';
 exports.DEFAULT_GRID_COL_TYPE_KEY = DEFAULT_GRID_COL_TYPE_KEY;
@@ -28,9 +28,9 @@ const getGridDefaultColumnTypes = () => {
     dateTime: _gridDateColDef.GRID_DATETIME_COL_DEF,
     boolean: _gridBooleanColDef.GRID_BOOLEAN_COL_DEF,
     singleSelect: _gridSingleSelectColDef.GRID_SINGLE_SELECT_COL_DEF,
-    [_gridActionsColDef.GRID_ACTIONS_COLUMN_TYPE]: _gridActionsColDef.GRID_ACTIONS_COL_DEF
+    [_gridActionsColDef.GRID_ACTIONS_COLUMN_TYPE]: _gridActionsColDef.GRID_ACTIONS_COL_DEF,
+    [DEFAULT_GRID_COL_TYPE_KEY]: _gridStringColDef.GRID_STRING_COL_DEF
   };
-  nativeColumnTypes[DEFAULT_GRID_COL_TYPE_KEY] = _gridStringColDef.GRID_STRING_COL_DEF;
   return nativeColumnTypes;
 };
 

package/node/colDef/gridNumericOperators.js

@@ -185,5 +185,5 @@ const getGridNumericOperators = () => [{
 
 
 exports.getGridNumericOperators = getGridNumericOperators;
-const getGridNumericColumnOperators = (0, _warning.wrapWithWarningOnCall)(getGridNumericOperators, 'MUI: Using getGridNumericColumnOperators is deprecated, use getGridNumericOperators instead.');
+const getGridNumericColumnOperators = (0, _warning.wrapWithWarningOnCall)(getGridNumericOperators, ['MUI: The method getGridNumericColumnOperators is deprecated and will be removed in the next major version.', 'Use getGridNumericOperators instead.']);
 exports.getGridNumericColumnOperators = getGridNumericColumnOperators;

package/node/colDef/index.js

@@ -158,4 +158,17 @@ Object.keys(_gridStringOperators).forEach(function (key) {
       return _gridStringOperators[key];
     }
   });
+});
+
+var _gridDefaultColumnTypes = require("./gridDefaultColumnTypes");
+
+Object.keys(_gridDefaultColumnTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridDefaultColumnTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridDefaultColumnTypes[key];
+    }
+  });
 });

package/node/components/ErrorOverlay.js

@@ -17,6 +17,10 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 
 var _GridOverlay = require("./containers/GridOverlay");
 
+var _useGridSelector = require("../hooks/utils/useGridSelector");
+
+var _densitySelector = require("../hooks/features/density/densitySelector");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["message", "hasError", "errorInfo"];
@@ -33,8 +37,13 @@ const ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const defaultLabel = apiRef.current.getLocaleText('errorOverlayDefaultLabel');
+  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityRowHeightSelector);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({
-    ref: ref
+    ref: ref,
+    sx: {
+      width: '100%',
+      minHeight: 2 * rowHeight
+    }
   }, other, {
     children: message || defaultLabel
   }));

package/node/components/GridLoadingOverlay.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 var _GridOverlay = require("./containers/GridOverlay");
@@ -28,4 +30,11 @@ const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOve
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
   }));
 });
-exports.GridLoadingOverlay = GridLoadingOverlay;
+exports.GridLoadingOverlay = GridLoadingOverlay;
+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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/components/GridNoRowsOverlay.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 
 var _GridOverlay = require("./containers/GridOverlay");
@@ -30,4 +32,11 @@ const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverl
     children: noRowsLabel
   }));
 });
-exports.GridNoRowsOverlay = GridNoRowsOverlay;
+exports.GridNoRowsOverlay = GridNoRowsOverlay;
+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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/components/GridRow.js

@@ -33,6 +33,8 @@ var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelecto
 
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 
+var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
+
 var _domUtils = require("../utils/domUtils");
 
 var _gridCheckboxSelectionColDef = require("../colDef/gridCheckboxSelectionColDef");
@@ -107,6 +109,7 @@ function GridRow(props) {
 
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
   const {
     hasScrollX,
@@ -173,11 +176,33 @@ function GridRow(props) {
 
     publish(_events.GridEvents.rowClick, onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
-  const style = (0, _extends2.default)({
+  const style = (0, _extends2.default)({}, styleProp, {
     maxHeight: rowHeight,
     minHeight: rowHeight
-  }, styleProp);
-  const rowClassName = typeof rootProps.getRowClassName === 'function' && rootProps.getRowClassName(apiRef.current.getRowParams(rowId));
+  });
+  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+
+  if (sizes != null && sizes.spacingTop) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes != null && 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 = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+    });
+    rowClassName = rootProps.getRowClassName(rowParams);
+  }
+
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {
@@ -281,7 +306,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: _propTypes.default.bool,
   lastColumnToRender: _propTypes.default.number.isRequired,
   renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
   rowHeight: _propTypes.default.number.isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   selected: _propTypes.default.bool.isRequired,

package/node/components/base/GridErrorHandler.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _styles = require("@mui/material/styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
@@ -23,23 +23,12 @@ var _ErrorBoundary = require("../ErrorBoundary");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
-var _GridAutoSizer = require("../GridAutoSizer");
-
-var _gridEvents = require("../../models/events/gridEvents");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const ErrorOverlayWrapper = (0, _styles.styled)('div')({
-  position: 'absolute',
-  top: 0,
-  width: '100%',
-  height: '100%'
-});
-
 function GridErrorHandler(props) {
   const {
     children
@@ -48,28 +37,26 @@ function GridErrorHandler(props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'GridErrorHandler');
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const error = apiRef.current.state.error;
-  const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent(_gridEvents.GridEvents.resize, size);
-  }, [apiRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.ErrorBoundary, {
     hasError: error != null,
     componentProps: error,
     api: apiRef,
     logger: logger,
-    render: errorProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMainContainer.GridMainContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAutoSizer.GridAutoSizer, {
-        nonce: rootProps.nonce,
-        disableHeight: rootProps.autoHeight,
-        onResize: handleResize,
-        children: () => {
-          var _rootProps$components;
-
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorOverlayWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ErrorOverlay, (0, _extends2.default)({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
-          });
-        }
-      })
-    }),
+    render: errorProps => {
+      var _rootProps$components;
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMainContainer.GridMainContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ErrorOverlay, (0, _extends2.default)({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
+      });
+    },
     children: children
   });
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridErrorHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node
+} : void 0;

package/node/components/cell/GridCell.js

@@ -73,6 +73,8 @@ const useUtilityClasses = ownerState => {
 let warnedOnce = false;
 
 function GridCell(props) {
+  var _rootProps$experiment;
+
   const {
     align,
     children,
@@ -165,7 +167,7 @@ function GridCell(props) {
   }, [hasFocus, cellMode, apiRef]);
   let handleFocus = other.onFocus;
 
-  if (process.env.NODE_ENV === 'test') {
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
       const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
 
@@ -178,7 +180,7 @@ function GridCell(props) {
       }
 
       if (!warnedOnce) {
-        console.error([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, 'In the next render, the focus will be changed to match the state.', 'Call `fireEvent.mouseUp` and `fireEvent.click` before to sync the focus with the state.'].join('\n'));
+        console.warn([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
         warnedOnce = true;
       }
     };
@@ -220,7 +222,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   className: _propTypes.default.string,
   colIndex: _propTypes.default.number.isRequired,
   field: _propTypes.default.string.isRequired,
-  formattedValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool]),
+  formattedValue: _propTypes.default.any,
   hasFocus: _propTypes.default.bool,
   height: _propTypes.default.number.isRequired,
   isEditable: _propTypes.default.bool,
@@ -234,6 +236,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   showRightBorder: _propTypes.default.bool,
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
-  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool]),
+  value: _propTypes.default.any,
   width: _propTypes.default.number.isRequired
 } : void 0;

package/node/components/cell/GridEditBooleanCell.js

@@ -26,7 +26,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/node/components/cell/GridEditDateCell.js

@@ -26,7 +26,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }