@mui/x-data-grid 5.8.0 → 5.11.0

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "getValue"];
+var _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';
 import { useForkRef } from '@mui/material/utils';
-import { GridEvents } from '../../models/events';
 import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -35,6 +34,7 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
       hasFocus = props.hasFocus,
       tabIndex = props.tabIndex,
       getValue = props.getValue,
+      api = props.api,
       other = _objectWithoutProperties(props, _excluded);
 
   var apiRef = useGridApiContext();
@@ -53,7 +53,7 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
       value: event.target.checked,
       id: id
     };
-    apiRef.current.publishEvent(GridEvents.rowSelectionCheckboxChange, params, event);
+    apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
 
   React.useLayoutEffect(function () {
@@ -78,7 +78,7 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
     }
 
     if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   }, [apiRef, props]);
   var isSelectable = !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef.current.getRowParams(id));
@@ -104,6 +104,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.
    */
@@ -119,10 +125,21 @@ 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.
@@ -166,7 +183,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 var GridCellCheckboxRenderer = /*#__PURE__*/React.memo(GridCellCheckboxForwardRef);

package/legacy/components/columnSelection/GridHeaderCheckbox.js

@@ -5,7 +5,6 @@ var _excluded = ["field", "colDef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { GridEvents } from '../../models/events';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { gridSelectionStateSelector } from '../../hooks/features/selection/gridSelectionSelector';
@@ -83,7 +82,7 @@ var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckb
     var params = {
       value: event.target.checked
     };
-    apiRef.current.publishEvent(GridEvents.headerSelectionCheckboxChange, params);
+    apiRef.current.publishEvent('headerSelectionCheckboxChange', params);
   };
 
   var tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;
@@ -97,14 +96,14 @@ var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckb
   var handleKeyDown = React.useCallback(function (event) {
     if (event.key === ' ') {
       // imperative toggle the checkbox because Space is disable by some preventDefault
-      apiRef.current.publishEvent(GridEvents.headerSelectionCheckboxChange, {
+      apiRef.current.publishEvent('headerSelectionCheckboxChange', {
         value: !isChecked
       });
     } // TODO v6 remove columnHeaderNavigationKeyDown events which are not used internally anymore
 
 
     if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(GridEvents.columnHeaderNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('columnHeaderNavigationKeyDown', props, event);
     }
   }, [apiRef, props, isChecked]);
   var handleSelectionChange = React.useCallback(function () {
@@ -113,7 +112,7 @@ var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckb
     });
   }, []);
   React.useEffect(function () {
-    return apiRef.current.subscribeEvent(GridEvents.selectionChange, handleSelectionChange);
+    return apiRef.current.subscribeEvent('selectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
   var label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({

package/legacy/components/containers/GridFooterContainer.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 { styled, alpha, lighten, darken } from '@mui/material/styles';
@@ -35,7 +36,7 @@ var GridFooterContainerRoot = styled('div', {
     borderTop: "1px solid ".concat(borderColor)
   };
 });
-export var GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
+var GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -48,4 +49,12 @@ export var GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFoot
     ref: ref,
     className: clsx(classes.root, className)
   }, other));
-});
+});
+process.env.NODE_ENV !== "production" ? GridFooterContainer.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 { GridFooterContainer };

package/legacy/components/containers/GridRootStyles.js

