@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.14

package/modern/components/panel/GridPanelFooter.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,14 +23,12 @@ const GridPanelFooterRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelFooter',
   overridesResolver: (props, styles) => styles.panelFooter
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1),
+})({
+  padding: vars.spacing(1),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${theme.palette.divider}`
-}));
+  borderTop: `1px solid ${vars.colors.border.base}`
+});
 function GridPanelFooter(props) {
   const {
       className

package/modern/components/panel/GridPanelHeader.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,11 +23,9 @@ const GridPanelHeaderRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelHeader',
   overridesResolver: (props, styles) => styles.panelHeader
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1)
-}));
+})({
+  padding: vars.spacing(1)
+});
 function GridPanelHeader(props) {
   const {
       className

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

@@ -4,10 +4,11 @@ const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterCha
   _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../../../constants/cssVariables.js";
 import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.js";
 import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.js";
 import { useGridSelector } from "../../../hooks/utils/useGridSelector.js";
@@ -36,19 +37,19 @@ const GridFilterFormRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterForm',
   overridesResolver: (props, styles) => styles.filterForm
-})(({
-  theme
-}) => ({
+})({
   display: 'flex',
-  gap: theme.spacing(1.5)
-}));
+  gap: vars.spacing(1.5)
+});
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
 })({
   flexShrink: 0,
-  justifyContent: 'center'
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
 });
 const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
@@ -126,7 +127,6 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
   const filterSelectorRef = React.useRef(null);
   const multiFilterOperator = filterModel.logicOperator ?? GridLogicOperator.And;
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
-  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
@@ -255,10 +255,8 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
     ownerState: rootProps
   }, other, {
     ref: ref,
-    children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, deleteIconProps, {
-      className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+    children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({}, deleteIconProps, {
+      className: clsx(classes.deleteIcon, deleteIconProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
@@ -321,9 +319,8 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         value: col.field
       }), getColumnLabel(col)))
     })), /*#__PURE__*/_jsx(FilterFormOperatorInput, _extends({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseSelect
+      as: rootProps.slots.baseSelect,
+      size: "small"
     }, operatorInputProps, {
       className: clsx(classes.operatorInput, operatorInputProps.className),
       ownerState: rootProps,
@@ -341,11 +338,7 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         key: operator.value,
         value: operator.value
       }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
-    })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseFormControl
-    }, valueInputPropsOther, {
+    })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({}, valueInputPropsOther, {
       className: clsx(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 import type { ValueOptions } from '../../../models/colDef/gridColDef';
-export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options' | 'renderInput'>> & {
+export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
 declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;

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

@@ -1,16 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"],
-  _excluded2 = ["key"],
-  _excluded3 = ["inputProps", "InputProps", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
-import { getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const filter = createFilterOptions();
 function GridFilterInputMultipleSingleSelect(props) {
   const {
       item,
@@ -56,47 +52,22 @@ function GridFilterInputMultipleSingleSelect(props) {
       value: value.map(getOptionValue)
     }));
   }, [applyValue, item, getOptionValue]);
-  return /*#__PURE__*/_jsx(Autocomplete, _extends({
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/_jsx(BaseAutocomplete, _extends({
     multiple: true,
     options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
-    filterOptions: filter,
     id: id,
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    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: getOptionLabel(option)
-      }, tagProps), key);
-    }),
-    renderInput: params => {
-      const {
-          inputProps,
-          InputProps,
-          InputLabelProps
-        } = params,
-        rest = _objectWithoutPropertiesLoose(params, _excluded3);
-      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, rest, {
-        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        inputRef: focusElementRef,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    slotProps: {
+      textField: {
         type: type || 'text',
-        slotProps: {
-          input: InputProps,
-          inputLabel: InputLabelProps,
-          htmlInput: inputProps
-        }
-      }, rootProps.slotProps?.baseTextField));
+        inputRef: focusElementRef
+      }
     }
   }, other, slotProps?.root));
 }

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

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

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

@@ -1,10 +1,6 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["key"],
-  _excluded2 = ["inputProps", "InputProps", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Autocomplete from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,8 +13,9 @@ function GridFilterInputMultipleValue(props) {
     focusElementRef,
     slotProps
   } = props;
-  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = useId();
+  const [options, setOptions] = React.useState([]);
+  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const rootProps = useGridRootProps();
   React.useEffect(() => {
     const itemValue = item.value ?? [];
@@ -30,51 +27,29 @@ 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, _excluded);
-      return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
-        variant: "outlined",
-        size: "small",
-        label: option
-      }, tagProps), key);
-    }),
-    renderInput: params => {
-      const {
-          inputProps,
-          InputProps,
-          InputLabelProps
-        } = params,
-        rest = _objectWithoutPropertiesLoose(params, _excluded2);
-      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, rest, {
-        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        inputRef: focusElementRef,
+    onInputChange: handleInputChange,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    slotProps: {
+      textField: {
         type: type || 'text',
-        slotProps: {
-          input: InputProps,
-          inputLabel: InputLabelProps,
-          htmlInput: inputProps
-        }
-      }, rootProps.slotProps?.baseTextField));
+        inputRef: focusElementRef
+      }
     }
   }, slotProps?.root));
 }

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

@@ -57,12 +57,9 @@ function GridFilterInputValue(props) {
       disabled: disabled,
       slotProps: _extends({}, textFieldProps?.slotProps, {
         input: _extends({
-          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-            position: "end",
-            children: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-              fontSize: "small",
-              color: "action"
-            })
+          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+            fontSize: "small",
+            color: "action"
           }) : null
         }, textFieldProps?.slotProps?.input),
         htmlInput: _extends({

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,103 @@
+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 => {
+    apiRef.current.setQuickFilterValues(parser(newValue));
+  }, 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 };

package/modern/components/quickFilter/QuickFilterClear.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
+import { useQuickFilterContext } from "./QuickFilterContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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/)
+ */
+const QuickFilterClear = forwardRef(function QuickFilterClear(props, ref) {
+  const {
+      render,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const {
+    state,
+    clearValue
+  } = useQuickFilterContext();
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
+    onClick: clearValue,
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? QuickFilterClear.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary']),
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   */
+  edge: PropTypes.oneOf(['end', 'start', false]),
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
+  label: PropTypes.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: PropTypes.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  style: PropTypes.object,
+  /**
+   * 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]),
+  tabIndex: PropTypes.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.any
+} : void 0;
+export { QuickFilterClear };