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

package/components/panel/GridPanel.js

@@ -14,8 +14,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
+var _context = require("../../utils/css/context");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _assert = require("../../utils/assert");
@@ -24,25 +25,23 @@ const _excluded = ["children", "className", "classes"];
 const gridPanelClasses = exports.gridPanelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
-  slot: 'Panel'
-})(({
-  theme
-}) => ({
-  zIndex: theme.zIndex.modal
-}));
-const GridPaperRoot = (0, _styles.styled)(_Paper.default, {
+  slot: 'panel'
+})({
+  zIndex: _cssVariables.vars.zIndex.panel
+});
+const GridPanelContent = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'Paper'
-})(({
-  theme
-}) => ({
-  backgroundColor: (theme.vars || theme).palette.background.paper,
+  slot: 'panelContent'
+})({
+  backgroundColor: _cssVariables.vars.colors.background.overlay,
+  borderRadius: _cssVariables.vars.radius.base,
+  boxShadow: _cssVariables.vars.shadows.overlay,
   minWidth: 300,
   maxHeight: 450,
   display: 'flex',
-  maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
+  maxWidth: `calc(100vw - ${_cssVariables.vars.spacing(0.5)})`,
   overflow: 'auto'
-}));
+});
 const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
       children,
@@ -53,6 +52,7 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = gridPanelClasses;
   const [isPlaced, setIsPlaced] = React.useState(false);