@@ -7,12 +7,12 @@ export var GridRootStyles = styled('div', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
-    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
+    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
-})(function (_ref42) {
+})(function (_ref46) {
   var _$concat3, _extends2;
 
-  var theme = _ref42.theme;
+  var theme = _ref46.theme;
   var borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
 
   var gridStyle = _extends({
@@ -189,6 +189,18 @@ export var GridRootStyles = styled('div', {
     display: 'inline-flex',
     alignItems: 'center',
     gridGap: theme.spacing(1)
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCell), {
+    display: 'inline-flex',
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: theme.palette.action.disabledOpacity
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['rowReorderCell--draggable']), {
+    cursor: 'move',
+    opacity: 1
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCellContainer), {
+    padding: 0,
+    alignItems: 'stretch'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.withBorder), {
     borderRight: "1px solid ".concat(borderColor)
   }), _defineProperty(_extends2, "& .".concat(gridClasses['cell--textLeft']), {
@@ -200,12 +212,21 @@ export var GridRootStyles = styled('div', {
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderDraggableContainer), {
     display: 'flex',
     width: '100%'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--dragging']), {
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+    display: 'none'
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--dragging'], ", & .").concat(gridClasses['row--dragging']), {
+    background: theme.palette.background.paper,
+    padding: '0 12px',
+    borderRadius: theme.shape.borderRadius,
+    opacity: theme.palette.action.disabledOpacity
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['row--dragging']), _defineProperty({
     background: theme.palette.background.paper,
     padding: '0 12px',
     borderRadius: theme.shape.borderRadius,
     opacity: theme.palette.action.disabledOpacity
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.treeDataGroupingCell), {
+  }, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
+    display: 'flex'
+  })), _defineProperty(_extends2, "& .".concat(gridClasses.treeDataGroupingCell), {
     display: 'flex',
     alignItems: 'center',
     width: '100%'

package/legacy/components/containers/GridToolbarContainer.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "children"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -28,10 +29,11 @@ var GridToolbarContainerRoot = styled('div', {
   return {
     display: 'flex',
     alignItems: 'center',
+    flexWrap: 'wrap',
     padding: theme.spacing(0.5, 0.5, 0)
   };
 });
-export var GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+var GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
   var className = props.className,
       children = props.children,
       other = _objectWithoutProperties(props, _excluded);
@@ -52,4 +54,12 @@ export var GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToo
   }, other, {
     children: children
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarContainer.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 { GridToolbarContainer };

package/legacy/components/menu/GridMenu.js

@@ -96,6 +96,7 @@ var GridMenu = function GridMenu(props) {
           placement = _ref3.placement;
       return /*#__PURE__*/_jsx(ClickAwayListener, {
         onClickAway: onClickAway,
+        mouseEvent: "onMouseDown",
         children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
           style: {
             transformOrigin: transformOrigin[placement]

package/legacy/components/panel/GridPanel.js

@@ -97,6 +97,7 @@ var GridPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     modifiers: modifiers
   }, other, {
     children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      mouseEvent: "onMouseUp",
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,

package/legacy/components/panel/GridPanelContent.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 { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -30,7 +31,8 @@ var GridPanelContentRoot = styled('div', {
   flex: '1 1',
   maxHeight: 400
 });
-export function GridPanelContent(props) {
+
+function GridPanelContent(props) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -42,4 +44,13 @@ export function GridPanelContent(props) {
   return /*#__PURE__*/_jsx(GridPanelContentRoot, _extends({
     className: clsx(className, classes.root)
   }, other));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridPanelContent.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 { GridPanelContent };

package/legacy/components/panel/GridPanelFooter.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 { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -31,7 +32,8 @@ var GridPanelFooterRoot = styled('div', {
     justifyContent: 'space-between'
   };
 });
-export function GridPanelFooter(props) {
+
+function GridPanelFooter(props) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -43,4 +45,13 @@ export function GridPanelFooter(props) {
   return /*#__PURE__*/_jsx(GridPanelFooterRoot, _extends({
     className: clsx(className, classes.root)
   }, other));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridPanelFooter.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 { GridPanelFooter };

package/legacy/components/panel/GridPanelHeader.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 { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -29,7 +30,8 @@ var GridPanelHeaderRoot = styled('div', {
     padding: theme.spacing(1)
   };
 });
-export function GridPanelHeader(props) {
+
+function GridPanelHeader(props) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -41,4 +43,13 @@ export function GridPanelHeader(props) {
   return /*#__PURE__*/_jsx(GridPanelHeaderRoot, _extends({
     className: clsx(className, classes.root)
   }, other));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridPanelHeader.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 { GridPanelHeader };

package/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -3,6 +3,7 @@ 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 MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
@@ -117,7 +118,7 @@ var getColumnLabel = function getColumnLabel(col) {
 var collator = new Intl.Collator();
 
 function GridFilterForm(props) {
-  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4, _currentColumn$filter2;
+  var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
 
   var item = props.item,
       hasMultipleFilters = props.hasMultipleFilters,
@@ -156,6 +157,9 @@ function GridFilterForm(props) {
   var filterSelectorRef = React.useRef(null);
   var hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
   var baseFormControlProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseFormControl) || {};
+  var baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
+  var isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
   var sortedFilterableColumns = React.useMemo(function () {
     switch (columnsSort) {
       case 'asc':
@@ -281,10 +285,10 @@ function GridFilterForm(props) {
         value: multiFilterOperator,
         onChange: changeLinkOperator,
         disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
-        native: true
-      }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
+        native: isBaseSelectNative
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
         children: linkOperators.map(function (linkOperator) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: linkOperator.toString(),
             children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
           }, linkOperator.toString());
@@ -305,10 +309,10 @@ function GridFilterForm(props) {
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: item.columnField || '',
         onChange: changeColumn,
-        native: true
-      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
+        native: isBaseSelectNative
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
         children: sortedFilterableColumns.map(function (col) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: col.field,
             children: getColumnLabel(col)
           }, col.field);
@@ -329,11 +333,11 @@ function GridFilterForm(props) {
         id: operatorSelectId,
         value: item.operatorValue,
         onChange: changeOperator,
-        native: true,
+        native: isBaseSelectNative,
         inputRef: filterSelectorRef
-      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
+      }, (_rootProps$components5 = rootProps.componentsProps) == null ? void 0 : _rootProps$components5.baseSelect, {
         children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(function (operator) {
-          return /*#__PURE__*/_jsx("option", {
+          return /*#__PURE__*/_jsx(OptionComponent, {
             value: operator.value,
             children: operator.label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(operator.value)))
           }, operator.value);

package/legacy/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -3,11 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridFilterInputBoolean(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -21,6 +22,9 @@ export function GridFilterInputBoolean(props) {
       setFilterValueState = _React$useState2[1];
 
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  var OptionComponent = isSelectNative ? 'option' : MenuItem;
   var onFilterChange = React.useCallback(function (event) {
     var value = event.target.value;
     setFilterValueState(value);
@@ -37,21 +41,22 @@ export function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: _extends({
+      native: isSelectNative,
+      displayEmpty: true
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField, {
-    children: [/*#__PURE__*/_jsx("option", {
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: [/*#__PURE__*/_jsx(OptionComponent, {
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/_jsx("option", {
+    }), /*#__PURE__*/_jsx(OptionComponent, {
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/_jsx("option", {
+    }), /*#__PURE__*/_jsx(OptionComponent, {
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
     })]

package/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -7,11 +7,12 @@ var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
+var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api, OptionComponent) {
   var valueOptions = _ref.valueOptions,
       valueFormatter = _ref.valueFormatter,
       field = _ref.field;
@@ -19,22 +20,24 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref, api) {
     field: field
   }))) : [''].concat(_toConsumableArray(valueOptions || []));
   return iterableColumnValues.map(function (option) {
-    return _typeof(option) === 'object' ? /*#__PURE__*/_jsx("option", {
-      value: option.value,
-      children: option.label
-    }, option.value) : /*#__PURE__*/_jsx("option", {
+    var isOptionTypeObject = _typeof(option) === 'object';
+    var key = isOptionTypeObject ? option.value : option;
+    var value = isOptionTypeObject ? option.value : option;
+    var formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
-      children: valueFormatter && option !== '' ? valueFormatter({
-        value: option,
-        field: field,
-        api: api
-      }) : option
-    }, option);
+      field: field,
+      api: api
+    }) : option;
+    var content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/_jsx(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
   });
 };
 
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   var item = props.item,
       applyValue = props.applyValue,
@@ -50,6 +53,8 @@ function GridFilterInputSingleSelect(props) {
 
   var id = useId();
   var rootProps = useGridRootProps();
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   var currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var currentValueOptions = React.useMemo(function () {
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
@@ -100,11 +105,11 @@ function GridFilterInputSingleSelect(props) {
     },
     inputRef: focusElementRef,
     select: true,
-    SelectProps: {
-      native: true
-    }
-  }, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField, {
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: _extends({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect)
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : MenuItem)
   }));
 }