@mui/x-data-grid 5.6.0 → 5.8.0

package/legacy/components/base/GridErrorHandler.js

@@ -1,50 +1,40 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+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 { GridAutoSizer } from '../GridAutoSizer';
-import { GridEvents } from '../../models/events/gridEvents';
 import { jsx as _jsx } from "react/jsx-runtime";
-var ErrorOverlayWrapper = styled('div')({
-  position: 'absolute',
-  top: 0,
-  width: '100%',
-  height: '100%'
-});
-export function GridErrorHandler(props) {
+
+function GridErrorHandler(props) {
   var children = props.children;
   var apiRef = useGridApiContext();
   var logger = useGridLogger(apiRef, 'GridErrorHandler');
   var rootProps = useGridRootProps();
   var error = apiRef.current.state.error;
-  var handleResize = React.useCallback(function (size) {
-    apiRef.current.publishEvent(GridEvents.resize, size);
-  }, [apiRef]);
   return /*#__PURE__*/_jsx(ErrorBoundary, {
     hasError: error != null,
     componentProps: error,
     api: apiRef,
     logger: logger,
     render: function render(errorProps) {
-      return /*#__PURE__*/_jsx(GridMainContainer, {
-        children: /*#__PURE__*/_jsx(GridAutoSizer, {
-          nonce: rootProps.nonce,
-          disableHeight: rootProps.autoHeight,
-          onResize: handleResize,
-          children: function children() {
-            var _rootProps$components;
+      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
   });
-}
+}
+
+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 };

package/legacy/components/cell/GridCell.js

@@ -46,6 +46,8 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 var warnedOnce = false;
 
 function GridCell(props) {
+  var _rootProps$experiment;
+
   var align = props.align,
       children = props.children,
       colIndex = props.colIndex,
@@ -143,7 +145,7 @@ function GridCell(props) {
   }, [hasFocus, cellMode, apiRef]);
   var handleFocus = other.onFocus;
 
-  if (process.env.NODE_ENV === 'test') {
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
     handleFocus = function handleFocus(event) {
       var focusedCell = gridFocusCellSelector(apiRef);
 
@@ -156,7 +158,7 @@ function GridCell(props) {
       }
 
       if (!warnedOnce) {
-        console.error(["MUI: The cell with id=".concat(rowId, " and field=").concat(field, " received focus."), "According to the state, the focus should be at id=".concat(focusedCell == null ? void 0 : focusedCell.id, ", field=").concat(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=".concat(rowId, " and field=").concat(field, " received focus."), "According to the state, the focus should be at id=".concat(focusedCell == null ? void 0 : focusedCell.id, ", field=").concat(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;
       }
     };
@@ -198,7 +200,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
   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,
@@ -212,7 +214,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/legacy/components/cell/GridEditBooleanCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+var _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';
@@ -36,6 +36,7 @@ export function GridEditBooleanCell(props) {
       getValue = props.getValue,
       hasFocus = props.hasFocus,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       error = props.error,
       other = _objectWithoutProperties(props, _excluded);
 

package/legacy/components/cell/GridEditDateCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating"];
+var _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';
@@ -34,6 +34,7 @@ export function GridEditDateCell(props) {
       getValue = props.getValue,
       inputProps = props.inputProps,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       other = _objectWithoutProperties(props, _excluded);
 
   var isDateTime = colDef.type === 'dateTime';

package/legacy/components/cell/GridEditInputCell.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs"];
+var _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';
@@ -10,6 +10,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";
 
@@ -39,6 +40,10 @@ var GridEditInputCellRoot = styled(InputBase, {
 });
 
 function GridEditInputCell(props) {
+  var _rootProps$experiment;
+
+  var rootProps = useGridRootProps();
+
   var id = props.id,
       value = props.value,
       formattedValue = props.formattedValue,
@@ -54,7 +59,8 @@ function GridEditInputCell(props) {
       getValue = props.getValue,
       isValidating = props.isValidating,
       _props$debounceMs = props.debounceMs,
-      debounceMs = _props$debounceMs === void 0 ? SUBMIT_FILTER_STROKE_TIME : _props$debounceMs,
+      debounceMs = _props$debounceMs === void 0 ? (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME : _props$debounceMs,
+      isProcessingProps = props.isProcessingProps,
       other = _objectWithoutProperties(props, _excluded);
 
   var inputRef = React.useRef();
@@ -64,7 +70,6 @@ function GridEditInputCell(props) {
       valueState = _React$useState2[0],
       setValueState = _React$useState2[1];
 
-  var rootProps = useGridRootProps();
   var ownerState = {
     classes: rootProps.classes
   };
@@ -93,7 +98,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));
 }
 
@@ -108,8 +114,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 {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 var renderEditInputCell = function renderEditInputCell(params) {

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -43,6 +43,7 @@ function GridEditSingleSelectCell(props) {
       getValue = props.getValue,
       hasFocus = props.hasFocus,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       error = props.error,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -87,37 +88,48 @@ function GridEditSingleSelectCell(props) {
 
   var handleChange = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
-      var isValid, canCommit, params;
+      var _rootProps$experiment;
+
+      var target, isValid, canCommit, params;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               setOpen(false);
-              _context.next = 3;
+              target = event.target;
+              _context.next = 4;
               return api.setEditCellValue({
                 id: id,
                 field: field,
-                value: event.target.value
+                value: target.value
               }, event);
 
-            case 3:
+            case 4:
               isValid = _context.sent;
 
+              if (!((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi)) {
+                _context.next = 7;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 7:
               if (!(rootProps.editMode === GridEditModes.Row || isValid === false)) {
-                _context.next = 6;
+                _context.next = 9;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 6:
-              _context.next = 8;
+            case 9:
+              _context.next = 11;
               return Promise.resolve(api.commitCellChange({
                 id: id,
                 field: field
               }, event));
 
-            case 8:
+            case 11:
               canCommit = _context.sent;
 
               if (canCommit) {
@@ -130,7 +142,7 @@ function GridEditSingleSelectCell(props) {
                 }
               }
 
-            case 10:
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -150,7 +162,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: id,
+          field: field,
+          ignoreModifications: true
+        });
+      } else {
+        api.setCellMode(id, field, 'view');
+      }
     }
   };
 
@@ -191,7 +213,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 {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 var renderEditSingleSelectCell = function renderEditSingleSelectCell(params) {

package/legacy/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';
@@ -20,10 +21,12 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   var _rootProps$components;
 
-  var counter = props.counter;
+  var counter = props.counter,
+      field = props.field,
+      onClick = props.onClick;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
 
@@ -45,7 +48,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;
@@ -75,4 +82,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/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -11,7 +11,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';
@@ -23,12 +22,14 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       classes = ownerState.classes,
       isDragging = ownerState.isDragging,
       sortDirection = ownerState.sortDirection,
-      showRightBorder = ownerState.showRightBorder;
-  var isColumnSorted = sortDirection != null; // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
+      showRightBorder = ownerState.showRightBorder,
+      filterItemsCounter = ownerState.filterItemsCounter;
+  var isColumnSorted = sortDirection != null;
+  var isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0; // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
 
   var isColumnNumeric = column.type === 'number';
   var slots = {
-    root: ['columnHeader', column.headerAlign === 'left' && 'columnHeader--alignLeft', column.headerAlign === 'center' && 'columnHeader--alignCenter', column.headerAlign === 'right' && 'columnHeader--alignRight', column.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnNumeric && 'columnHeader--numeric', showRightBorder && 'withBorder'],
+    root: ['columnHeader', column.headerAlign === 'left' && 'columnHeader--alignLeft', column.headerAlign === 'center' && 'columnHeader--alignCenter', column.headerAlign === 'right' && 'columnHeader--alignRight', column.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', showRightBorder && 'withBorder'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -37,7 +38,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _column$headerName, _rootProps$components;
+  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
 
   var column = props.column,
       columnMenuOpen = props.columnMenuOpen,
@@ -146,9 +147,10 @@ function GridColumnHeaderItem(props) {
   var sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
 
   var 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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -214,7 +216,7 @@ function GridColumnHeaderItem(props) {
       open: columnMenuOpen,
       target: iconButtonRef.current,
       ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
       onExited: handleExited
     })]
   }));

package/legacy/components/columnHeaders/GridColumnHeaderTitle.js

@@ -92,7 +92,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/legacy/components/columnHeaders/GridColumnHeaders.js

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

package/legacy/components/columnHeaders/index.js

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

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -128,7 +128,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    * 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,
@@ -151,7 +151,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.

package/legacy/components/containers/GridOverlay.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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';
@@ -34,7 +35,7 @@ var GridOverlayRoot = styled('div', {
     backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity)
   };
 });
-export var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -47,4 +48,12 @@ export var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(prop
     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 };