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

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

@@ -1,36 +1,21 @@
 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 * as React from 'react';
 import PropTypes from 'prop-types';
-import Autocomplete from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
 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 = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const TextFieldProps = {
-    color,
-    error,
-    helperText,
-    size,
-    variant
-  };
-  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
+    item,
+    applyValue,
+    type,
+    apiRef,
+    focusElementRef,
+    slotProps
+  } = props;
   const id = useId();
+  const [options, setOptions] = React.useState([]);
+  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const rootProps = useGridRootProps();
   React.useEffect(() => {
     const itemValue = item.value ?? [];
@@ -42,43 +27,31 @@ function GridFilterInputMultipleValue(props) {
       value: [...value.map(filterItemValue => type === 'number' ? Number(filterItemValue) : filterItemValue)]
     }));
   }, [applyValue, item, type]);
-  return /*#__PURE__*/_jsx(Autocomplete, _extends({
+  const handleInputChange = React.useCallback((event, value) => {
+    if (value === '') {
+      setOptions([]);
+    } else {
+      setOptions([value]);
+    }
+  }, [setOptions]);
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/_jsx(BaseAutocomplete, _extends({
     multiple: true,
     freeSolo: true,
-    options: [],
-    filterOptions: (options, params) => {
-      const {
-        inputValue
-      } = params;
-      return inputValue == null || inputValue === '' ? [] : [inputValue];
-    },
+    options: options,
     id: id,
     value: filterValueState,
     onChange: handleChange,
-    renderTags: (value, getTagProps) => value.map((option, index) => {
-      const _getTagProps = getTagProps({
-          index
-        }),
-        {
-          key
-        } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded2);
-      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));
+    onInputChange: handleInputChange,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    slotProps: {
+      textField: {
+        type: type || 'text',
+        inputRef: focusElementRef
+      }
+    }
+  }, slotProps?.root));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputMultipleValue.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -89,13 +62,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.d.ts

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

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

@@ -1,6 +1,6 @@
 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", "headerFilterMenu", "InputProps", "InputLabelProps", "sx"];
+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';
@@ -37,14 +37,10 @@ function GridFilterInputSingleSelect(props) {
       type,
       apiRef,
       focusElementRef,
-      placeholder,
       tabIndex,
-      label: labelProp,
-      variant = 'outlined',
       clearButton,
       headerFilterMenu,
-      InputProps,
-      sx
+      slotProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterValue = item.value ?? '';
@@ -76,43 +72,34 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
       fullWidth: true,
-      sx: sx,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
-        id: labelId,
-        htmlFor: id,
-        shrink: true,
-        variant: variant,
-        children: label
-      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-        id: id,
-        label: label,
-        labelId: labelId,
-        value: filterValue,
-        onChange: onFilterChange,
-        variant: variant,
-        type: type || 'text',
-        inputProps: _extends({
+      id: id,
+      label: label,
+      labelId: labelId,
+      value: filterValue,
+      onChange: onFilterChange,
+      slotProps: {
+        htmlInput: _extends({
           tabIndex,
           ref: focusElementRef,
-          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-        }, InputProps?.inputProps),
-        native: isSelectNative,
-        notched: variant === 'outlined' ? true : undefined
-      }, rootProps.slotProps?.baseSelect, others /* FIXME: typing error */, {
-        children: renderSingleSelectOptions({
-          column: resolvedColumn,
-          OptionComponent: rootProps.slots.baseSelectOption,
-          getOptionLabel,
-          getOptionValue,
-          isSelectNative,
-          baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
-        })
-      }))]
-    }), headerFilterMenu, clearButton]
+          type: type || 'text',
+          placeholder: slotProps?.root.placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        }, slotProps?.root.slotProps?.htmlInput)
+      },
+      native: isSelectNative
+    }, rootProps.slotProps?.baseSelect, others, slotProps?.root, {
+      children: renderSingleSelectOptions({
+        column: resolvedColumn,
+        OptionComponent: rootProps.slots.baseSelectOption,
+        getOptionLabel,
+        getOptionValue,
+        isSelectNative,
+        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+      })
+    })), headerFilterMenu, clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -124,9 +111,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`)
@@ -137,6 +137,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.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { TextFieldProps } from "../../../models/gridBaseSlots.js";
+import { GridFilterItem } from "../../../models/gridFilterItem.js";
+import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+export type GridTypeFilterInputValueProps = GridFilterInputValueProps<TextFieldProps> & {
+  type?: 'text' | 'number' | 'date' | 'datetime-local';
+};
+export type ItemPlusTag = GridFilterItem & {
+  fromInput?: string;
+};
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
+declare namespace GridFilterInputValue {
+  var propTypes: any;
+}
+export { GridFilterInputValue };

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

@@ -1,6 +1,6 @@
 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", "headerFilterMenu", "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';
@@ -16,12 +16,12 @@ function GridFilterInputValue(props) {
       focusElementRef,
       tabIndex,
       disabled,
+      slotProps,
       clearButton,
-      headerFilterMenu,
-      InputProps,
-      variant = 'outlined'
+      headerFilterMenu
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
+  const textFieldProps = slotProps?.root;
   const filterTimeout = useTimeout();
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
@@ -53,27 +53,21 @@ function GridFilterInputValue(props) {
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
       value: filterValueState ?? '',
       onChange: onFilterChange,
-      variant: variant,
       type: type || 'text',
       disabled: disabled,
-      InputProps: _extends({
-        endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+      slotProps: _extends({}, textFieldProps?.slotProps, {
+        input: _extends({
+          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
             fontSize: "small",
             color: "action"
-          })
-        }) : null
-      }, InputProps, {
-        inputProps: _extends({
+          }) : null
+        }, textFieldProps?.slotProps?.input),
+        htmlInput: _extends({
           tabIndex
-        }, InputProps?.inputProps)
+        }, textFieldProps?.slotProps?.htmlInput)
       }),
-      InputLabelProps: {
-        shrink: true
-      },
       inputRef: focusElementRef
-    }, rootProps.slotProps?.baseTextField, others)), headerFilterMenu, clearButton]
+    }, rootProps.slotProps?.baseTextField, others, textFieldProps)), headerFilterMenu, clearButton]
   });
 }
 function sanitizeFilterItemValue(value) {
@@ -91,9 +85,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`)
@@ -104,6 +111,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.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { GridFilterItem } from "../../../models/gridFilterItem.js";
+import { GridFilterFormProps } from "./GridFilterForm.js";
+import { 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;
+declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps> | React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
+ */
+export { GridFilterPanel, getGridFilter };

package/modern/components/panel/filterPanel/filterPanelUtils.d.ts

@@ -0,0 +1,5 @@
+import type { GridColDef, GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
+import type { GridValueOptionsParams } from '../../../models/params/gridValueOptionsParams';
+export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
+export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("../../..").ValueOptions[] | undefined;
+export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

package/modern/components/panel/filterPanel/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./GridFilterForm.js";
+export { GridFilterInputValue, type GridTypeFilterInputValueProps } from "./GridFilterInputValue.js";
+export * from "./GridFilterInputDate.js";
+export * from "./GridFilterInputSingleSelect.js";
+export { GridFilterInputBoolean } from "./GridFilterInputBoolean.js";
+export type { GridFilterInputBooleanProps } from './GridFilterInputBoolean';
+export { GridFilterPanel } from "./GridFilterPanel.js";
+export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
+export * from "./GridFilterInputMultipleValue.js";
+export * from "./GridFilterInputMultipleSingleSelect.js";

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

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

package/modern/components/panel/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./GridColumnsPanel.js";
+export * from "./GridPanel.js";
+export * from "./GridPanelContent.js";
+export * from "./GridPanelFooter.js";
+export * from "./GridPanelHeader.js";
+export * from "./GridPanelWrapper.js";
+export * from "./filterPanel/index.js";

package/modern/components/quickFilter/QuickFilter.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import type { GridFilterModel } from '../../models';
+export type QuickFilterProps = {
+  children: React.ReactNode;
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @param {string} input The value entered by the user
+   * @returns {any[]} The array of value on which quick filter is applied
+   * @default (searchText: string) => searchText.split(' ').filter((word) => word !== '')
+   */
+  parser?: (input: string) => any[];
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @param {any[]} values The new values passed to the quick filter model
+   * @returns {string} The string to display in the text field
+   * @default (values: string[]) => values.join(' ')
+   */
+  formatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs?: number;
+};
+/**
+ * The top level Quick Filter component that provides context to child components.
+ * It does not render any DOM elements.
+ *
+ * Demos:
+ *
+ * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+ *
+ * API:
+ *
+ * - [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
+ */
+declare function QuickFilter(props: QuickFilterProps): React.JSX.Element;
+declare namespace QuickFilter {
+  var propTypes: any;
+}
+export { QuickFilter };

package/modern/components/quickFilter/QuickFilter.js

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_debounce as debounce } from '@mui/utils';
+import { QuickFilterContext } from "./QuickFilterContext.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { isDeepEqual } from "../../utils/utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_PARSER = searchText => searchText.split(' ').filter(word => word !== '');
+const DEFAULT_FORMATTER = values => values.join(' ');
+
+/**
+ * The top level Quick Filter component that provides context to child components.
+ * It does not render any DOM elements.
+ *
+ * Demos:
+ *
+ * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+ *
+ * API:
+ *
+ * - [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
+ */
+function QuickFilter(props) {
+  const rootProps = useGridRootProps();
+  const {
+    parser = DEFAULT_PARSER,
+    formatter = DEFAULT_FORMATTER,
+    debounceMs = rootProps.filterDebounceMs,
+    children
+  } = props;
+  const apiRef = useGridApiContext();
+  const controlRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
+  const [value, setValue] = React.useState(formatter(quickFilterValues ?? []));
+  const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
+  React.useEffect(() => {
+    if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
+      // The model of quick filter value has been updated
+      prevQuickFilterValuesRef.current = quickFilterValues;
+
+      // Update the input value if needed to match the new model
+      setValue(prevSearchValue => isDeepEqual(parser(prevSearchValue), quickFilterValues) ? prevSearchValue : formatter(quickFilterValues ?? []));
+    }
+  }, [quickFilterValues, formatter, parser]);
+  const setQuickFilterValueDebounced = React.useMemo(() => debounce(newValue => {
+    const newQuickFilterValues = parser(newValue);
+    prevQuickFilterValuesRef.current = newQuickFilterValues;
+    apiRef.current.setQuickFilterValues(newQuickFilterValues);
+  }, debounceMs), [apiRef, debounceMs, parser]);
+  React.useEffect(() => setQuickFilterValueDebounced.clear, [setQuickFilterValueDebounced]);
+  const handleValueChange = React.useCallback(event => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    setQuickFilterValueDebounced(newValue);
+  }, [setQuickFilterValueDebounced]);
+  const handleClear = React.useCallback(() => {
+    setValue('');
+    apiRef.current.setQuickFilterValues([]);
+    controlRef.current?.focus();
+  }, [apiRef, controlRef]);
+  const contextValue = React.useMemo(() => ({
+    controlRef,
+    triggerRef,
+    state: {
+      value
+    },
+    clearValue: handleClear,
+    onValueChange: handleValueChange
+  }), [value, handleValueChange, handleClear]);
+  return /*#__PURE__*/_jsx(QuickFilterContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? QuickFilter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs: PropTypes.number,
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @param {any[]} values The new values passed to the quick filter model
+   * @returns {string} The string to display in the text field
+   * @default (values: string[]) => values.join(' ')
+   */
+  formatter: PropTypes.func,
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @param {string} input The value entered by the user
+   * @returns {any[]} The array of value on which quick filter is applied
+   * @default (searchText: string) => searchText.split(' ').filter((word) => word !== '')
+   */
+  parser: PropTypes.func
+} : void 0;
+export { QuickFilter };

package/modern/components/quickFilter/QuickFilterClear.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import type { GridSlotProps } from '../../models';
+import { QuickFilterState } from "./QuickFilterContext.js";
+export type QuickFilterClearProps = Omit<GridSlotProps['baseIconButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseIconButton'], QuickFilterState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: QuickFilterState) => string);
+};
+/**
+ * A button that resets the filter value.
+ * It renders the `baseIconButton` slot.
+ *
+ * Demos:
+ *
+ * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+ *
+ * API:
+ *
+ * - [QuickFilterClear API](https://mui.com/x/api/data-grid/quick-filter-clear/)
+ */
+declare const QuickFilterClear: React.ForwardRefExoticComponent<QuickFilterClearProps> | React.ForwardRefExoticComponent<Omit<QuickFilterClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { QuickFilterClear };