@mui/x-data-grid 5.10.0 → 5.12.0

package/legacy/components/containers/GridRoot.js

@@ -5,18 +5,29 @@ var _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, capitalize } from '@mui/material/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { GridRootStyles } from './GridRootStyles';
 import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridClasses } from '../../constants/gridClasses';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
-var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
-  var _rootProps$classes;
 
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var autoHeight = ownerState.autoHeight,
+      density = ownerState.density,
+      classes = ownerState.classes;
+  var slots = {
+    root: ['root', autoHeight && 'autoHeight', "root--density".concat(capitalize(density))]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   var rootProps = useGridRootProps();
 
   var children = props.children,
@@ -26,8 +37,15 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   var apiRef = useGridApiContext();
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
   var rootContainerRef = React.useRef(null);
   var handleRef = useForkRef(rootContainerRef, ref);
+  var ownerState = {
+    density: densityValue,
+    classes: rootProps.classes,
+    autoHeight: rootProps.autoHeight
+  };
+  var classes = useUtilityClasses(ownerState);
   apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
 
   var _React$useState = React.useState(false),
@@ -50,7 +68,7 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
 
   return /*#__PURE__*/_jsx(GridRootStyles, _extends({
     ref: handleRef,
-    className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
+    className: clsx(className, classes.root),
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": totalRowCount,

package/legacy/components/containers/GridRootStyles.js

@@ -155,9 +155,10 @@ export var GridRootStyles = styled('div', {
   }), _defineProperty(_extends2, "& .".concat(gridClasses.cell), {
     display: 'flex',
     alignItems: 'center',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
     borderBottom: "1px solid ".concat(borderColor)
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.row, ":not(.").concat(gridClasses['row--dynamicHeight'], ") > .").concat(gridClasses.cell), {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.cellContent), {
     overflow: 'hidden',
     textOverflow: 'ellipsis'

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

@@ -14,6 +14,7 @@ import { styled } from '@mui/material/styles';
 import { HTMLElementType } from '@mui/utils';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -55,6 +56,7 @@ var GridMenu = function GridMenu(props) {
       onExited = props.onExited,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var prevTarget = React.useRef(target);
   var prevOpen = React.useRef(open);
   var rootProps = useGridRootProps();
@@ -65,11 +67,16 @@ var GridMenu = function GridMenu(props) {
   React.useEffect(function () {
     if (prevOpen.current && prevTarget.current) {
       prevTarget.current.focus();
-    }
+    } // Emit menuOpen or menuClose events
+
 
+    var eventName = open ? 'menuOpen' : 'menuClose';
+    apiRef.current.publishEvent(eventName, {
+      target: target
+    });
     prevOpen.current = open;
     prevTarget.current = target;
-  }, [open, target]);
+  }, [apiRef, open, target]);
 
   var handleExited = function handleExited(popperOnExited) {
     return function (node) {

package/legacy/components/panel/GridColumnsPanel.js

@@ -86,8 +86,18 @@ export function GridColumnsPanel(props) {
   };
 
   var toggleAllColumns = React.useCallback(function (isVisible) {
-    // TODO v6: call `setColumnVisibilityModel` directly
-    apiRef.current.updateColumns(columns.map(function (col) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
+      if (isVisible) {
+        return apiRef.current.setColumnVisibilityModel({});
+      }
+
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(function (col) {
+        return [col.field, false];
+      })));
+    } // TODO v6: Remove
+
+
+    return apiRef.current.updateColumns(columns.map(function (col) {
       if (col.hideable !== false) {
         return {
           field: col.field,

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/GridPanelWrapper.js

@@ -37,7 +37,7 @@ var isEnabled = function isEnabled() {
   return true;
 };
 
-function GridPanelWrapper(props) {
+var GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -51,10 +51,10 @@ function GridPanelWrapper(props) {
     disableEnforceFocus: true,
     isEnabled: isEnabled,
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
+      ref: ref,
       tabIndex: -1,
       className: clsx(className, classes.root)
     }, other))
   });
-}
-
+});
 export { GridPanelWrapper };

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

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -116,8 +118,7 @@ var getColumnLabel = function getColumnLabel(col) {
 };
 
 var collator = new Intl.Collator();
-
-function GridFilterForm(props) {
+var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
   var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
 
   var item = props.item,
@@ -141,7 +142,10 @@ function GridFilterForm(props) {
       _props$columnInputPro = props.columnInputProps,
       columnInputProps = _props$columnInputPro === void 0 ? {} : _props$columnInputPro,
       _props$valueInputProp = props.valueInputProps,
-      valueInputProps = _props$valueInputProp === void 0 ? {} : _props$valueInputProp;
+      valueInputProps = _props$valueInputProp === void 0 ? {} : _props$valueInputProp,
+      children = props.children,
+      other = _objectWithoutProperties(props, _excluded);
+
   var apiRef = useGridApiContext();
   var filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
   var columnSelectId = useId();
@@ -253,8 +257,10 @@ function GridFilterForm(props) {
       }
     };
   }, [currentOperator]);
-  return /*#__PURE__*/_jsxs(GridFilterFormRoot, {
-    className: classes.root,
+  return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
+    ref: ref,
+    className: classes.root
+  }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
@@ -355,36 +361,111 @@ function GridFilterForm(props) {
         focusElementRef: valueRef
       }, currentOperator.InputComponentProps)) : null
     }))]
-  });
-}
-
+  }));
+});
 process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+
