@mui/x-data-grid 5.8.0 → 5.11.0

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId } from '@mui/material/utils';
-import { GridEvents } from '../../models/events';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
@@ -87,25 +86,25 @@ function GridColumnHeaderItem(props) {
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(column.field), event);
   }, [apiRef, column.field]);
   const mouseEventsHandlers = {
-    onClick: publish(GridEvents.columnHeaderClick),
-    onDoubleClick: publish(GridEvents.columnHeaderDoubleClick),
-    onMouseOver: publish(GridEvents.columnHeaderOver),
+    onClick: publish('columnHeaderClick'),
+    onDoubleClick: publish('columnHeaderDoubleClick'),
+    onMouseOver: publish('columnHeaderOver'),
     // TODO remove as it's not used
-    onMouseOut: publish(GridEvents.columnHeaderOut),
+    onMouseOut: publish('columnHeaderOut'),
     // TODO remove as it's not used
-    onMouseEnter: publish(GridEvents.columnHeaderEnter),
+    onMouseEnter: publish('columnHeaderEnter'),
     // TODO remove as it's not used
-    onMouseLeave: publish(GridEvents.columnHeaderLeave),
+    onMouseLeave: publish('columnHeaderLeave'),
     // TODO remove as it's not used
-    onKeyDown: publish(GridEvents.columnHeaderKeyDown),
-    onFocus: publish(GridEvents.columnHeaderFocus),
-    onBlur: publish(GridEvents.columnHeaderBlur)
+    onKeyDown: publish('columnHeaderKeyDown'),
+    onFocus: publish('columnHeaderFocus'),
+    onBlur: publish('columnHeaderBlur')
   };
   const draggableEventHandlers = {
-    onDragStart: publish(GridEvents.columnHeaderDragStart),
-    onDragEnter: publish(GridEvents.columnHeaderDragEnter),
-    onDragOver: publish(GridEvents.columnHeaderDragOver),
-    onDragEnd: publish(GridEvents.columnHeaderDragEnd)
+    onDragStart: publish('columnHeaderDragStart'),
+    onDragEnter: publish('columnHeaderDragEnter'),
+    onDragOver: publish('columnHeaderDragOver'),
+    onDragEnd: publish('columnHeaderDragEnd')
   };
   const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
   const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
@@ -117,7 +116,7 @@ function GridColumnHeaderItem(props) {
 
   const classes = useUtilityClasses(ownerState);
   const width = column.computedWidth;
-  let ariaSort;
+  let ariaSort = 'none';
 
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
@@ -158,14 +157,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 == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
     }
-  });
+  }, [apiRef, hasFocus]);
   const headerClassName = typeof column.headerClassName === 'function' ? column.headerClassName({
     field: column.field,
     colDef: column
@@ -203,7 +199,7 @@ function GridColumnHeaderItem(props) {
       resizable: !rootProps.disableColumnResize && !!column.resizable,
       resizing: isResizing,
       height: headerHeight,
-      onMouseDown: publish(GridEvents.columnSeparatorMouseDown),
+      onMouseDown: publish('columnSeparatorMouseDown'),
       side: separatorSide
     }), /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
       columnMenuId: columnMenuId,

package/components/columnHeaders/GridColumnHeaders.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
-    innerRef?: React.Ref<HTMLDivElement>;
+    sx?: SxProps<Theme>;
 }
 export declare const GridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/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';

package/components/columnHeaders/GridColumnHeadersInner.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 interface GridColumnHeadersInnerProps extends React.HTMLAttributes<HTMLDivElement> {
     isDragging: boolean;
+    sx?: SxProps<Theme>;
 }
 export declare const GridColumnHeadersInner: React.ForwardRefExoticComponent<GridColumnHeadersInnerProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/columnSelection/GridCellCheckboxRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridCellParams } from '../../models/params/gridCellParams';
-declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridCellParams<any, any, any> & React.RefAttributes<HTMLInputElement>>;
+import { GridRenderCellParams } from '../../models/params/gridCellParams';
+declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any> & React.RefAttributes<HTMLInputElement>>;
 export { GridCellCheckboxForwardRef };
-export declare const GridCellCheckboxRenderer: React.MemoExoticComponent<React.ForwardRefExoticComponent<GridCellParams<any, any, any> & React.RefAttributes<HTMLInputElement>>>;
+export declare const GridCellCheckboxRenderer: React.MemoExoticComponent<React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any> & React.RefAttributes<HTMLInputElement>>>;

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -1,11 +1,10 @@
 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';
 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';
