@mui/x-data-grid 5.8.0 → 5.11.0

package/node/components/containers/GridRootStyles.js

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

package/node/components/containers/GridToolbarContainer.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _styles = require("@mui/material/styles");
@@ -50,6 +52,7 @@ const GridToolbarContainerRoot = (0, _styles.styled)('div', {
 }) => ({
   display: 'flex',
   alignItems: 'center',
+  flexWrap: 'wrap',
   padding: theme.spacing(0.5, 0.5, 0)
 }));
 const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
@@ -75,4 +78,11 @@ const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarC
     children: children
   }));
 });
-exports.GridToolbarContainer = GridToolbarContainer;
+exports.GridToolbarContainer = GridToolbarContainer;
+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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/components/menu/GridMenu.js

@@ -122,6 +122,7 @@ const GridMenu = props => {
       placement
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
       onClickAway: onClickAway,
+      mouseEvent: "onMouseDown",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grow.default, (0, _extends2.default)({}, TransitionProps, {
         style: {
           transformOrigin: transformOrigin[placement]

package/node/components/panel/GridPanel.js

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

package/node/components/panel/GridPanelContent.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _styles = require("@mui/material/styles");
@@ -66,4 +68,12 @@ function GridPanelContent(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContentRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/components/panel/GridPanelFooter.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _styles = require("@mui/material/styles");
@@ -66,4 +68,12 @@ function GridPanelFooter(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelFooterRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/components/panel/GridPanelHeader.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _styles = require("@mui/material/styles");
@@ -64,4 +66,12 @@ function GridPanelHeader(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelHeaderRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

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

@@ -17,6 +17,8 @@ var _material = require("@mui/material");
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
@@ -131,7 +133,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,
@@ -166,6 +168,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.default;
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -279,9 +284,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__*/(0, _jsxRuntime.jsx)("option", {
+        native: isBaseSelectNative
+      }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
+        children: linkOperators.map(linkOperator => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: linkOperator.toString(),
           children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
         }, linkOperator.toString()))
@@ -301,9 +306,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__*/(0, _jsxRuntime.jsx)("option", {
+        native: isBaseSelectNative
+      }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseSelect, {
+        children: sortedFilterableColumns.map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: col.field,
           children: getColumnLabel(col)
         }, col.field))
@@ -323,10 +328,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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(OptionComponent, {
           value: operator.value,
           children: operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.capitalize)(operator.value)}`)
         }, operator.value))

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

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function GridFilterInputBoolean(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   const {
     item,
@@ -35,6 +37,9 @@ function GridFilterInputBoolean(props) {
         others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  const OptionComponent = isSelectNative ? 'option' : _MenuItem.default;
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -51,21 +56,22 @@ function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: (0, _extends2.default)({
+      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__*/(0, _jsxRuntime.jsx)("option", {
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
     })]

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

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@mui/material/utils");
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 
 var _filterPanelUtils = require("./filterPanelUtils");
@@ -33,25 +35,29 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/(0, _jsxRuntime.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;
 
   const {
     item,
@@ -64,6 +70,8 @@ function GridFilterInputSingleSelect(props) {
   const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentValueOptions = React.useMemo(() => {
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
@@ -114,11 +122,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: (0, _extends2.default)({
+      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.default)
   }));
 }
 

package/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -18,6 +18,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@mui/material/utils");
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _icons = require("../../icons");
 
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
@@ -43,28 +45,32 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
+  });
 };
 
 const SUBMIT_FILTER_STROKE_TIME = 500;
 exports.SUBMIT_FILTER_STROKE_TIME = SUBMIT_FILTER_STROKE_TIME;
 
 function GridFilterInputValue(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   const {
     item,
@@ -84,12 +90,14 @@ function GridFilterInputValue(props) {
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const singleSelectProps = type === 'singleSelect' ? {
     select: true,
-    SelectProps: {
-      native: true
-    },
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: (0, _extends2.default)({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : _MenuItem.default)
   } : {};
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value; // NativeSelect casts the value to a string.
@@ -140,7 +148,7 @@ function GridFilterInputValue(props) {
       shrink: true
     },
     inputRef: focusElementRef
-  }, singleSelectProps, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+  }, singleSelectProps, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField));
 }
 
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {

package/node/components/toolbar/GridToolbar.js

@@ -15,6 +15,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
 var _GridToolbarContainer = require("../containers/GridToolbarContainer");
 
 var _GridToolbarColumnsButton = require("./GridToolbarColumnsButton");
@@ -27,23 +29,30 @@ var _GridToolbarExport = require("./GridToolbarExport");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className", "csvOptions", "printOptions"];
+const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+  // TODO v6: think about where export option should be passed.
+  // from componentProps={{ toolbarExport: { ...exportOption} }} seems to be more appropriate
   const {
     csvOptions,
-    printOptions
+    printOptions,
+    excelOptions,
+    showQuickFilter = false,
+    quickFilterProps = {}
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
 
-  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector) {
+  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
 
@@ -52,8 +61,14 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
       csvOptions: csvOptions,
-      printOptions: printOptions
-    })]
+      printOptions: printOptions // TODO: remove the reference to excelOptions in community package
+      ,
+      excelOptions: excelOptions
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        flex: 1
+      }
+    }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
   }));
 });
 exports.GridToolbar = GridToolbar;
@@ -62,6 +77,16 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  csvOptions: _propTypes.default.object,
-  printOptions: _propTypes.default.object
+
+  /**
+   * Props passed to the quick filter component.
+   */
+  quickFilterProps: _propTypes.default.object,
+
+  /**
+   * Show the quick filter component.
+   * @default false
+   */
+  showQuickFilter: _propTypes.default.bool,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -129,7 +129,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-labelledby": densityMenuId,
+      "aria-controls": densityMenuId,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/node/components/toolbar/GridToolbarExport.js

@@ -23,7 +23,7 @@ var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["csvOptions", "printOptions"];
+const _excluded = ["csvOptions", "printOptions", "excelOptions"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -35,11 +35,6 @@ const GridCsvExportMenuItem = props => {
     hideMenu,
     options
   } = props;
-
-  if (options != null && options.disableToolbarButton) {
-    return null;
-  }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
@@ -57,11 +52,6 @@ const GridPrintExportMenuItem = props => {
     hideMenu,
     options
   } = props;
-
-  if (options != null && options.disableToolbarButton) {
-    return null;
-  }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
@@ -75,21 +65,26 @@ exports.GridPrintExportMenuItem = GridPrintExportMenuItem;
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
     csvOptions = {},
-    printOptions = {}
+    printOptions = {},
+    excelOptions
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
+    excelOptions,
+    csvOptions,
+    printOptions
+  }).sort((a, b) => a.componentName > b.componentName ? 1 : -1);
 
-  if (csvOptions != null && csvOptions.disableToolbarButton && printOptions != null && printOptions.disableToolbarButton) {
+  if (preProcessedButtons.length === 0) {
     return null;
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarExportContainer.GridToolbarExportContainer, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExportContainer.GridToolbarExportContainer, (0, _extends2.default)({}, other, {
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridCsvExportMenuItem, {
-      options: csvOptions
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPrintExportMenuItem, {
-      options: printOptions
-    })]
+    children: preProcessedButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button.component, {
+      key: index
+    }))
   }));
 });
 exports.GridToolbarExport = GridToolbarExport;