@mui/x-data-grid 5.5.1 → 5.7.0

package/modern/components/GridRow.js

@@ -0,0 +1,287 @@
+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 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { GridEvents } from '../models/events';
+import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
+import { findParentElementFromClassName } from '../utils/domUtils';
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
+import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    editable,
+    editing,
+    selected,
+    isLastVisible,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const EmptyCell = ({
+  width,
+  height
+}) => {
+  if (!width || !height) {
+    return null;
+  }
+
+  const style = {
+    width,
+    height
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "MuiDataGrid-cell",
+    style: style
+  }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
+};
+
+function GridRow(props) {
+  const {
+    selected,
+    rowId,
+    index,
+    style: styleProp,
+    rowHeight,
+    className,
+    visibleColumns,
+    renderedColumns,
+    containerWidth,
+    firstColumnToRender,
+    cellFocus,
+    cellTabIndex,
+    editRowsState,
+    isLastVisible = false,
+    onClick,
+    onDoubleClick,
+    onMouseEnter,
+    onMouseLeave
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const {
+    hasScrollX,
+    hasScrollY
+  } = apiRef.current.getRootDimensions() ?? {
+    hasScrollX: false,
+    hasScrollY: false
+  };
+  const ownerState = {
+    selected,
+    isLastVisible,
+    classes: rootProps.classes,
+    editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
+    editable: rootProps.editMode === GridEditModes.Row
+  };
+  const classes = useUtilityClasses(ownerState);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    // Ignore portal
+    // The target is not an element when triggered by a Select inside the cell
+    // See https://github.com/mui/material-ui/issues/10534
+    if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
+      return;
+    } // The row might have been deleted
+
+
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
+
+    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(rowId), event);
+
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, rowId]);
+  const publishClick = React.useCallback(event => {
+    const cell = findParentElementFromClassName(event.target, gridClasses.cell);
+    const field = cell?.getAttribute('data-field'); // Check if the field is available because the cell that fills the empty
+    // space of the row has no field.
+
+    if (field) {
+      // User clicked in the checkbox added by checkboxSelection
+      if (field === GRID_CHECKBOX_SELECTION_COL_DEF.field) {
+        return;
+      } // User opened a detail panel
+
+
+      if (field === '__detail_panel_toggle__') {
+        return;
+      } // User is editing a cell
+
+
+      if (apiRef.current.getCellMode(rowId, field) === GridCellModes.Edit) {
+        return;
+      } // User clicked a button from the "actions" column type
+
+
+      const column = apiRef.current.getColumn(field);
+
+      if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+        return;
+      }
+    }
+
+    publish(GridEvents.rowClick, onClick)(event);
+  }, [apiRef, onClick, publish, rowId]);
+
+  const style = _extends({}, styleProp, {
+    maxHeight: rowHeight,
+    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
+    });
+
+    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 cellParams = apiRef.current.getCellParams(rowId, column.field);
+    const classNames = [];
+
+    if (column.cellClassName) {
+      classNames.push(clsx(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
+    }
+
+    const editCellState = editRowsState[rowId] ? editRowsState[rowId][column.field] : null;
+    let content = null;
+
+    if (editCellState == null && column.renderCell) {
+      content = column.renderCell(_extends({}, cellParams, {
+        api: apiRef.current
+      })); // TODO move to GridCell
+
+      classNames.push(clsx(gridClasses['cell--withRenderer'], rootProps.classes?.['cell--withRenderer']));
+    }
+
+    if (editCellState != null && column.renderEditCell) {
+      const params = _extends({}, cellParams, editCellState, {
+        api: apiRef.current
+      });
+
+      content = column.renderEditCell(params); // TODO move to GridCell
+
+      classNames.push(clsx(gridClasses['cell--editing'], rootProps.classes?.['cell--editing']));
+    }
+
+    if (rootProps.getCellClassName) {
+      // TODO move to GridCell
+      classNames.push(rootProps.getCellClassName(cellParams));
+    }
+
+    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;
+    cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
+      value: cellParams.value,
+      field: column.field,
+      width: column.computedWidth,
+      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)
+    }, rootProps.componentsProps?.cell, {
+      children: content
+    }), column.field));
+  }
+
+  const emptyCellWidth = containerWidth - columnsTotalWidth;
+  return /*#__PURE__*/_jsxs("div", _extends({
+    "data-id": rowId,
+    "data-rowindex": index,
+    role: "row",
+    className: clsx(rowClassName, classes.root, className),
+    "aria-rowindex": ariaRowIndex,
+    "aria-selected": selected,
+    style: style,
+    onClick: publishClick,
+    onDoubleClick: publish(GridEvents.rowDoubleClick, onDoubleClick),
+    onMouseEnter: publish(GridEvents.rowMouseEnter, onMouseEnter),
+    onMouseLeave: publish(GridEvents.rowMouseLeave, onMouseLeave)
+  }, other, {
+    children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+      width: emptyCellWidth,
+      height: rowHeight
+    })]
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  cellFocus: PropTypes.object,
+  cellTabIndex: PropTypes.object,
+  containerWidth: PropTypes.number.isRequired,
+  editRowsState: PropTypes.object.isRequired,
+  firstColumnToRender: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+  isLastVisible: PropTypes.bool,
+  lastColumnToRender: PropTypes.number.isRequired,
+  renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  row: PropTypes.object.isRequired,
+  rowHeight: PropTypes.number.isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  selected: PropTypes.bool.isRequired,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+export { GridRow };