@@ -50,7 +49,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       value: event.target.checked,
       id
     };
-    apiRef.current.publishEvent(GridEvents.rowSelectionCheckboxChange, params, event);
+    apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
 
   React.useLayoutEffect(() => {
@@ -75,7 +74,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     }
 
     if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   }, [apiRef, props]);
   const isSelectable = !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef.current.getRowParams(id));
@@ -101,6 +100,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.
    */
@@ -116,10 +121,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.
@@ -163,7 +179,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/components/columnSelection/GridHeaderCheckbox.js

@@ -4,7 +4,6 @@ const _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';
@@ -75,7 +74,7 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     const params = {
       value: event.target.checked
     };
-    apiRef.current.publishEvent(GridEvents.headerSelectionCheckboxChange, params);
+    apiRef.current.publishEvent('headerSelectionCheckboxChange', params);
   };
 
   const tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;
@@ -89,21 +88,21 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
   const handleKeyDown = React.useCallback(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]);
   const handleSelectionChange = React.useCallback(() => {
     forceUpdate(p => !p);
   }, []);
   React.useEffect(() => {
-    return apiRef.current.subscribeEvent(GridEvents.selectionChange, handleSelectionChange);
+    return apiRef.current.subscribeEvent('selectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({

package/components/containers/GridFooterContainer.d.ts

@@ -1,3 +1,9 @@
 import * as React from 'react';
-export declare type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const GridFooterContainer: React.ForwardRefExoticComponent<GridFooterContainerProps & React.RefAttributes<HTMLDivElement>>;
+import { SxProps, Theme } from '@mui/material/styles';
+export declare type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+};
+declare const GridFooterContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridFooterContainer };

package/components/containers/GridFooterContainer.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 { styled, alpha, lighten, darken } from '@mui/material/styles';
@@ -36,7 +37,7 @@ const GridFooterContainerRoot = styled('div', {
     borderTop: `1px solid ${borderColor}`
   };
 });
-export const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
+const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
   const {
     className
   } = props,
@@ -51,4 +52,12 @@ export const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFo
     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/components/containers/GridRootStyles.js

