@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.11

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"],
-  _excluded2 = ["key"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"],
+  _excluded2 = ["key"],
+  _excluded3 = ["inputProps", "InputProps", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
@@ -14,22 +15,12 @@ function GridFilterInputMultipleSingleSelect(props) {
   const {
       item,
       applyValue,
+      type,
       apiRef,
       focusElementRef,
-      color,
-      error,
-      helperText,
-      size,
-      variant = 'standard'
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const TextFieldProps = {
-    color,
-    error,
-    helperText,
-    size,
-    variant
-  };
   const id = useId();
   const rootProps = useGridRootProps();
   let resolvedColumn = null;
@@ -88,16 +79,26 @@ function GridFilterInputMultipleSingleSelect(props) {
         label: getOptionLabel(option)
       }, tagProps), key);
     }),
-    renderInput: params => /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
-      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-      InputLabelProps: _extends({}, params.InputLabelProps, {
-        shrink: true
-      }),
-      inputRef: focusElementRef,
-      type: "singleSelect"
-    }, TextFieldProps, rootProps.slotProps?.baseTextField))
-  }, other));
+    renderInput: params => {
+      const {
+          inputProps,
+          InputProps,
+          InputLabelProps
+        } = params,
+        rest = _objectWithoutPropertiesLoose(params, _excluded3);
+      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, 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));
+    }
+  }, other, slotProps?.root));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -108,13 +109,37 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  clearButton: PropTypes.node,
+  disabled: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.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.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
   }).isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  slotProps: PropTypes.object,
+  tabIndex: PropTypes.number,
   type: PropTypes.oneOf(['singleSelect'])
 } : void 0;
 export { GridFilterInputMultipleSingleSelect };

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

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"],
-  _excluded2 = ["key"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["key"],
+  _excluded2 = ["inputProps", "InputProps", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
@@ -10,25 +10,13 @@ import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridFilterInputMultipleValue(props) {
   const {
-      item,
-      applyValue,
-      type,
-      apiRef,
-      focusElementRef,
-      color,
-      error,
-      helperText,
-      size,
-      variant = 'standard'
-    } = props,
-    other = _objectWithoutPropertiesLoose(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 = useId();
   const rootProps = useGridRootProps();
@@ -62,23 +50,33 @@ function GridFilterInputMultipleValue(props) {
         {
           key
         } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded2);
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded);
       return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
         variant: "outlined",
         size: "small",
         label: option
       }, tagProps), key);
     }),
-    renderInput: params => /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
-      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-      InputLabelProps: _extends({}, params.InputLabelProps, {
-        shrink: true
-      }),
-      inputRef: focusElementRef,
-      type: type || 'text'
-    }, TextFieldProps, rootProps.slotProps?.baseTextField))
-  }, other));
+    renderInput: params => {
+      const {
+          inputProps,
+          InputProps,
+          InputLabelProps
+        } = params,
+        rest = _objectWithoutPropertiesLoose(params, _excluded2);
+      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, 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 --------------------------------
@@ -89,13 +87,37 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes =
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  clearButton: PropTypes.node,
+  disabled: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.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.bool,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
   }).isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  slotProps: PropTypes.object,
+  tabIndex: PropTypes.number,
   type: PropTypes.oneOf(['date', 'datetime-local', 'number', 'text'])
 } : void 0;
 export { GridFilterInputMultipleValue };

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

@@ -1,10 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import { styled } from '@mui/material/styles';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { createElement as _createElement } from "react";
@@ -31,14 +30,6 @@ const renderSingleSelectOptions = ({
     }), label);
   });
 };