+  const variablesClass = (0, _context.useCSSVariablesClass)();
   const onDidShow = (0, _useEventCallback.default)(() => setIsPlaced(true));
   const onDidHide = (0, _useEventCallback.default)(() => setIsPlaced(false));
   const handleClickAway = (0, _useEventCallback.default)(() => {
@@ -77,7 +77,7 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
     as: rootProps.slots.basePopper,
     ownerState: rootProps,
     placement: "bottom-start",
-    className: (0, _clsx.default)(classes.panel, className),
+    className: (0, _clsx.default)(classes.panel, className, variablesClass),
     target: target,
     flip: true,
     onDidShow: onDidShow,
@@ -85,14 +85,12 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
     onClickAway: handleClickAway,
     clickAwayMouseEvent: "onPointerUp",
     clickAwayTouchEvent: false,
-    focusTrap: true,
-    focusTrapEnabled: true
+    focusTrap: true
   }, other, rootProps.slotProps?.basePopper, {
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaperRoot, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContent, {
       className: classes.paper,
       ownerState: rootProps,
-      elevation: 8,
       onKeyDown: handleKeyDown,
       children: isPlaced && children
     })

package/components/panel/GridPanelContent.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,19 +29,16 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelContentRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelContent',
-  overridesResolver: (props, styles) => styles.panelContent
-})(({
-  theme
-}) => ({
+  slot: 'PanelContent'
+})({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
   maxHeight: 400,
-  padding: theme.spacing(2.5, 1.5, 2, 1),
-  gap: theme.spacing(2.5)
-}));
+  padding: _cssVariables.vars.spacing(2.5, 1.5, 2, 1),
+  gap: _cssVariables.vars.spacing(2.5)
+});
 function GridPanelContent(props) {
   const {
       className

package/components/panel/GridPanelFooter.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,14 +31,12 @@ const GridPanelFooterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelFooter',
   overridesResolver: (props, styles) => styles.panelFooter
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1),
+})({
+  padding: _cssVariables.vars.spacing(1),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${theme.palette.divider}`
-}));
+  borderTop: `1px solid ${_cssVariables.vars.colors.border.base}`
+});
 function GridPanelFooter(props) {
   const {
       className

package/components/panel/GridPanelHeader.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,11 +31,9 @@ const GridPanelHeaderRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelHeader',
   overridesResolver: (props, styles) => styles.panelHeader
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1)
-}));
+})({
+  padding: _cssVariables.vars.spacing(1)
+});
 function GridPanelHeader(props) {
   const {
       className

package/components/panel/filterPanel/GridFilterForm.js

@@ -11,10 +11,11 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../../constants/cssVariables");
 var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
 var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
 var _useGridSelector = require("../../../hooks/utils/useGridSelector");
@@ -44,19 +45,19 @@ const GridFilterFormRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterForm',
   overridesResolver: (props, styles) => styles.filterForm
-})(({
-  theme
-}) => ({
+})({
   display: 'flex',
-  gap: theme.spacing(1.5)
-}));
+  gap: _cssVariables.vars.spacing(1.5)
+});
 const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
 })({
   flexShrink: 0,
-  justifyContent: 'center'
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
 });
 const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -134,7 +135,6 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
   const filterSelectorRef = React.useRef(null);
   const multiFilterOperator = filterModel.logicOperator ?? _gridFilterItem.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 || {};
@@ -263,10 +263,8 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
     ownerState: rootProps
   }, other, {
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, deleteIconProps, {
-      className: (0, _clsx.default)(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({}, deleteIconProps, {
+      className: (0, _clsx.default)(classes.deleteIcon, deleteIconProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
@@ -329,9 +327,8 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
         value: col.field
       }), getColumnLabel(col)))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormOperatorInput, (0, _extends2.default)({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseSelect
+      as: rootProps.slots.baseSelect,
+      size: "small"
     }, operatorInputProps, {
       className: (0, _clsx.default)(classes.operatorInput, operatorInputProps.className),
       ownerState: rootProps,
@@ -349,11 +346,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
         key: operator.value,
         value: operator.value
       }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseFormControl
-    }, valueInputPropsOther, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({}, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({

package/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/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -10,15 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"));
 var _utils = require("@mui/utils");
-var _filterPanelUtils = require("./filterPanelUtils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"],
-  _excluded2 = ["key"],
-  _excluded3 = ["inputProps", "InputProps", "InputLabelProps"];
-const filter = (0, _Autocomplete.createFilterOptions)();
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 function GridFilterInputMultipleSingleSelect(props) {
   const {
       item,
@@ -64,47 +60,22 @@ function GridFilterInputMultipleSingleSelect(props) {
       value: value.map(getOptionValue)
     }));
   }, [applyValue, item, getOptionValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseAutocomplete, (0, _extends2.default)({
     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 = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded2);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
-        variant: "outlined",
-        size: "small",
-        label: getOptionLabel(option)
-      }, tagProps), key);
-    }),
-    renderInput: params => {
-      const {
-          inputProps,
-          InputProps,
-          InputLabelProps
-        } = params,
-        rest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded3);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, 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/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/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,21 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["key"],
-  _excluded2 = ["inputProps", "InputProps", "InputLabelProps"];
 function GridFilterInputMultipleValue(props) {
   const {
     item,
@@ -25,8 +21,9 @@ function GridFilterInputMultipleValue(props) {
     focusElementRef,
     slotProps
   } = props;
-  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = (0, _utils.unstable_useId)();
+  const [options, setOptions] = React.useState([]);
+  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   React.useEffect(() => {
     const itemValue = item.value ?? [];
@@ -38,51 +35,29 @@ function GridFilterInputMultipleValue(props) {
       value: [...value.map(filterItemValue => type === 'number' ? Number(filterItemValue) : filterItemValue)]
     }));
   }, [applyValue, item, type]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
+  const handleInputChange = React.useCallback((event, value) => {
+    if (value === '') {
+      setOptions([]);
+    } else {
+      setOptions([value]);
+    }
+  }, [setOptions]);
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseAutocomplete, (0, _extends2.default)({
     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 = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
-        variant: "outlined",
-        size: "small",
-        label: option
-      }, tagProps), key);
-    }),
-    renderInput: params => {
-      const {
-          inputProps,
-          InputProps,
-          InputLabelProps
-        } = params,
-        rest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded2);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, 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/components/panel/filterPanel/GridFilterInputValue.js

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

package/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/components/quickFilter/QuickFilter.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuickFilter = QuickFilter;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _QuickFilterContext = require("./QuickFilterContext");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _filter = require("../../hooks/features/filter");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _utils2 = require("../../utils/utils");
+var _jsxRuntime = require("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 = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    parser = DEFAULT_PARSER,
+    formatter = DEFAULT_FORMATTER,
+    debounceMs = rootProps.filterDebounceMs,
+    children
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const controlRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
+  const [value, setValue] = React.useState(formatter(quickFilterValues ?? []));
+  const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
+  React.useEffect(() => {
+    if (!(0, _utils2.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 => (0, _utils2.isDeepEqual)(parser(prevSearchValue), quickFilterValues) ? prevSearchValue : formatter(quickFilterValues ?? []));
+    }
+  }, [quickFilterValues, formatter, parser]);
+  const setQuickFilterValueDebounced = React.useMemo(() => (0, _utils.unstable_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__*/(0, _jsxRuntime.jsx)(_QuickFilterContext.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.default.node,
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs: _propTypes.default.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.default.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.default.func
+} : void 0;

package/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 };