@mui/x-data-grid 5.6.1 → 5.9.0

package/modern/components/cell/GridActionsCellItem.js

@@ -8,8 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-const GridActionsCellItem = props => {
+const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     label,
     icon,
@@ -26,7 +25,9 @@ const GridActionsCellItem = props => {
 
   if (!showInMenu) {
     return /*#__PURE__*/_jsx(IconButton, _extends({
+      ref: ref,
       size: "small",
+      role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick,
@@ -36,14 +37,15 @@ const GridActionsCellItem = props => {
     }));
   }
 
-  return /*#__PURE__*/_jsxs(MenuItem, _extends({}, other, {
+  return /*#__PURE__*/_jsxs(MenuItem, _extends({
+    ref: ref
+  }, other, {
     onClick: onClick,
     children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
       children: icon
     }), label]
   }));
-};
-
+});
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["align", "children", "colIndex", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
+const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
@@ -64,6 +64,7 @@ function GridCell(props) {
     width,
     className,
     showRightBorder,
+    colSpan,
     onClick,
     onDoubleClick,
     onMouseDown,
@@ -76,6 +77,7 @@ function GridCell(props) {
 
   const valueToRender = formattedValue == null ? value : formattedValue;
   const cellRef = React.useRef(null);
+  const focusElementRef = React.useRef(null);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const ownerState = {
@@ -126,7 +128,7 @@ function GridCell(props) {
 
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
-      const elementToFocus = focusableElement || cellRef.current;
+      const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
 
       if (doesSupportPreventScroll()) {
         elementToFocus.focus({
@@ -160,6 +162,26 @@ function GridCell(props) {
     };
   }
 
+  const column = apiRef.current.getColumn(field);
+  const managesOwnFocus = column.type === 'actions';
+
+  const renderChildren = () => {
+    if (children == null) {
+      return /*#__PURE__*/_jsx("div", {
+        className: classes.content,
+        children: valueToRender?.toString()
+      });
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        focusElementRef
+      });
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/_jsx("div", _extends({
     ref: cellRef,
     className: clsx(className, classes.root),
@@ -167,8 +189,9 @@ function GridCell(props) {
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,
+    "aria-colspan": colSpan,
     style: style,
-    tabIndex: cellMode === 'view' || !isEditable ? tabIndex : -1,
+    tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
     onClick: publish(GridEvents.cellClick, onClick),
     onDoubleClick: publish(GridEvents.cellDoubleClick, onDoubleClick),
     onMouseDown: publish(GridEvents.cellMouseDown, onMouseDown),
@@ -178,10 +201,7 @@ function GridCell(props) {
     onDragOver: publish(GridEvents.cellDragOver, onDragOver)
   }, other, {
     onFocus: handleFocus,
-    children: children != null ? children : /*#__PURE__*/_jsx("div", {
-      className: classes.content,
-      children: valueToRender?.toString()
-    })
+    children: renderChildren()
   }));
 }
 
@@ -195,8 +215,9 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
+  colSpan: PropTypes.number,
   field: PropTypes.string.isRequired,
-  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,
   height: PropTypes.number.isRequired,
   isEditable: PropTypes.bool,
@@ -210,7 +231,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   showRightBorder: PropTypes.bool,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  value: PropTypes.any,
   width: PropTypes.number.isRequired
 } : void 0;
 export { GridCell };

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,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} 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.object.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';
@@ -9,15 +9,19 @@ import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { GridEvents } from '../../models/events/gridEvents';
+import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const renderSingleSelectOptions = option => typeof option === 'object' ? /*#__PURE__*/_jsx(MenuItem, {
-  value: option.value,
-  children: option.label
-}, option.value) : /*#__PURE__*/_jsx(MenuItem, {
-  value: option,
-  children: option
-}, option);
+const renderSingleSelectOptions = (option, OptionComponent) => {
+  const isOptionTypeObject = typeof option === 'object';
+  const key = isOptionTypeObject ? option.value : option;
+  const value = isOptionTypeObject ? option.value : option;
+  const content = isOptionTypeObject ? option.label : option;
+  return /*#__PURE__*/_jsx(OptionComponent, {
+    value: value,
+    children: content
+  }, key);
+};
 
 function GridEditSingleSelectCell(props) {
   const {
@@ -36,6 +40,8 @@ function GridEditSingleSelectCell(props) {
   const inputRef = React.useRef();
   const rootProps = useGridRootProps();
   const [open, setOpen] = React.useState(rootProps.editMode === 'cell');
+  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
+  const isSelectNative = baseSelectProps.native ?? false;
   let valueOptionsFormatted;
 
   if (typeof colDef.valueOptions === 'function') {
@@ -68,12 +74,19 @@ function GridEditSingleSelectCell(props) {
 
   const handleChange = async event => {
     setOpen(false);
-    const target = event.target;
+    const target = event.target; // NativeSelect casts the value to a string.
+
+    const formattedTargetValue = getValueFromValueOptions(target.value, valueOptionsFormatted);
     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
+      value: formattedTargetValue
+    }, 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 +115,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');
+      }
     }
   };
 
@@ -126,9 +147,10 @@ function GridEditSingleSelectCell(props) {
       onClose: handleClose
     },
     error: error,
+    native: isSelectNative,
     fullWidth: true
   }, other, rootProps.componentsProps?.baseSelect, {
-    children: valueOptionsFormatted.map(renderSingleSelectOptions)
+    children: valueOptionsFormatted.map(valueOptions => renderSingleSelectOptions(valueOptions, isSelectNative ? 'option' : MenuItem))
   }));
 }
 
@@ -143,7 +165,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,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} 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.object.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/{ColumnHeaderFilterIcon.js → GridColumnHeaderFilterIconButton.js}

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
@@ -22,9 +23,11 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   const {
-    counter
+    counter,
+    field,
+    onClick
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -47,7 +50,11 @@ export function ColumnHeaderFilterIcon(props) {
     } else {
       apiRef.current.showFilterPanel();
     }
-  }, [apiRef]);
+
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick]);
 
   if (!counter) {
     return null;
@@ -77,4 +84,15 @@ export function ColumnHeaderFilterIcon(props) {
       }), counter === 1 && iconButton]
     })
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnHeaderFilterIconButton };

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,7 +10,6 @@ import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
 import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
