@mui/x-data-grid 8.28.7 → 8.29.1

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

@@ -0,0 +1,49 @@
+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;
+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/components/panel/filterPanel/GridFilterPanel.mjs

@@ -0,0 +1,250 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { GridLogicOperator } from "../../../models/gridFilterItem.mjs";
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.mjs";
+import { GridPanelContent } from "../GridPanelContent.mjs";
+import { GridPanelFooter } from "../GridPanelFooter.mjs";
+import { GridPanelWrapper } from "../GridPanelWrapper.mjs";
+import { GridFilterForm } from "./GridFilterForm.mjs";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.mjs";
+import { useGridSelector } from "../../../hooks/utils/useGridSelector.mjs";
+import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.mjs";
+import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getGridFilter = col => ({
+  field: col.field,
+  operator: col.filterOperators[0].value,
+  id: Math.round(Math.random() * 1e5)
+});
+const GridFilterPanel = forwardRef(function GridFilterPanel(props, ref) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
+  const lastFilterRef = React.useRef(null);
+  const placeholderFilter = React.useRef(null);
+  const {
+      logicOperators = [GridLogicOperator.And, GridLogicOperator.Or],
+      columnsSort,
+      filterFormProps,
+      getColumnForNewFilter,
+      disableAddFilterButton = false,
+      disableRemoveAllButton = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const applyFilter = apiRef.current.upsertFilterItem;
+  const applyFilterLogicOperator = React.useCallback(operator => {
+    apiRef.current.setFilterLogicOperator(operator);
+  }, [apiRef]);
+  const getDefaultFilter = React.useCallback(() => {
+    let nextColumnWithOperator;
+    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
+      // To allow override the column for default (first) filter
+      const nextFieldName = getColumnForNewFilter({
+        currentFilters: filterModel?.items || [],
+        columns: filterableColumns
+      });
+      if (nextFieldName === null) {
+        return null;
+      }
+      nextColumnWithOperator = filterableColumns.find(({
+        field
+      }) => field === nextFieldName);
+    } else {
+      nextColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
+    }
+    if (!nextColumnWithOperator) {
+      return null;
+    }
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel?.items, filterableColumns, getColumnForNewFilter]);
+  const getNewFilter = React.useCallback(() => {
+    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
+      return getDefaultFilter();
+    }
+    const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean);
+
+    // If no items are there in filterModel, we have to pass defaultFilter
+    const nextColumnFieldName = getColumnForNewFilter({
+      currentFilters: currentFilters,
+      columns: filterableColumns
+    });
+    if (nextColumnFieldName === null) {
+      return null;
+    }
+    const nextColumnWithOperator = filterableColumns.find(({
+      field
+    }) => field === nextColumnFieldName);
+    if (!nextColumnWithOperator) {
+      return null;
+    }
+    return getGridFilter(nextColumnWithOperator);
+  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
+  const items = React.useMemo(() => {
+    if (filterModel.items.length) {
+      return filterModel.items;
+    }
+    if (!placeholderFilter.current) {
+      placeholderFilter.current = getDefaultFilter();
+    }
+    return placeholderFilter.current ? [placeholderFilter.current] : [];
+  }, [filterModel.items, getDefaultFilter]);
+  const hasMultipleFilters = items.length > 1;
+  const {
+    readOnlyFilters,
+    validFilters
+  } = React.useMemo(() => items.reduce((acc, item) => {
+    if (filterableColumnsLookup[item.field]) {
+      acc.validFilters.push(item);
+    } else {
+      acc.readOnlyFilters.push(item);
+    }
+    return acc;
+  }, {
+    readOnlyFilters: [],
+    validFilters: []
+  }), [items, filterableColumnsLookup]);
+  const addNewFilter = React.useCallback(() => {
+    const newFilter = getNewFilter();
+    if (!newFilter) {
+      return;
+    }
+    apiRef.current.upsertFilterItems([...items, newFilter]);
+  }, [apiRef, getNewFilter, items]);
+  const deleteFilter = React.useCallback(item => {
+    const shouldCloseFilterPanel = validFilters.length === 1;
+    apiRef.current.deleteFilterItem(item);
+    if (shouldCloseFilterPanel) {
+      apiRef.current.hideFilterPanel();
+    }
+  }, [apiRef, validFilters.length]);
+  const handleRemoveAll = React.useCallback(() => {
+    if (validFilters.length === 1 && validFilters[0].value === undefined) {
+      apiRef.current.deleteFilterItem(validFilters[0]);
+      return apiRef.current.hideFilterPanel();
+    }
+    return apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items: readOnlyFilters
+    }), 'removeAllFilterItems');
+  }, [apiRef, readOnlyFilters, filterModel, validFilters]);
+  React.useEffect(() => {
+    if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {
+      applyFilterLogicOperator(logicOperators[0]);
+    }
+  }, [logicOperators, applyFilterLogicOperator, filterModel.logicOperator]);
+  React.useEffect(() => {
+    if (validFilters.length > 0) {
+      lastFilterRef.current.focus();
+    }
+  }, [validFilters.length]);
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+    ref: ref,
+    children: [/*#__PURE__*/_jsxs(GridPanelContent, {
+      children: [readOnlyFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
+        item: item,
+        applyFilterChanges: applyFilter,
+        deleteFilter: deleteFilter,
+        hasMultipleFilters: hasMultipleFilters,
+        showMultiFilterOperators: index > 0,
+        disableMultiFilterOperator: index !== 1,
+        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
+        focusElementRef: null,
+        readOnly: true,
+        logicOperators: logicOperators,
+        columnsSort: columnsSort
+      }, filterFormProps), item.id == null ? index : item.id)), validFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
+        item: item,
+        applyFilterChanges: applyFilter,
+        deleteFilter: deleteFilter,
+        hasMultipleFilters: hasMultipleFilters,
+        showMultiFilterOperators: readOnlyFilters.length + index > 0,
+        disableMultiFilterOperator: readOnlyFilters.length + index !== 1,
+        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
+        focusElementRef: index === validFilters.length - 1 ? lastFilterRef : null,
+        logicOperators: logicOperators,
+        columnsSort: columnsSort
+      }, filterFormProps), item.id == null ? index + readOnlyFilters.length : item.id))]
+    }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/_jsxs(GridPanelFooter, {
+      children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: addNewFilter,
+        startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})
+      }, rootProps.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('filterPanelAddFilter')
+      })) : /*#__PURE__*/_jsx("span", {}), !disableRemoveAllButton && validFilters.length > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: handleRemoveAll,
+        startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelRemoveAllIcon, {})
+      }, rootProps.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('filterPanelRemoveAll')
+      })) : null]
+    }) : null]
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridFilterPanel.displayName = "GridFilterPanel";
+process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore - do not document.
+   */
+  children: PropTypes.node,
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
+  columnsSort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
+  disableAddFilterButton: PropTypes.bool,
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
+  disableRemoveAllButton: PropTypes.bool,
+  /**
+   * Props passed to each filter form.
+   */
+  filterFormProps: PropTypes.shape({
+    columnInputProps: PropTypes.any,
+    columnsSort: PropTypes.oneOf(['asc', 'desc']),
+    deleteIconProps: PropTypes.any,
+    filterColumns: PropTypes.func,
+    logicOperatorInputProps: PropTypes.any,
+    operatorInputProps: PropTypes.any,
+    valueInputProps: PropTypes.any
+  }),
+  /**
+   * 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: PropTypes.func,
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+
+/**
+ * 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/components/panel/filterPanel/filterPanelUtils.d.mts

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

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

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

package/components/panel/filterPanel/index.mjs

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

package/components/panel/index.d.mts

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

package/components/panel/index.mjs

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

package/components/quickFilter/QuickFilter.d.mts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type QuickFilterState } from "./QuickFilterContext.mjs";
+import type { GridFilterModel } from "../../models/index.mjs";
+export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
+  /**
+   * 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 default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * The expanded state of the quick filter control.
+   */
+  expanded?: boolean;
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<'div'>, QuickFilterState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: QuickFilterState) => string);
+  /**
+   * Callback function that is called when the quick filter input is expanded or collapsed.
+   * @param {boolean} expanded The new expanded state of the quick filter control
+   */
+  onExpandedChange?: (expanded: boolean) => void;
+};
+/**
+ * The top level Quick Filter component that provides context to child components.
+ * It renders a `<div />` element.
+ *
+ * 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): import("react/jsx-runtime").JSX.Element;
+declare namespace QuickFilter {
+  var propTypes: any;
+}
+export { QuickFilter };

package/components/quickFilter/QuickFilter.mjs

@@ -0,0 +1,191 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "parser", "formatter", "debounceMs", "defaultExpanded", "expanded", "onExpandedChange"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import debounce from '@mui/utils/debounce';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { QuickFilterContext } from "./QuickFilterContext.mjs";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+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 renders a `<div />` element.
+ *
+ * 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 {
+      render,
+      className,
+      parser = DEFAULT_PARSER,
+      formatter = DEFAULT_FORMATTER,
+      debounceMs = rootProps.filterDebounceMs,
+      defaultExpanded,
+      expanded,
+      onExpandedChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  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 [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded ?? value.length > 0);
+  const expandedValue = expanded ?? internalExpanded;
+  const state = React.useMemo(() => ({
+    value,
+    expanded: expandedValue
+  }), [value, expandedValue]);
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const ref = React.useRef(null);
+  const controlId = useId();
+  const handleExpandedChange = React.useCallback(newExpanded => {
+    if (onExpandedChange) {
+      onExpandedChange(newExpanded);
+    }
+    if (expanded === undefined) {
+      setInternalExpanded(newExpanded);
+    }
+  }, [onExpandedChange, expanded]);
+  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 isFirstRender = React.useRef(true);
+  const previousExpandedValue = React.useRef(expandedValue);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    // Ensure the expanded state has actually changed before focusing
+    if (previousExpandedValue.current !== expandedValue) {
+      if (expandedValue) {
+        // Ensures the focus does not interupt CSS transitions and animations on the control
+        requestAnimationFrame(() => {
+          controlRef.current?.focus({
+            preventScroll: true
+          });
+        });
+      } else {
+        triggerRef.current?.focus({
+          preventScroll: true
+        });
+      }
+      previousExpandedValue.current = expandedValue;
+    }
+  }, [expandedValue]);
+  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 handleClearValue = React.useCallback(() => {
+    setValue('');
+    apiRef.current.setQuickFilterValues([]);
+    controlRef.current?.focus();
+  }, [apiRef, controlRef]);
+  const contextValue = React.useMemo(() => ({
+    controlRef,
+    triggerRef,
+    state,
+    controlId,
+    clearValue: handleClearValue,
+    onValueChange: handleValueChange,
+    onExpandedChange: handleExpandedChange
+  }), [controlId, state, handleValueChange, handleClearValue, handleExpandedChange]);
+  useEnhancedEffect(() => {
+    if (ref.current && triggerRef.current) {
+      ref.current.style.setProperty('--trigger-width', `${triggerRef.current?.offsetWidth}px`);
+    }
+  }, []);
+  const element = useComponentRenderer('div', render, _extends({
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/_jsx(QuickFilterContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+}
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs: PropTypes.number,
+  /**
+   * The default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded: PropTypes.bool,
+  /**
+   * The expanded state of the quick filter control.
+   */
+  expanded: PropTypes.bool,
+  /**
+   * 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,
+  /**
+   * Callback function that is called when the quick filter input is expanded or collapsed.
+   * @param {boolean} expanded The new expanded state of the quick filter control
+   */
+  onExpandedChange: 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,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;
+export { QuickFilter };

package/components/quickFilter/QuickFilterClear.d.mts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { GridSlotProps } from "../../models/index.mjs";
+import { type QuickFilterState } from "./QuickFilterContext.mjs";
+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 };