@mui/x-data-grid 8.0.0-alpha.0 → 8.0.0-alpha.10

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

@@ -6,37 +6,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"],
-  _excluded2 = ["key"];
+const _excluded = ["key"],
+  _excluded2 = ["inputProps", "InputProps", "InputLabelProps"];
 function GridFilterInputMultipleValue(props) {
   const {
-      item,
-      applyValue,
-      type,
-      apiRef,
-      focusElementRef,
-      color,
-      error,
-      helperText,
-      size,
-      variant = 'standard'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const TextFieldProps = {
-    color,
-    error,
-    helperText,
-    size,
-    variant
-  };
+    item,
+    applyValue,
+    type,
+    apiRef,
+    focusElementRef,
+    slotProps
+  } = props;
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -70,23 +58,33 @@ function GridFilterInputMultipleValue(props) {
         {
           key
         } = _getTagProps,
-        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded2);
+        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
         variant: "outlined",
         size: "small",
         label: option
       }, tagProps), key);
     }),
-    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, params, {
-      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-      InputLabelProps: (0, _extends2.default)({}, params.InputLabelProps, {
-        shrink: true
-      }),
-      inputRef: focusElementRef,
-      type: type || 'text'
-    }, TextFieldProps, rootProps.slotProps?.baseTextField))
-  }, other));
+    renderInput: params => {
+      const {
+          inputProps,
+          InputProps,
+          InputLabelProps
+        } = params,
+        rest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded2);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, rest, {
+        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+        inputRef: focusElementRef,
+        type: type || 'text',
+        slotProps: {
+          input: InputProps,
+          inputLabel: InputLabelProps,
+          htmlInput: inputProps
+        }
+      }, rootProps.slotProps?.baseTextField));
+    }
+  }, slotProps?.root));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -97,12 +95,36 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes =
     current: _propTypes.default.object.isRequired
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
+  className: _propTypes.default.string,
+  clearButton: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: (props, propName) => {
+      if (props[propName] == null) {
+        return null;
+      }
+      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error(`Expected prop '${propName}' to be of type Element`);
+      }
+      return null;
+    }
+  })]),
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive: _propTypes.default.bool,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     operator: _propTypes.default.string.isRequired,
     value: _propTypes.default.any
   }).isRequired,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  slotProps: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
   type: _propTypes.default.oneOf(['date', 'datetime-local', 'number', 'text'])
 } : void 0;

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

@@ -12,11 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "isFilterActive", "clearButton", "headerFilterMenu", "slotProps"];
 const renderSingleSelectOptions = ({
   column,
   OptionComponent,
@@ -39,14 +38,6 @@ const renderSingleSelectOptions = ({
     }), label);
   });
 };
-const SingleSelectOperatorContainer = (0, _styles.styled)('div')({
-  display: 'flex',
-  alignItems: 'flex-end',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px'
-  }
-});
 function GridFilterInputSingleSelect(props) {
   const {
       item,
@@ -54,11 +45,10 @@ function GridFilterInputSingleSelect(props) {
       type,
       apiRef,
       focusElementRef,
-      placeholder,
       tabIndex,
-      label: labelProp,
-      variant = 'standard',
-      clearButton
+      clearButton,
+      headerFilterMenu,
+      slotProps
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterValue = item.value ?? '';
@@ -90,15 +80,15 @@ function GridFilterInputSingleSelect(props) {
   if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
     return null;
   }
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SingleSelectOperatorContainer, {
+  const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
       fullWidth: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: variant,
+        variant: "outlined",
         children: label
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         id: id,
@@ -106,16 +96,16 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: variant,
+        variant: "outlined",
         type: type || 'text',
-        inputProps: {
+        inputProps: (0, _extends2.default)({
           tabIndex,
           ref: focusElementRef,
-          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-        },
+          placeholder: slotProps?.root.placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        }, slotProps?.root.slotProps?.htmlInput),
         native: isSelectNative,
-        notched: variant === 'outlined' ? true : undefined
-      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
+        notched: true
+      }, rootProps.slotProps?.baseSelect, others /* FIXME: typing error */, slotProps?.root, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,
@@ -125,7 +115,7 @@ function GridFilterInputSingleSelect(props) {
           baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
         })
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -137,8 +127,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     current: _propTypes.default.object.isRequired
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
+  className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: (props, propName) => {
+      if (props[propName] == null) {
+        return null;
+      }
+      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error(`Expected prop '${propName}' to be of type Element`);
+      }
+      return null;
+    }
+  })]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
@@ -149,5 +153,10 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     operator: _propTypes.default.string.isRequired,
     value: _propTypes.default.any
