@mui/x-data-grid 5.10.0 → 5.12.0

package/node/components/containers/GridRoot.js

@@ -19,6 +19,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/material/utils");
 
+var _material = require("@mui/material");
+
 var _GridRootStyles = require("./GridRootStyles");
 
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
@@ -33,6 +35,8 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _gridRowsSelector = require("../../hooks/features/rows/gridRowsSelector");
 
+var _densitySelector = require("../../hooks/features/density/densitySelector");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "className"];
@@ -41,9 +45,19 @@ 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; }
 
-const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
-  var _rootProps$classes;
+const useUtilityClasses = ownerState => {
+  const {
+    autoHeight,
+    density,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _utils.capitalize)(density)}`]
+  };
+  return (0, _material.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
 
+const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     children,
@@ -53,8 +67,15 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
   const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
+  const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = (0, _utils.useForkRef)(rootContainerRef, ref);
+  const ownerState = {
+    density: densityValue,
+    classes: rootProps.classes,
+    autoHeight: rootProps.autoHeight
+  };
+  const classes = useUtilityClasses(ownerState);
   apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
 
   const [mountedState, setMountedState] = React.useState(false);
@@ -73,7 +94,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
     ref: handleRef,
-    className: (0, _clsx.default)(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, _gridClasses.gridClasses.root, rootProps.autoHeight && _gridClasses.gridClasses.autoHeight),
+    className: (0, _clsx.default)(className, classes.root),
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": totalRowCount,

package/node/components/containers/GridRootStyles.js

@@ -285,10 +285,12 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.cell}`]: {
       display: 'flex',
       alignItems: 'center',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
       borderBottom: `1px solid ${borderColor}`
     },
+    [`& .${_gridClasses.gridClasses.row}:not(.${_gridClasses.gridClasses['row--dynamicHeight']}) > .${_gridClasses.gridClasses.cell}`]: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    },
     [`& .${_gridClasses.gridClasses.cellContent}`]: {
       overflow: 'hidden',
       textOverflow: 'ellipsis'

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

@@ -35,6 +35,8 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["open", "target", "onClickAway", "children", "position", "className", "onExited"];
@@ -83,6 +85,7 @@ const GridMenu = props => {
     onExited
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const prevTarget = React.useRef(target);
   const prevOpen = React.useRef(open);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -93,11 +96,16 @@ const GridMenu = props => {
   React.useEffect(() => {
     if (prevOpen.current && prevTarget.current) {
       prevTarget.current.focus();
-    }
+    } // Emit menuOpen or menuClose events
+
 
+    const eventName = open ? 'menuOpen' : 'menuClose';
+    apiRef.current.publishEvent(eventName, {
+      target
+    });
     prevOpen.current = open;
     prevTarget.current = target;
-  }, [open, target]);
+  }, [apiRef, open, target]);
 
   const handleExited = popperOnExited => node => {
     if (popperOnExited) {

package/node/components/panel/GridColumnsPanel.js

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

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridPanelWrapper = GridPanelWrapper;
+exports.GridPanelWrapper = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -58,7 +58,7 @@ const GridPanelWrapperRoot = (0, _styles.styled)('div', {
 
 const isEnabled = () => true;
 
-function GridPanelWrapper(props) {
+const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
     className
   } = props,
@@ -73,8 +73,10 @@ function GridPanelWrapper(props) {
     disableEnforceFocus: true,
     isEnabled: isEnabled,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
+      ref: ref,
       tabIndex: -1,
       className: (0, _clsx.default)(className, classes.root)
     }, other))
   });
-}
+});
+exports.GridPanelWrapper = GridPanelWrapper;

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

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridFilterForm = GridFilterForm;
+exports.GridFilterForm = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -43,6 +45,8 @@ var _gridClasses = require("../../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
+
 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; }