@@ -73,8 +73,16 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses['row--editable']}`]: styles['row--editable']
   }, {
     [`& .${gridClasses['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${gridClasses['row--dragging']}`]: styles['row--dragging']
   }, {
     [`& .${gridClasses.row}`]: styles.row
+  }, {
+    [`& .${gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+  }, {
+    [`& .${gridClasses.rowReorderCell}`]: styles.rowReorderCell
+  }, {
+    [`& .${gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
   }, {
     [`& .${gridClasses.sortIcon}`]: styles.sortIcon
   }, {
@@ -309,6 +317,21 @@ export const GridRootStyles = styled('div', {
       alignItems: 'center',
       gridGap: theme.spacing(1)
     },
+    [`& .${gridClasses.rowReorderCell}`]: {
+      display: 'inline-flex',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: theme.palette.action.disabledOpacity
+    },
+    [`& .${gridClasses['rowReorderCell--draggable']}`]: {
+      cursor: 'move',
+      opacity: 1
+    },
+    [`& .${gridClasses.rowReorderCellContainer}`]: {
+      padding: 0,
+      alignItems: 'stretch'
+    },
     [`& .${gridClasses.withBorder}`]: {
       borderRight: `1px solid ${borderColor}`
     },
@@ -325,12 +348,24 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       width: '100%'
     },
-    [`& .${gridClasses['columnHeader--dragging']}`]: {
+    [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
+      display: 'none'
+    },
+    [`& .${gridClasses['columnHeader--dragging']}, & .${gridClasses['row--dragging']}`]: {
       background: theme.palette.background.paper,
       padding: '0 12px',
       borderRadius: theme.shape.borderRadius,
       opacity: theme.palette.action.disabledOpacity
     },
+    [`& .${gridClasses['row--dragging']}`]: {
+      background: theme.palette.background.paper,
+      padding: '0 12px',
+      borderRadius: theme.shape.borderRadius,
+      opacity: theme.palette.action.disabledOpacity,
+      [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
+        display: 'flex'
+      }
+    },
     [`& .${gridClasses.treeDataGroupingCell}`]: {
       display: 'flex',
       alignItems: 'center',

package/components/containers/GridToolbarContainer.d.ts

@@ -1,3 +1,9 @@
 import * as React from 'react';
-export declare type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const GridToolbarContainer: React.ForwardRefExoticComponent<GridToolbarContainerProps & React.RefAttributes<HTMLDivElement>>;
+import { SxProps, Theme } from '@mui/material/styles';
+export declare type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+};
+declare const GridToolbarContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridToolbarContainer };

package/components/containers/GridToolbarContainer.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _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,9 +29,10 @@ const GridToolbarContainerRoot = styled('div', {
 }) => ({
   display: 'flex',
   alignItems: 'center',
+  flexWrap: 'wrap',
   padding: theme.spacing(0.5, 0.5, 0)
 }));
-export const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
   const {
     className,
     children
@@ -53,4 +55,12 @@ export const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridT
   }, 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/components/menu/GridMenu.js

@@ -95,6 +95,7 @@ const GridMenu = props => {
       placement
     }) => /*#__PURE__*/_jsx(ClickAwayListener, {
       onClickAway: onClickAway,
+      mouseEvent: "onMouseDown",
       children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
         style: {
           transformOrigin: transformOrigin[placement]

package/components/panel/GridPanel.js

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

package/components/panel/GridPanelContent.d.ts

@@ -1,2 +1,9 @@
 import * as React from 'react';
-export declare function GridPanelContent(props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): JSX.Element;
+import { SxProps, Theme } from '@mui/material/styles';
+declare function GridPanelContent(props: React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+}): JSX.Element;
+declare namespace GridPanelContent {
+    var propTypes: any;
+}
+export { GridPanelContent };

package/components/panel/GridPanelContent.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 { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -30,7 +31,8 @@ const GridPanelContentRoot = styled('div', {
   flex: '1 1',
   maxHeight: 400
 });
-export function GridPanelContent(props) {
+
+function GridPanelContent(props) {
   const {
     className
   } = props,
@@ -44,4 +46,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/components/panel/GridPanelFooter.d.ts

@@ -1,2 +1,9 @@
 import * as React from 'react';
-export declare function GridPanelFooter(props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): JSX.Element;
+import { SxProps, Theme } from '@mui/material/styles';
+declare function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+}): JSX.Element;
+declare namespace GridPanelFooter {
+    var propTypes: any;
+}
+export { GridPanelFooter };

package/components/panel/GridPanelFooter.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 { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -30,7 +31,8 @@ const GridPanelFooterRoot = styled('div', {
   display: 'flex',
   justifyContent: 'space-between'
 }));
-export function GridPanelFooter(props) {
+
+function GridPanelFooter(props) {
   const {
     className
   } = props,
@@ -44,4 +46,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/components/panel/GridPanelHeader.d.ts

@@ -1,2 +1,9 @@
 import * as React from 'react';
-export declare function GridPanelHeader(props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): JSX.Element;
+import { SxProps, Theme } from '@mui/material/styles';
+declare function GridPanelHeader(props: React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+}): JSX.Element;
+declare namespace GridPanelHeader {
+    var propTypes: any;
+}
+export { GridPanelHeader };

package/components/panel/GridPanelHeader.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 { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -28,7 +29,8 @@ const GridPanelHeaderRoot = styled('div', {
 }) => ({
   padding: theme.spacing(1)
 }));
-export function GridPanelHeader(props) {
+
+function GridPanelHeader(props) {
   const {
     className
   } = props,
@@ -42,4 +44,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/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';
@@ -103,7 +104,7 @@ const getColumnLabel = col => col.headerName || col.field;
 const 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;
 
   const {
     item,
@@ -138,6 +139,9 @@ function GridFilterForm(props) {
   const filterSelectorRef = React.useRef(null);
   const hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
   const baseFormControlProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseFormControl) || {};
+  const baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
+  const isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  const OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -251,9 +255,9 @@ function GridFilterForm(props) {
         value: multiFilterOperator,
         onChange: changeLinkOperator,
         disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
-        native: true
-      }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
-        children: linkOperators.map(linkOperator => /*#__PURE__*/_jsx("option", {
+        native: isBaseSelectNative
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
+        children: linkOperators.map(linkOperator => /*#__PURE__*/_jsx(OptionComponent, {
           value: linkOperator.toString(),
           children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
         }, linkOperator.toString()))
@@ -273,9 +277,9 @@ 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, {
-        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx("option", {
+        native: isBaseSelectNative
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
+        children: sortedFilterableColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -295,10 +299,10 @@ 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, {
-        children: currentColumn == null ? void 0 : (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_jsx("option", {
+      }, (_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(operator => /*#__PURE__*/_jsx(OptionComponent, {
           value: operator.value,
           children: operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)
         }, operator.value))