-import { ColumnHeaderFilterIcon } from './ColumnHeaderFilterIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -142,9 +141,10 @@ function GridColumnHeaderItem(props) {
   const sortingOrder = column.sortingOrder ?? rootProps.sortingOrder;
 
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(ColumnHeaderFilterIcon, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
+      field: column.field,
       counter: filterItemsCounter
-    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, rootProps.componentsProps?.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -156,14 +156,11 @@ function GridColumnHeaderItem(props) {
 
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
-
-      if (focusableElement) {
-        focusableElement.focus();
-      } else {
-        headerCellRef.current.focus();
-      }
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus?.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
     }
-  });
+  }, [apiRef, hasFocus]);
   const headerClassName = typeof column.headerClassName === 'function' ? column.headerClassName({
     field: column.field,
     colDef: column

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["innerRef", "className"];
+const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -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/columnHeaders/index.js

@@ -1,4 +1,5 @@
 export * from './GridColumnHeaderItem';
 export * from './GridColumnHeaderSeparator';
 export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
 export * from './GridColumnHeaderTitle';

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue"];
+const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -97,6 +97,12 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * GridApi that let you manipulate the grid.
+   * @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.
    */
@@ -112,16 +118,27 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    */
   field: PropTypes.string.isRequired,
 
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * 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.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -144,7 +161,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.
@@ -159,7 +176,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes.any
 } : void 0;
 export { GridCellCheckboxForwardRef };
 export const GridCellCheckboxRenderer = /*#__PURE__*/React.memo(GridCellCheckboxForwardRef);

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