-  }).isRequired
+  }).isRequired,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  slotProps: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  type: _propTypes.default.oneOf(['singleSelect'])
 } : void 0;

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

@@ -14,7 +14,7 @@ var _utils = require("@mui/utils");
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "slotProps", "clearButton", "headerFilterMenu"];
 function GridFilterInputValue(props) {
   const {
       item,
@@ -24,25 +24,24 @@ function GridFilterInputValue(props) {
       focusElementRef,
       tabIndex,
       disabled,
+      slotProps,
       clearButton,
-      InputProps,
-      variant = 'standard'
+      headerFilterMenu
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const textFieldProps = slotProps?.root;
   const filterTimeout = (0, _useTimeout.useTimeout)();
-  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
-    const {
-      value
-    } = event.target;
-    setFilterValueState(String(value));
+    const value = sanitizeFilterItemValue(event.target.value);
+    setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = (0, _extends2.default)({}, item, {
-        value: type === 'number' ? Number(value) : value,
+        value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
@@ -51,35 +50,42 @@ function GridFilterInputValue(props) {
   }, [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue]);
   React.useEffect(() => {
     const itemPlusTag = item;
-    if (itemPlusTag.fromInput !== id || item.value === undefined) {
-      setFilterValueState(String(item.value ?? ''));
+    if (itemPlusTag.fromInput !== id || item.value == null) {
+      setFilterValueState(sanitizeFilterItemValue(item.value));
     }
   }, [id, item]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    variant: variant,
-    type: type || 'text',
-    InputProps: (0, _extends2.default)({}, applying || clearButton ? {
-      endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
-        fontSize: "small",
-        color: "action"
-      }) : clearButton
-    } : {}, {
-      disabled
-    }, InputProps, {
-      inputProps: (0, _extends2.default)({
-        tabIndex
-      }, InputProps?.inputProps)
-    }),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, rootProps.slotProps?.baseTextField));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+      id: id,
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      value: filterValueState ?? '',
+      onChange: onFilterChange,
+      type: type || 'text',
+      disabled: disabled,
+      slotProps: (0, _extends2.default)({}, textFieldProps?.slotProps, {
+        input: (0, _extends2.default)({
+          endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
+            position: "end",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+              fontSize: "small",
+              color: "action"
+            })
+          }) : null
+        }, textFieldProps?.slotProps?.input),
+        htmlInput: (0, _extends2.default)({
+          tabIndex
+        }, textFieldProps?.slotProps?.htmlInput)
+      }),
+      inputRef: focusElementRef
+    }, rootProps.slotProps?.baseTextField, others, textFieldProps)), headerFilterMenu, clearButton]
+  });
+}
+function sanitizeFilterItemValue(value) {
+  if (value == null || value === '') {
+    return undefined;
+  }
+  return String(value);
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -90,8 +96,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     current: _propTypes.default.object.isRequired
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
+  className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: (props, propName) => {
+      if (props[propName] == null) {
+        return null;
+      }
+      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error(`Expected prop '${propName}' to be of type Element`);
+      }
+      return null;
+    }
+  })]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
@@ -102,5 +122,10 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     operator: _propTypes.default.string.isRequired,
     value: _propTypes.default.any
-  }).isRequired
+  }).isRequired,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  slotProps: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  type: _propTypes.default.oneOf(['date', 'datetime-local', 'number', 'text'])
 } : void 0;

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

