@mui/x-data-grid 9.8.0 → 9.10.0

package/components/panel/filterPanel/GridFilterInputDate.mjs

@@ -3,7 +3,7 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "disabled"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "disabled", "disableDebounce"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -41,7 +41,8 @@ function GridFilterInputDate(props) {
       headerFilterMenu,
       clearButton,
       tabIndex,
-      disabled
+      disabled,
+      disableDebounce = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootSlotProps = slotProps?.root.slotProps;
@@ -50,19 +51,25 @@ function GridFilterInputDate(props) {
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
+  const debounceMs = disableDebounce ? 0 : rootProps.filterDebounceMs;
   const onFilterChange = React.useCallback(event => {
     filterTimeout.clear();
     const value = event.target.value;
     setFilterValueState(value);
+    const date = new Date(value);
+    const newItem = _extends({}, item, {
+      value: Number.isNaN(date.getTime()) ? undefined : date
+    });
+    if (debounceMs === 0) {
+      applyValue(newItem);
+      return;
+    }
     setIsApplying(true);
-    filterTimeout.start(rootProps.filterDebounceMs, () => {
-      const date = new Date(value);
-      applyValue(_extends({}, item, {
-        value: Number.isNaN(date.getTime()) ? undefined : date
-      }));
+    filterTimeout.start(debounceMs, () => {
+      applyValue(newItem);
       setIsApplying(false);
     });
-  }, [applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  }, [applyValue, item, debounceMs, filterTimeout]);
   React.useEffect(() => {
     const value = convertFilterItemValueToInputValue(item.value, type);
     setFilterValueState(value);
@@ -80,7 +87,7 @@ function GridFilterInputDate(props) {
       inputRef: focusElementRef,
       slotProps: _extends({}, rootSlotProps, {
         input: _extends({
-          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+          endAdornment: applying && debounceMs > 0 ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
             fontSize: "small",
             color: "action"
           }) : null
@@ -105,6 +112,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes /* remove-
   className: PropTypes.string,
   clearButton: PropTypes.node,
   disabled: PropTypes.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   headerFilterMenu: PropTypes.node,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.mts

@@ -1,10 +1,11 @@
+import * as React from 'react';
 import type { AutocompleteProps } from "../../../models/gridBaseSlots.mjs";
 import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.mjs";
 import type { ValueOptions } from "../../../models/colDef/gridColDef.mjs";
 export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): import("react/jsx-runtime").JSX.Element | null;
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputMultipleSingleSelect {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -1,10 +1,11 @@
+import * as React from 'react';
 import type { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 import type { ValueOptions } from "../../../models/colDef/gridColDef.js";
 export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): import("react/jsx-runtime").JSX.Element | null;
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputMultipleSingleSelect {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -15,7 +15,7 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps", "disableDebounce"];
 function GridFilterInputMultipleSingleSelect(props) {
   const {
       item,
@@ -89,6 +89,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
   className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
   disabled: _propTypes.default.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: _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({

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.mjs

@@ -1,7 +1,7 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps", "disableDebounce"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -81,6 +81,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
   className: PropTypes.string,
   clearButton: PropTypes.node,
   disabled: PropTypes.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   headerFilterMenu: PropTypes.node,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({

package/components/panel/filterPanel/GridFilterInputMultipleValue.d.mts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 import type { AutocompleteProps } from "../../../models/gridBaseSlots.mjs";
 import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.mjs";
 export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options'>> & {
   type?: 'text' | 'number' | 'date' | 'datetime-local';
 };
-declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): import("react/jsx-runtime").JSX.Element;
+declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;
 declare namespace GridFilterInputMultipleValue {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputMultipleValue.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 import type { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options'>> & {
   type?: 'text' | 'number' | 'date' | 'datetime-local';
 };
-declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): import("react/jsx-runtime").JSX.Element;
+declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;
 declare namespace GridFilterInputMultipleValue {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps", "disableDebounce"];
 function GridFilterInputMultipleValue(props) {
   const {
       item,
@@ -78,6 +78,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes /
   className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
   disabled: _propTypes.default.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: _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({

package/components/panel/filterPanel/GridFilterInputMultipleValue.mjs

@@ -3,7 +3,7 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps", "disableDebounce"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -71,6 +71,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes /
   className: PropTypes.string,
   clearButton: PropTypes.node,
   disabled: PropTypes.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   headerFilterMenu: PropTypes.node,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({

package/components/panel/filterPanel/GridFilterInputSingleSelect.d.mts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 import type { TextFieldProps } from "../../../models/gridBaseSlots.mjs";
 import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.mjs";
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps<TextFieldProps> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): import("react/jsx-runtime").JSX.Element | null;
+declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputSingleSelect {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputSingleSelect.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 import type { TextFieldProps } from "../../../models/gridBaseSlots.js";
 import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps<TextFieldProps> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): import("react/jsx-runtime").JSX.Element | null;
+declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputSingleSelect {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -16,7 +16,7 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "isFilterActive", "clearButton", "headerFilterMenu", "slotProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "isFilterActive", "clearButton", "headerFilterMenu", "slotProps", "disableDebounce"];
 const renderSingleSelectOptions = ({
   column,
   OptionComponent,
@@ -115,6 +115,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes /*
   className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
   disabled: _propTypes.default.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: _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({

package/components/panel/filterPanel/GridFilterInputSingleSelect.mjs

@@ -1,7 +1,7 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "isFilterActive", "clearButton", "headerFilterMenu", "slotProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "isFilterActive", "clearButton", "headerFilterMenu", "slotProps", "disableDebounce"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -107,6 +107,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes /*
   className: PropTypes.string,
   clearButton: PropTypes.node,
   disabled: PropTypes.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   headerFilterMenu: PropTypes.node,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({

package/components/panel/filterPanel/GridFilterInputValue.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { TextFieldProps } from "../../../models/gridBaseSlots.mjs";
 import type { GridFilterItem } from "../../../models/gridFilterItem.mjs";
 import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.mjs";
@@ -7,7 +8,7 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps<TextFieldP
 export type ItemPlusTag = GridFilterItem & {
   fromInput?: string;
 };
-declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): import("react/jsx-runtime").JSX.Element;
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
 declare namespace GridFilterInputValue {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { TextFieldProps } from "../../../models/gridBaseSlots.js";
 import type { GridFilterItem } from "../../../models/gridFilterItem.js";
 import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
@@ -7,7 +8,7 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps<TextFieldP
 export type ItemPlusTag = GridFilterItem & {
   fromInput?: string;
 };
-declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): import("react/jsx-runtime").JSX.Element;
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
 declare namespace GridFilterInputValue {
   var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -16,7 +16,7 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 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", "slotProps", "clearButton", "headerFilterMenu"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "disableDebounce", "isFilterActive", "slotProps", "clearButton", "headerFilterMenu"];
 function GridFilterInputValue(props) {
   const {
       item,
@@ -26,6 +26,7 @@ function GridFilterInputValue(props) {
       focusElementRef,
       tabIndex,
       disabled,
+      disableDebounce = false,
       slotProps,
       clearButton,
       headerFilterMenu
@@ -37,19 +38,24 @@ function GridFilterInputValue(props) {
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const debounceMs = disableDebounce ? 0 : rootProps.filterDebounceMs;
   const onFilterChange = React.useCallback(event => {
     const value = sanitizeFilterItemValue(event.target.value);
     setFilterValueState(value);
+    const newItem = (0, _extends2.default)({}, item, {
+      value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
+      fromInput: id
+    });
+    if (debounceMs === 0) {
+      applyValue(newItem);
+      return;
+    }
     setIsApplying(true);
-    filterTimeout.start(rootProps.filterDebounceMs, () => {
-      const newItem = (0, _extends2.default)({}, item, {
-        value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
-        fromInput: id
-      });
+    filterTimeout.start(debounceMs, () => {
       applyValue(newItem);
       setIsApplying(false);
     });
-  }, [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue]);
+  }, [filterTimeout, debounceMs, item, type, id, applyValue]);
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value == null) {
@@ -67,7 +73,7 @@ function GridFilterInputValue(props) {
       disabled: disabled,
       slotProps: (0, _extends2.default)({}, textFieldProps?.slotProps, {
         input: (0, _extends2.default)({
-          endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+          endAdornment: applying && debounceMs > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
             fontSize: "small",
             color: "action"
           }) : null
@@ -98,6 +104,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes /* remove
   className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
   disabled: _propTypes.default.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: _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({

package/components/panel/filterPanel/GridFilterInputValue.mjs

@@ -3,7 +3,7 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 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", "slotProps", "clearButton", "headerFilterMenu"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "disableDebounce", "isFilterActive", "slotProps", "clearButton", "headerFilterMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -19,6 +19,7 @@ function GridFilterInputValue(props) {
       focusElementRef,
       tabIndex,
       disabled,
+      disableDebounce = false,
       slotProps,
       clearButton,
       headerFilterMenu
@@ -30,19 +31,24 @@ function GridFilterInputValue(props) {
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
+  const debounceMs = disableDebounce ? 0 : rootProps.filterDebounceMs;
   const onFilterChange = React.useCallback(event => {
     const value = sanitizeFilterItemValue(event.target.value);
     setFilterValueState(value);
+    const newItem = _extends({}, item, {
+      value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
+      fromInput: id
+    });
+    if (debounceMs === 0) {
+      applyValue(newItem);
+      return;
+    }
     setIsApplying(true);
-    filterTimeout.start(rootProps.filterDebounceMs, () => {
-      const newItem = _extends({}, item, {
-        value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
-        fromInput: id
-      });
+    filterTimeout.start(debounceMs, () => {
       applyValue(newItem);
       setIsApplying(false);
     });
-  }, [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue]);
+  }, [filterTimeout, debounceMs, item, type, id, applyValue]);
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value == null) {
@@ -60,7 +66,7 @@ function GridFilterInputValue(props) {
       disabled: disabled,
       slotProps: _extends({}, textFieldProps?.slotProps, {
         input: _extends({
-          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+          endAdornment: applying && debounceMs > 0 ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
             fontSize: "small",
             color: "action"
           }) : null
@@ -91,6 +97,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes /* remove
   className: PropTypes.string,
   clearButton: PropTypes.node,
   disabled: PropTypes.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default false
+   */
+  disableDebounce: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
   headerFilterMenu: PropTypes.node,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({

package/components/panel/filterPanel/GridFilterPanel.d.mts

@@ -1,43 +1,5 @@
 import * as React from 'react';
-import type { SxProps, Theme } from '@mui/material/styles';
-import type { GridFilterItem } from "../../../models/gridFilterItem.mjs";
-import type { GridFilterFormProps } from "./GridFilterForm.mjs";
-import type { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.mjs";
-export interface GetColumnForNewFilterArgs {
-  currentFilters: GridFilterItem[];
-  columns: GridStateColDef[];
-}
-export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOperators' | 'columnsSort'> {
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-  /**
-   * Function that returns the next filter item to be picked as default filter.
-   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
-   * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
-   */
-  getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'] | null;
-  /**
-   * Props passed to each filter form.
-   */
-  filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' | 'filterColumns'>;
-  /**
-   * If `true`, the `Add filter` button will not be displayed.
-   * @default false
-   */
-  disableAddFilterButton?: boolean;
-  /**
-   * If `true`, the `Remove all` button will be disabled
-   * @default false
-   */
-  disableRemoveAllButton?: boolean;
-  /**
-   * @ignore - do not document.
-   */
-  children?: React.ReactNode;
-}
-declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
+import type { GridFilterPanelProps } from "./GridFilterPanelBase.mjs";
 declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps> | React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Demos:
@@ -46,4 +8,5 @@ declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelPr
  * API:
  * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
  */
-export { GridFilterPanel, getGridFilter };
+export { GridFilterPanel };
+export { getGridFilter } from "./GridFilterPanelBase.mjs";

package/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -1,43 +1,5 @@
 import * as React from 'react';
-import type { SxProps, Theme } from '@mui/material/styles';
-import type { GridFilterItem } from "../../../models/gridFilterItem.js";
-import type { GridFilterFormProps } from "./GridFilterForm.js";
-import type { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
-export interface GetColumnForNewFilterArgs {
-  currentFilters: GridFilterItem[];
-  columns: GridStateColDef[];
-}
-export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOperators' | 'columnsSort'> {
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-  /**
-   * Function that returns the next filter item to be picked as default filter.
-   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
-   * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
-   */
-  getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'] | null;
-  /**
-   * Props passed to each filter form.
-   */
-  filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' | 'filterColumns'>;
-  /**
-   * If `true`, the `Add filter` button will not be displayed.
-   * @default false
-   */
-  disableAddFilterButton?: boolean;
-  /**
-   * If `true`, the `Remove all` button will be disabled
-   * @default false
-   */
-  disableRemoveAllButton?: boolean;
-  /**
-   * @ignore - do not document.
-   */
-  children?: React.ReactNode;
-}
-declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
+import type { GridFilterPanelProps } from "./GridFilterPanelBase.js";
 declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps> | React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Demos:
@@ -46,4 +8,5 @@ declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelPr
  * API:
  * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
  */
-export { GridFilterPanel, getGridFilter };
+export { GridFilterPanel };
+export { getGridFilter } from "./GridFilterPanelBase.js";