+  /**
+   * Callback called when the operator, column field or value is changed.
+   * @param {GridFilterItem} item The updated [[GridFilterItem]].
+   */
   applyFilterChanges: PropTypes.func.isRequired,
+
+  /**
+   * Callback called when the logic operator is changed.
+   * @param {GridLinkOperator} operator The new logic operator.
+   */
   applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
+
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
   columnInputProps: PropTypes.any,
+
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Callback called when the delete button is clicked.
+   * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+   */
   deleteFilter: PropTypes.func.isRequired,
+
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
   deleteIconProps: PropTypes.any,
+
+  /**
+   * If `true`, disables the logic operator field but still renders it.
+   */
   disableMultiFilterOperator: PropTypes.bool,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
   hasMultipleFilters: PropTypes.bool.isRequired,
+
+  /**
+   * The [[GridFilterItem]] representing this form.
+   */
   item: PropTypes.shape({
     columnField: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operatorValue: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
+
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
   linkOperatorInputProps: PropTypes.any,
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The current logic operator applied.
+   */
   multiFilterOperator: PropTypes.oneOf(['and', 'or']),
+
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
   operatorInputProps: PropTypes.any,
+
+  /**
+   * If `true`, the logic operator field is visible.
+   */
   showMultiFilterOperators: PropTypes.bool,
+
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
   valueInputProps: PropTypes.any
 } : void 0;
 export { GridFilterForm };

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

@@ -93,7 +93,6 @@ function GridFilterInputMultipleSingleSelect(props) {
   }, [applyValue, item]);
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
-    freeSolo: false,
     limitTags: 1,
     options: resolvedValueOptions // TODO: avoid `any`?
     ,

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["linkOperators", "columnsSort", "filterFormProps"];
+var _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -17,8 +17,7 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-function GridFilterPanel(props) {
+var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   var _rootProps$components;
 
   var apiRef = useGridApiContext();
@@ -31,6 +30,7 @@ function GridFilterPanel(props) {
       linkOperators = _props$linkOperators === void 0 ? [GridLinkOperator.And, GridLinkOperator.Or] : _props$linkOperators,
       columnsSort = props.columnsSort,
       filterFormProps = props.filterFormProps,
+      children = props.children,
       other = _objectWithoutProperties(props, _excluded);
 
   var applyFilter = React.useCallback(function (item) {
@@ -96,7 +96,9 @@ function GridFilterPanel(props) {
       lastFilterRef.current.focus();
     }
   }, [items.length]);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
+    ref: ref
+  }, other, {
     children: [/*#__PURE__*/_jsx(GridPanelContent, {
       children: items.map(function (item, index) {
         return /*#__PURE__*/_jsx(GridFilterForm, _extends({
@@ -123,14 +125,22 @@ function GridFilterPanel(props) {
       }))
     })]
   }));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Props passed to each filter form.
+   */
   filterFormProps: PropTypes.shape({
     columnInputProps: PropTypes.any,
     columnsSort: PropTypes.oneOf(['asc', 'desc']),
@@ -139,7 +149,16 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     operatorInputProps: PropTypes.any,
     valueInputProps: PropTypes.any
   }),
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridFilterPanel };

package/legacy/components/toolbar/GridToolbar.js

@@ -1,25 +1,34 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "csvOptions", "printOptions"];
+var _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
 import { GridToolbarContainer } from '../containers/GridToolbarContainer';
 import { GridToolbarColumnsButton } from './GridToolbarColumnsButton';
 import { GridToolbarDensitySelector } from './GridToolbarDensitySelector';
 import { GridToolbarFilterButton } from './GridToolbarFilterButton';
 import { GridToolbarExport } from './GridToolbarExport';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridToolbarQuickFilter } from './GridToolbarQuickFilter';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var 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
   var className = props.className,
       csvOptions = props.csvOptions,
       printOptions = props.printOptions,
+      excelOptions = props.excelOptions,
+      _props$showQuickFilte = props.showQuickFilter,
+      showQuickFilter = _props$showQuickFilte === void 0 ? false : _props$showQuickFilte,
+      _props$quickFilterPro = props.quickFilterProps,
+      quickFilterProps = _props$quickFilterPro === void 0 ? {} : _props$quickFilterPro,
       other = _objectWithoutProperties(props, _excluded);
 
   var rootProps = useGridRootProps();
 
-  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector) {
+  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
 
@@ -28,8 +37,14 @@ var GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref)
   }, other, {
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
-      printOptions: printOptions
-    })]
+      printOptions: printOptions // TODO: remove the reference to excelOptions in community package
+      ,
+      excelOptions: excelOptions
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        flex: 1
+      }
+    }), showQuickFilter && /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
@@ -37,7 +52,17 @@ 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.object,
-  printOptions: PropTypes.object
+
+  /**
+   * Props passed to the quick filter component.
+   */
+  quickFilterProps: PropTypes.object,
+
+  /**
+   * Show the quick filter component.
+   * @default false
+   */
+  showQuickFilter: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridToolbar };