@mui/x-data-grid 8.0.0-alpha.6 → 8.0.0-alpha.8

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -84,7 +84,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
   const {
     isIndeterminate,
     isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector);
+  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector, undefined, _useGridSelector.objectShallowCompare);
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
@@ -95,7 +95,8 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     onChange: handleChange,
     className: classes.root,
     inputProps: {
-      'aria-label': label
+      'aria-label': label,
+      name: 'select_row'
     },
     onKeyDown: handleKeyDown,
     indeterminate: isIndeterminate,

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -50,13 +50,16 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
       return selection;
     }
     return selection.filter(id => {
+      if (rootProps.keepNonExistentRowsSelected) {
+        return true;
+      }
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
         return false;
       }
       return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
     });
-  }, [apiRef, rootProps.isRowSelectable, selection]);
+  }, [apiRef, rootProps.isRowSelectable, selection, rootProps.keepNonExistentRowsSelected]);
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
@@ -111,7 +114,8 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
     onChange: handleChange,
     className: classes.root,
     inputProps: {
-      'aria-label': label
+      'aria-label': label,
+      name: 'select_all_rows'
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -149,11 +149,11 @@ function GridColumnsManagement(props) {
           endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
             "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
             size: "small",
-            sx: [searchValue ? {
+            style: searchValue ? {
               visibility: 'visible'
             } : {
               visibility: 'hidden'
-            }],
+            },
             tabIndex: -1,
             onClick: handleSearchReset
           }, rootProps.slotProps?.baseIconButton, {

package/node/components/containers/GridRoot.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridRootStyles = require("./GridRootStyles");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -19,8 +20,10 @@ var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiCont
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
+var _GridHeader = require("../GridHeader");
+var _base = require("../base");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
+const _excluded = ["className", "children"];
 const useUtilityClasses = (ownerState, density) => {
   const {
     autoHeight,
@@ -32,10 +35,11 @@ const useUtilityClasses = (ownerState, density) => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridRoot = exports.GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
+const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
-      className
+      className,
+      children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -53,11 +57,14 @@ const GridRoot = exports.GridRoot = (0, _forwardRef.forwardRef)(function GridRoo
   if (!mountedState) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
-    ref: handleRef
+    ref: handleRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeader.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridBody, {
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridFooterPlaceholder, {})]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
@@ -69,4 +76,5 @@ process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
    * 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;
+} : void 0;
+const MemoizedGridRoot = exports.GridRoot = (0, _fastMemo.fastMemo)(GridRoot);

package/node/components/containers/GridRootStyles.js

@@ -338,6 +338,13 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       display: 'flex',
       alignItems: 'center'
     },
+    [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingRight: 5,
+      minHeight: 'min-content',
+      overflow: 'hidden'
+    },
     [`& .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}`]: {
       overflow: 'hidden'
     },

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

@@ -12,28 +12,22 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("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 _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
-const BooleanOperatorContainer = (0, _styles.styled)('div')({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px'
-  }
-});
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "label", "variant", "InputProps", "InputLabelProps", "sx"];
 function GridFilterInputBoolean(props) {
   const {
       item,
       applyValue,
       apiRef,
       focusElementRef,
+      headerFilterMenu,
       clearButton,
       tabIndex,
       label: labelProp,
-      variant = 'standard'
+      variant = 'outlined',
+      InputProps,
+      sx
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
@@ -54,9 +48,10 @@ function GridFilterInputBoolean(props) {
     setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BooleanOperatorContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
       fullWidth: true,
+      sx: sx,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
@@ -72,11 +67,11 @@ function GridFilterInputBoolean(props) {
         notched: variant === 'outlined' ? true : undefined,
         native: isSelectNative,
         displayEmpty: true,
-        inputProps: {
+        inputProps: (0, _extends2.default)({
           ref: focusElementRef,
           tabIndex
-        }
-      }, others /* FIXME: typing error */, baseSelectProps, {
+        }, InputProps?.inputProps)
+      }, baseSelectProps, others /* FIXME: typing error */, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
           native: isSelectNative,
           value: "",
@@ -91,7 +86,7 @@ function GridFilterInputBoolean(props) {
           children: apiRef.current.getLocaleText('filterValueFalse')
         }))]
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
 function sanitizeFilterItemValue(value) {
@@ -114,6 +109,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _utils.refType,
+  headerFilterMenu: _propTypes.default.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

package/node/components/panel/filterPanel/GridFilterInputDate.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", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "disabled"];
 function convertFilterItemValueToInputValue(itemValue, inputType) {
   if (itemValue == null) {
     return '';
@@ -43,6 +43,7 @@ function GridFilterInputDate(props) {
       apiRef,
       focusElementRef,
       InputProps,
+      headerFilterMenu,
       clearButton,
       tabIndex,
       disabled
@@ -70,33 +71,34 @@ function GridFilterInputDate(props) {
     const value = convertFilterItemValueToInputValue(item.value, type);
     setFilterValueState(value);
   }, [item.value, type]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
-    fullWidth: true,
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    variant: "standard",
-    type: type || 'text',
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef,
-    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)({
-        max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
-        tabIndex
-      }, InputProps?.inputProps)
-    })
-  }, other, rootProps.slotProps?.baseTextField));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+      fullWidth: true,
+      id: id,
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      value: filterValueState,
+      onChange: onFilterChange,
+      variant: "standard",
+      type: type || 'text',
+      disabled: disabled,
+      InputLabelProps: {
+        shrink: true
+      },
+      inputRef: focusElementRef,
+      InputProps: (0, _extends2.default)({
+        endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+          fontSize: "small",
+          color: "action"
+        }) : null
+      }, InputProps, {
+        inputProps: (0, _extends2.default)({
+          max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+          tabIndex
+        }, InputProps?.inputProps)
+      })
+    }, rootProps.slotProps?.baseTextField, other)), headerFilterMenu, clearButton]
+  });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -109,6 +111,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

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

@@ -28,7 +28,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       error,
       helperText,
       size,
-      variant = 'standard'
+      variant = 'outlined'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const TextFieldProps = {

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

@@ -27,7 +27,7 @@ function GridFilterInputMultipleValue(props) {
       error,
       helperText,
       size,
-      variant = 'standard'
+      variant = 'outlined'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const TextFieldProps = {

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", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "headerFilterMenu", "InputProps", "InputLabelProps", "sx"];
 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,
@@ -57,8 +48,11 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
-      variant = 'standard',
-      clearButton
+      variant = 'outlined',
+      clearButton,
+      headerFilterMenu,
+      InputProps,
+      sx
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterValue = item.value ?? '';
@@ -91,9 +85,10 @@ function GridFilterInputSingleSelect(props) {
     return null;
   }
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SingleSelectOperatorContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
       fullWidth: true,
+      sx: sx,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         htmlFor: id,
@@ -108,14 +103,14 @@ function GridFilterInputSingleSelect(props) {
         onChange: onFilterChange,
         variant: variant,
         type: type || 'text',
-        inputProps: {
+        inputProps: (0, _extends2.default)({
           tabIndex,
           ref: focusElementRef,
           placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-        },
+        }, InputProps?.inputProps),
         native: isSelectNative,
         notched: variant === 'outlined' ? true : undefined
-      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
+      }, rootProps.slotProps?.baseSelect, others /* FIXME: typing error */, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,
@@ -125,7 +120,7 @@ function GridFilterInputSingleSelect(props) {
           baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
         })
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -139,6 +134,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

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", "clearButton", "headerFilterMenu", "InputProps", "variant"];
 function GridFilterInputValue(props) {
   const {
       item,
@@ -25,22 +25,23 @@ function GridFilterInputValue(props) {
       tabIndex,
       disabled,
       clearButton,
+      headerFilterMenu,
       InputProps,
-      variant = 'standard'
+      variant = 'outlined'
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterTimeout = (0, _useTimeout.useTimeout)();
-  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value, type));
+  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 = sanitizeFilterItemValue(event.target.value, type);
+    const value = sanitizeFilterItemValue(event.target.value);
     setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = (0, _extends2.default)({}, item, {
-        value,
+        value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
@@ -50,42 +51,43 @@ function GridFilterInputValue(props) {
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value == null) {
-      setFilterValueState(sanitizeFilterItemValue(item.value, type));
+      setFilterValueState(sanitizeFilterItemValue(item.value));
     }
-  }, [id, item, type]);
-  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 === undefined ? '' : String(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));
+  }, [id, item]);
+  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,
+      variant: variant,
+      type: type || 'text',
+      disabled: disabled,
+      InputProps: (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
+      }, InputProps, {
+        inputProps: (0, _extends2.default)({
+          tabIndex
+        }, InputProps?.inputProps)
+      }),
+      InputLabelProps: {
+        shrink: true
+      },
+      inputRef: focusElementRef
+    }, rootProps.slotProps?.baseTextField, others)), headerFilterMenu, clearButton]
+  });
 }
-function sanitizeFilterItemValue(value, type) {
+function sanitizeFilterItemValue(value) {
   if (value == null || value === '') {
     return undefined;
   }
-  if (type === 'number') {
-    return Number(value);
-  }
   return String(value);
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
@@ -99,6 +101,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -117,11 +117,11 @@ function GridToolbarQuickFilter(props) {
           "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
           size: "small",
           edge: "end",
-          sx: [searchValue ? {
+          style: searchValue ? {
             visibility: 'visible'
           } : {
             visibility: 'hidden'
-          }],
+          },
           onClick: handleSearchReset
         }, rootProps.slotProps?.baseIconButton, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -29,6 +29,9 @@ const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 6,
+  '&:hover': {
+    zIndex: 7
+  },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
   // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
@@ -110,19 +113,15 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   (0, _useOnMount.useOnMount)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
-    scroller.addEventListener('scroll', onScrollerScroll, {
-      capture: true
-    });
-    scrollbar.addEventListener('scroll', onScrollbarScroll, {
-      capture: true
-    });
+    const options = {
+      capture: true,
+      passive: true
+    };
+    scroller.addEventListener('scroll', onScrollerScroll, options);
+    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
     return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, {
-        capture: true
-      });
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, {
-        capture: true
-      });
+      scroller.removeEventListener('scroll', onScrollerScroll, options);
+      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
     };
   });
   React.useEffect(() => {

package/node/components/virtualization/GridVirtualScroller.js

@@ -108,10 +108,10 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
-      position: "vertical"
-    }, getScrollbarVerticalProps())), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), props.children]
+    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+      position: "vertical"
+    }, getScrollbarVerticalProps())), props.children]
   }));
 }

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/constants/localeTextConstants.js

@@ -104,6 +104,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   'headerFilterOperator>=': 'Greater than or equal to',
   'headerFilterOperator<': 'Less than',
   'headerFilterOperator<=': 'Less than or equal to',
+  headerFilterClear: 'Clear filter',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',