@@ -10,6 +10,7 @@ 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"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridFilterItem = require("../../../models/gridFilterItem");
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
 var _GridPanelContent = require("../GridPanelContent");
@@ -28,7 +29,7 @@ const getGridFilter = col => ({
   id: Math.round(Math.random() * 1e5)
 });
 exports.getGridFilter = getGridFilter;
-const GridFilterPanel = exports.GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
+const GridFilterPanel = exports.GridFilterPanel = (0, _forwardRef.forwardRef)(function GridFilterPanel(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
@@ -150,9 +151,8 @@ const GridFilterPanel = exports.GridFilterPanel = /*#__PURE__*/React.forwardRef(
       lastFilterRef.current.focus();
     }
   }, [validFilters.length]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelContent.GridPanelContent, {
       children: [readOnlyFilters.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
         item: item,

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

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  GridFilterInputBoolean: true,
   GridFilterPanel: true
 };
+Object.defineProperty(exports, "GridFilterInputBoolean", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterInputBoolean.GridFilterInputBoolean;
+  }
+});
 Object.defineProperty(exports, "GridFilterPanel", {
   enumerable: true,
   get: function () {
@@ -61,29 +68,6 @@ Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
   });
 });
 var _GridFilterInputBoolean = require("./GridFilterInputBoolean");
-Object.keys(_GridFilterInputBoolean).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _GridFilterInputBoolean[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridFilterInputBoolean[key];
-    }
-  });
-});
-var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
-Object.keys(_GridFilterInputValueProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridFilterInputValueProps[key];
-    }
-  });
-});
 var _GridFilterPanel = require("./GridFilterPanel");
 var _GridFilterInputMultipleValue = require("./GridFilterInputMultipleValue");
 Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {

package/node/components/toolbar/GridToolbar.js

@@ -10,6 +10,7 @@ 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"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridToolbarContainer = require("../containers/GridToolbarContainer");
 var _GridToolbarColumnsButton = require("./GridToolbarColumnsButton");
 var _GridToolbarDensitySelector = require("./GridToolbarDensitySelector");
@@ -19,7 +20,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
-const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
   const _ref = props,
@@ -35,9 +36,8 @@ const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({}, other, {
+    ref: ref,
     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
@@ -61,7 +61,13 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   /**
    * Props passed to the quick filter component.
    */
-  quickFilterProps: _propTypes.default.object,
+  quickFilterProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    debounceMs: _propTypes.default.number,
+    quickFilterFormatter: _propTypes.default.func,
+    quickFilterParser: _propTypes.default.func,
+    slotProps: _propTypes.default.object
+  }),
   /**
    * Show the quick filter component.
    * @default false

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -10,13 +10,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forwardRef.forwardRef)(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -44,9 +45,8 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-      ref: ref,
       id: columnButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
@@ -54,9 +54,15 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {})
-    }, buttonProps, {
-      onClick: showColumns
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
+      onPointerUp: event => {
+        if (preferencePanel.open) {
+          event.stopPropagation();
+        }
+        buttonProps.onPointerUp?.(event);
+      },
+      onClick: showColumns,
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -19,7 +19,7 @@ var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _forwardRef.forwardRef)(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -80,20 +80,18 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: option.icon
-    }), option.label]
+    iconStart: option.icon,
+    children: option.label
   }, index));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
       title: apiRef.current.getLocaleText('toolbarDensityLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-        ref: handleRef,
         size: "small",
         startIcon: startIcon,
         "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
@@ -101,9 +99,9 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
         "aria-expanded": open,
         "aria-controls": open ? densityMenuId : undefined,
         id: densityButtonId
-      }, buttonProps, {
-        onClick: handleDensitySelectorOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
+        onClick: handleDensitySelectorOpen,
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbarExport.js

@@ -12,6 +12,7 @@ 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"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
@@ -93,7 +94,7 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     pageStyle: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
   })
 } : void 0;
-const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
+const GridToolbarExport = exports.GridToolbarExport = (0, _forwardRef.forwardRef)(function GridToolbarExport(props, ref) {
   const _ref = props,
     {
       csvOptions = {},