@@ -131,8 +135,7 @@ const getLinkOperatorLocaleKey = linkOperator => {
 const getColumnLabel = col => col.headerName || col.field;
 
 const collator = new Intl.Collator();
-
-function GridFilterForm(props) {
+const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
   var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
 
   const {
@@ -152,7 +155,8 @@ function GridFilterForm(props) {
     operatorInputProps = {},
     columnInputProps = {},
     valueInputProps = {}
-  } = props;
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
   const columnSelectId = (0, _utils.unstable_useId)();
@@ -252,8 +256,10 @@ function GridFilterForm(props) {
       }
     }
   }), [currentOperator]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, {
-    className: classes.root,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, (0, _extends2.default)({
+    ref: ref,
+    className: classes.root
+  }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
       variant: "standard",
       as: rootProps.components.BaseFormControl
@@ -348,35 +354,111 @@ function GridFilterForm(props) {
         focusElementRef: valueRef
       }, currentOperator.InputComponentProps)) : null
     }))]
-  });
-}
-
+  }));
+});
+exports.GridFilterForm = GridFilterForm;
 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.default.func.isRequired,
+
+  /**
+   * Callback called when the logic operator is changed.
+   * @param {GridLinkOperator} operator The new logic operator.
+   */
   applyMultiFilterOperatorChanges: _propTypes.default.func.isRequired,
+
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
   columnInputProps: _propTypes.default.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.default.oneOf(['asc', 'desc']),
+
+  /**
+   * Callback called when the delete button is clicked.
+   * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+   */
   deleteFilter: _propTypes.default.func.isRequired,
+
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
   deleteIconProps: _propTypes.default.any,
+
+  /**
+   * If `true`, disables the logic operator field but still renders it.
+   */
   disableMultiFilterOperator: _propTypes.default.bool,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */
   .oneOfType([_propTypes.default.func, _propTypes.default.object]),
+
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
   hasMultipleFilters: _propTypes.default.bool.isRequired,
+
+  /**
+   * The [[GridFilterItem]] representing this form.
+   */
   item: _propTypes.default.shape({
     columnField: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     operatorValue: _propTypes.default.string,
     value: _propTypes.default.any
   }).isRequired,
+
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
   linkOperatorInputProps: _propTypes.default.any,
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The current logic operator applied.
+   */
   multiFilterOperator: _propTypes.default.oneOf(['and', 'or']),
+
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
   operatorInputProps: _propTypes.default.any,
+
+  /**
+   * If `true`, the logic operator field is visible.
+   */
   showMultiFilterOperators: _propTypes.default.bool,
+
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
   valueInputProps: _propTypes.default.any
 } : void 0;

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

@@ -106,7 +106,6 @@ function GridFilterInputMultipleSingleSelect(props) {
   }, [applyValue, item]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     multiple: true,
-    freeSolo: false,
     limitTags: 1,
     options: resolvedValueOptions // TODO: avoid `any`?
     ,

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridFilterPanel = GridFilterPanel;
+exports.GridFilterPanel = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -39,13 +39,13 @@ var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsS
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["linkOperators", "columnsSort", "filterFormProps"];
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
 
 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; }
 
-function GridFilterPanel(props) {
+const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   var _rootProps$components;
 
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -122,7 +122,9 @@ function GridFilterPanel(props) {
       lastFilterRef.current.focus();
     }
   }, [items.length]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({
+    ref: ref
+  }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContent.GridPanelContent, {
       children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
         item: item,
@@ -147,14 +149,23 @@ function GridFilterPanel(props) {
       }))
     })]
   }));
-}
-
+});
+exports.GridFilterPanel = GridFilterPanel;
 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.default.oneOf(['asc', 'desc']),
+
+  /**
+   * Props passed to each filter form.
+   */
   filterFormProps: _propTypes.default.shape({
     columnInputProps: _propTypes.default.any,
     columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
@@ -163,6 +174,15 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     operatorInputProps: _propTypes.default.any,
     valueInputProps: _propTypes.default.any
   }),
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   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/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;