package/modern/components/GridRowCount.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "rowCount", "visibleRowCount"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['rowCount']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridRowCountRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'RowCount',
+  overridesResolver: (props, styles) => styles.rowCount
+})(({
+  theme
+}) => ({
+  alignItems: 'center',
+  display: 'flex',
+  margin: theme.spacing(0, 2)
+}));
+const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props, ref) {
+  const {
+    className,
+    rowCount,
+    visibleRowCount
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+
+  if (rowCount === 0) {
+    return null;
+  }
+
+  const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
+  return /*#__PURE__*/_jsxs(GridRowCountRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className)
+  }, other, {
+    children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  rowCount: PropTypes.number.isRequired,
+  visibleRowCount: PropTypes.number.isRequired
+} : void 0;
+export { GridRowCount };

package/modern/components/GridScrollArea.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { GridEvents } from '../models/events';
+import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridDensityHeaderHeightSelector } from '../hooks/features/density/densitySelector';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CLIFF = 1;
+const SLOP = 1.5;
+
+const useUtilityClasses = ownerState => {
+  const {
+    scrollDirection,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollArea', `scrollArea--${scrollDirection}`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridScrollAreaRawRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollArea',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
+  }, {
+    [`&.${gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, styles.scrollArea]
+})(() => ({
+  position: 'absolute',
+  top: 0,
+  zIndex: 101,
+  width: 20,
+  bottom: 0,
+  [`&.${gridClasses['scrollArea--left']}`]: {
+    left: 0
+  },
+  [`&.${gridClasses['scrollArea--right']}`]: {
+    right: 0
+  }
+}));
+
+function GridScrollAreaRaw(props) {
+  const {
+    scrollDirection
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const timeout = React.useRef();
+  const [dragging, setDragging] = React.useState(false);
+  const height = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const scrollPosition = React.useRef({
+    left: 0,
+    top: 0
+  });
+  const rootProps = useGridRootProps();
+
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  const handleScrolling = React.useCallback(newScrollPosition => {
+    scrollPosition.current = newScrollPosition;
+  }, []);
+  const handleDragOver = React.useCallback(event => {
+    let offset;
+
+    if (scrollDirection === 'left') {
+      offset = event.clientX - rootRef.current.getBoundingClientRect().right;
+    } else if (scrollDirection === 'right') {
+      offset = Math.max(1, event.clientX - rootRef.current.getBoundingClientRect().left);
+    } else {
+      throw new Error('MUI: Wrong drag direction');
+    }
+
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+    clearTimeout(timeout.current); // Avoid freeze and inertia.
+
+    timeout.current = setTimeout(() => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left + offset,
+        top: scrollPosition.current.top
+      });
+    });
+  }, [scrollDirection, apiRef]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeout.current);
+    };
+  }, []);
+  const toggleDragging = React.useCallback(() => {
+    setDragging(prevDragging => !prevDragging);
+  }, []);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScrolling);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, toggleDragging);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, toggleDragging);
+  return dragging ? /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
+    ref: rootRef,
+    className: clsx(classes.root),
+    onDragOver: handleDragOver,
+    style: {
+      height
+    }
+  }) : null;
+}
+
+process.env.NODE_ENV !== "production" ? GridScrollAreaRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  scrollDirection: PropTypes.oneOf(['left', 'right']).isRequired
+} : void 0;
+const GridScrollArea = /*#__PURE__*/React.memo(GridScrollAreaRaw);
+export { GridScrollArea };

package/modern/components/GridSelectedRowCount.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "selectedRowCount"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['selectedRowCount']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridSelectedRowCountRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'SelectedRowCount',
+  overridesResolver: (props, styles) => styles.selectedRowCount
+})(({
+  theme
+}) => ({
+  alignItems: 'center',
+  display: 'flex',
+  margin: theme.spacing(0, 2),
+  visibility: 'hidden',
+  width: 0,
+  height: 0,
+  [theme.breakpoints.up('sm')]: {
+    visibility: 'visible',
+    width: 'auto',
+    height: 'auto'
+  }
+}));
+const GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelectedRowCount(props, ref) {
+  const {
+    className,
+    selectedRowCount
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
+  return /*#__PURE__*/_jsx(GridSelectedRowCountRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className)
+  }, other, {
+    children: rowSelectedText
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  selectedRowCount: PropTypes.number.isRequired
+} : void 0;
+export { GridSelectedRowCount };

package/modern/components/base/GridBody.js

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GridEvents } from '../../models/events';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { GridMainContainer } from '../containers/GridMainContainer';
+import { GridAutoSizer } from '../GridAutoSizer';
+import { GridOverlays } from './GridOverlays';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+function GridBody(props) {
+  const {
+    children,
+    VirtualScrollerComponent,
+    ColumnHeadersComponent
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
+  const disableVirtualization = React.useCallback(() => {
+    setIsVirtualizationDisabled(true);
+  }, []);
+  const enableVirtualization = React.useCallback(() => {
+    setIsVirtualizationDisabled(false);
+  }, []); // The `useGridApiMethod` hook can't be used here, because it only installs the
+  // method if it doesn't exist yet. Once installed, it's never updated again.
+  // This break the methods above, since their closure comes from the first time
+  // they were installed. Which means that calling `setIsVirtualizationDisabled`
+  // will trigger a re-render, but it won't update the state. That can be solved
+  // by migrating the virtualization status to the global state.
+
+  apiRef.current.unstable_disableVirtualization = disableVirtualization;
+  apiRef.current.unstable_enableVirtualization = enableVirtualization;
+  const columnHeadersRef = React.useRef(null);
+  const columnsContainerRef = React.useRef(null);
+  const windowRef = React.useRef(null);
+  const renderingZoneRef = React.useRef(null);
+  apiRef.current.columnHeadersContainerElementRef = columnsContainerRef;
+  apiRef.current.columnHeadersElementRef = columnHeadersRef;
+  apiRef.current.windowRef = windowRef; // TODO rename, it's not attached to the window anymore
+
+  apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization
+
+  const handleResize = React.useCallback(size => {
+    apiRef.current.publishEvent(GridEvents.resize, size);
+  }, [apiRef]);
+  return /*#__PURE__*/_jsxs(GridMainContainer, {
+    children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(ColumnHeadersComponent, {
+      ref: columnsContainerRef,
+      innerRef: columnHeadersRef
+    }), /*#__PURE__*/_jsx(GridAutoSizer, {
+      nonce: rootProps.nonce,
+      disableHeight: rootProps.autoHeight,
+      onResize: handleResize,
+      children: size => {
+        const style = {
+          width: size.width,
+          // If `autoHeight` is on, there will be no height value.
+          // In this case, let the container to grow whatever it needs.
+          height: size.height ? size.height - headerHeight : 'auto',
+          marginTop: headerHeight
+        };
+        return /*#__PURE__*/_jsx(VirtualScrollerComponent, {
+          ref: windowRef,
+          style: style,
+          disableVirtualization: isVirtualizationDisabled
+        });
+      }
+    }), children]
+  });
+}
+
+process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  ColumnHeadersComponent: PropTypes.elementType.isRequired,
+  VirtualScrollerComponent: PropTypes.elementType.isRequired
+} : void 0;
+export { GridBody };

package/modern/components/base/GridErrorHandler.js

@@ -0,0 +1,38 @@
+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 { useGridLogger } from '../../hooks/utils/useGridLogger';
+import { GridMainContainer } from '../containers/GridMainContainer';
+import { ErrorBoundary } from '../ErrorBoundary';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function GridErrorHandler(props) {
+  const {
+    children
+  } = props;
+  const apiRef = useGridApiContext();
+  const logger = useGridLogger(apiRef, 'GridErrorHandler');
+  const rootProps = useGridRootProps();
+  const error = apiRef.current.state.error;
+  return /*#__PURE__*/_jsx(ErrorBoundary, {
+    hasError: error != null,
+    componentProps: error,
+    api: apiRef,
+    logger: logger,
+    render: errorProps => /*#__PURE__*/_jsx(GridMainContainer, {
+      children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, rootProps.componentsProps?.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.node
+} : void 0;
+export { GridErrorHandler };