-const SingleSelectOperatorContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'flex-end',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px'
-  }
-});
 function GridFilterInputSingleSelect(props) {
   const {
       item,
@@ -46,11 +37,10 @@ function GridFilterInputSingleSelect(props) {
       type,
       apiRef,
       focusElementRef,
-      placeholder,
       tabIndex,
-      label: labelProp,
-      variant = 'standard',
-      clearButton
+      clearButton,
+      headerFilterMenu,
+      slotProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterValue = item.value ?? '';
@@ -82,15 +72,15 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
+  const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
       fullWidth: true,
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: variant,
+        variant: "outlined",
         children: label
       })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         id: id,
@@ -98,16 +88,16 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: variant,
+        variant: "outlined",
         type: type || 'text',
-        inputProps: {
+        inputProps: _extends({
           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,
@@ -117,7 +107,7 @@ function GridFilterInputSingleSelect(props) {
           baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
         })
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -129,8 +119,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  className: PropTypes.string,
   clearButton: PropTypes.node,
+  disabled: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.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`)
@@ -141,6 +145,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
-  }).isRequired
+  }).isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  slotProps: PropTypes.object,
+  tabIndex: PropTypes.number,
+  type: PropTypes.oneOf(['singleSelect'])
 } : void 0;
 export { GridFilterInputSingleSelect };

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

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { useTimeout } from "../../../hooks/utils/useTimeout.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridFilterInputValue(props) {
   const {
       item,
@@ -16,25 +16,24 @@ function GridFilterInputValue(props) {
       focusElementRef,
       tabIndex,
       disabled,
+      slotProps,
       clearButton,
-      InputProps,
-      variant = 'standard'
+      headerFilterMenu
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
+  const textFieldProps = slotProps?.root;
   const filterTimeout = useTimeout();
-  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = 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 = _extends({}, item, {
-        value: type === 'number' ? Number(value) : value,
+        value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
@@ -43,35 +42,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__*/_jsx(rootProps.slots.baseTextField, _extends({
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    variant: variant,
-    type: type || 'text',
-    InputProps: _extends({}, applying || clearButton ? {
-      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-        fontSize: "small",
-        color: "action"
-      }) : clearButton
-    } : {}, {
-      disabled
-    }, InputProps, {
-      inputProps: _extends({
-        tabIndex
-      }, InputProps?.inputProps)
-    }),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, rootProps.slotProps?.baseTextField));
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      id: id,
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      value: filterValueState ?? '',
+      onChange: onFilterChange,
+      type: type || 'text',
+      disabled: disabled,
+      slotProps: _extends({}, textFieldProps?.slotProps, {
+        input: _extends({
+          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+            position: "end",
+            children: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+              fontSize: "small",
+              color: "action"
+            })
+          }) : null
+        }, textFieldProps?.slotProps?.input),
+        htmlInput: _extends({
+          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 --------------------------------
@@ -82,8 +88,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  className: PropTypes.string,
   clearButton: PropTypes.node,
+  disabled: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.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`)
@@ -94,6 +114,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
-  }).isRequired
+  }).isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  slotProps: PropTypes.object,
+  tabIndex: PropTypes.number,
+  type: PropTypes.oneOf(['date', 'datetime-local', 'number', 'text'])
 } : void 0;
 export { GridFilterInputValue };

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

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridLogicOperator } from "../../../models/gridFilterItem.js";
 import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
 import { GridPanelContent } from "../GridPanelContent.js";
@@ -19,7 +20,7 @@ const getGridFilter = col => ({
   operator: col.filterOperators[0].value,
   id: Math.round(Math.random() * 1e5)
 });
-const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
+const GridFilterPanel = forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
@@ -141,9 +142,8 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       lastFilterRef.current.focus();
     }
   }, [validFilters.length]);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/_jsxs(GridPanelContent, {
       children: [readOnlyFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
         item: item,

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

@@ -2,8 +2,7 @@ export * from "./GridFilterForm.js";
 export * from "./GridFilterInputValue.js";
 export * from "./GridFilterInputDate.js";
 export * from "./GridFilterInputSingleSelect.js";
-export * from "./GridFilterInputBoolean.js";
-export * from "./GridFilterInputValueProps.js";
+export { GridFilterInputBoolean } from "./GridFilterInputBoolean.js";
 export { GridFilterPanel } from "./GridFilterPanel.js";
 export * from "./GridFilterInputMultipleValue.js";
 export * from "./GridFilterInputMultipleSingleSelect.js";

package/modern/components/toolbar/GridToolbar.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridToolbarContainer } from "../containers/GridToolbarContainer.js";
 import { GridToolbarColumnsButton } from "./GridToolbarColumnsButton.js";
 import { GridToolbarDensitySelector } from "./GridToolbarDensitySelector.js";
@@ -11,7 +12,7 @@ import { GridToolbarExport } from "./GridToolbarExport.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridToolbarQuickFilter } from "./GridToolbarQuickFilter.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+const GridToolbar = 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,
@@ -27,9 +28,8 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
@@ -53,7 +53,13 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   /**
    * Props passed to the quick filter component.
    */
-  quickFilterProps: PropTypes.object,
+  quickFilterProps: PropTypes.shape({
+    className: PropTypes.string,
+    debounceMs: PropTypes.number,
+    quickFilterFormatter: PropTypes.func,
+    quickFilterParser: PropTypes.func,
+    slotProps: PropTypes.object
+  }),
   /**
    * Show the quick filter component.
    * @default false

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -36,9 +37,8 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: ref,
       id: columnButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
@@ -46,9 +46,15 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
       startIcon: /*#__PURE__*/_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')
     }))
   }));