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

package/components/quickFilter/QuickFilterClear.js

@@ -0,0 +1,161 @@
+"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.QuickFilterClear = void 0;
+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 _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
+var _QuickFilterContext = require("./QuickFilterContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className"];
+/**
+ * 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 = exports.QuickFilterClear = (0, _forwardRef.forwardRef)(function QuickFilterClear(props, ref) {
+  const {
+      render,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    state,
+    clearValue
+  } = (0, _QuickFilterContext.useQuickFilterContext)();
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+    onClick: clearValue,
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/(0, _jsxRuntime.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.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focusVisible: _propTypes.default.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: _propTypes.default.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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.default.oneOf(['default', 'inherit', 'primary']),
+  component: _propTypes.default.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: _propTypes.default.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.default.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: _propTypes.default.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.default.oneOf(['end', 'start', false]),
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: _propTypes.default.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.default.string,
+  label: _propTypes.default.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: _propTypes.default.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: _propTypes.default.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  style: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  tabIndex: _propTypes.default.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: _propTypes.default.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: _propTypes.default.any
+} : void 0;

package/components/quickFilter/QuickFilterContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface QuickFilterState {
+  value: string;
+}
+export interface QuickFilterContextValue {
+  state: QuickFilterState;
+  controlRef: React.RefObject<HTMLInputElement | null>;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  onValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  clearValue: () => void;
+}
+export declare const QuickFilterContext: React.Context<QuickFilterContextValue | undefined>;
+export declare function useQuickFilterContext(): QuickFilterContextValue;

package/components/quickFilter/QuickFilterContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuickFilterContext = void 0;
+exports.useQuickFilterContext = useQuickFilterContext;
+var React = _interopRequireWildcard(require("react"));
+const QuickFilterContext = exports.QuickFilterContext = /*#__PURE__*/React.createContext(undefined);
+function useQuickFilterContext() {
+  const context = React.useContext(QuickFilterContext);
+  if (context === undefined) {
+    throw new Error('MUI X: Missing context. Quick Filter subcomponents must be placed within a <QuickFilter /> component.');
+  }
+  return context;
+}

package/components/quickFilter/QuickFilterControl.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 QuickFilterControlProps = Omit<GridSlotProps['baseTextField'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseTextField'], QuickFilterState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: QuickFilterState) => string);
+};
+/**
+ * A component that takes user input and filters row data.
+ * It renders the `baseTextField` slot.
+ *
+ * Demos:
+ *
+ * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+ *
+ * API:
+ *
+ * - [QuickFilterControl API](https://mui.com/x/api/data-grid/quick-filter-control/)
+ */
+declare const QuickFilterControl: React.ForwardRefExoticComponent<QuickFilterControlProps> | React.ForwardRefExoticComponent<Omit<QuickFilterControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { QuickFilterControl };

package/components/quickFilter/QuickFilterControl.js

@@ -0,0 +1,104 @@
+"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.QuickFilterControl = void 0;
+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 _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
+var _QuickFilterContext = require("./QuickFilterContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className"];
+/**
+ * A component that takes user input and filters row data.
+ * It renders the `baseTextField` slot.
+ *
+ * Demos:
+ *
+ * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+ *
+ * API:
+ *
+ * - [QuickFilterControl API](https://mui.com/x/api/data-grid/quick-filter-control/)
+ */
+const QuickFilterControl = exports.QuickFilterControl = (0, _forwardRef.forwardRef)(function QuickFilterControl(props, ref) {
+  const {
+      render,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    state,
+    controlRef,
+    onValueChange,
+    clearValue
+  } = (0, _QuickFilterContext.useQuickFilterContext)();
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleRef = (0, _utils.unstable_useForkRef)(controlRef, ref);
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      clearValue();
+    }
+    props.onKeyDown?.(event);
+  };
+  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseTextField, render, (0, _extends2.default)({}, rootProps.slotProps?.baseTextField, {
+    slotProps: (0, _extends2.default)({
+      htmlInput: (0, _extends2.default)({
+        role: 'searchbox'
+      }, props.slotProps?.htmlInput)
+    }, props.slotProps),
+    value: state.value,
+    className: resolvedClassName,
+    onChange: onValueChange,
+    onKeyDown: handleKeyDown
+  }, other, {
+    ref: handleRef
+  }), state);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  autoComplete: _propTypes.default.string,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  color: _propTypes.default.oneOf(['error', 'primary']),
+  disabled: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  fullWidth: _propTypes.default.bool,
+  helperText: _propTypes.default.string,
+  id: _propTypes.default.string,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.object
+  })]),
+  label: _propTypes.default.node,
+  onChange: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  placeholder: _propTypes.default.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  role: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['medium', 'small']),
+  slotProps: _propTypes.default.object,
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']), _propTypes.default.object]),
+  value: _propTypes.default.string
+} : void 0;

package/components/quickFilter/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./QuickFilter.js";
+export * from "./QuickFilterControl.js";
+export * from "./QuickFilterClear.js";

package/components/quickFilter/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _QuickFilter = require("./QuickFilter");
+Object.keys(_QuickFilter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QuickFilter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _QuickFilter[key];
+    }
+  });
+});
+var _QuickFilterControl = require("./QuickFilterControl");
+Object.keys(_QuickFilterControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QuickFilterControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _QuickFilterControl[key];
+    }
+  });
+});
+var _QuickFilterClear = require("./QuickFilterClear");
+Object.keys(_QuickFilterClear).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QuickFilterClear[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _QuickFilterClear[key];
+    }
+  });
+});

package/components/toolbar/GridToolbar.d.ts

@@ -5,7 +5,7 @@ import { GridToolbarQuickFilterProps } from "./GridToolbarQuickFilter.js";
 export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbarExportProps {
   /**
    * Show the quick filter component.
-   * @default false
+   * @default true
    */
   showQuickFilter?: boolean;
   /**

package/components/toolbar/GridToolbar.js

@@ -28,7 +28,7 @@ const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function G
       csvOptions,
       printOptions,
       excelOptions,
-      showQuickFilter = false,
+      showQuickFilter = true,
       quickFilterProps = {}
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   }),
   /**
    * Show the quick filter component.
-   * @default false
+   * @default true
    */
   showQuickFilter: _propTypes.default.bool,
   /**

package/components/toolbar/GridToolbarFilterButton.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
@@ -34,12 +35,10 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
   overridesResolver: (_props, styles) => styles.toolbarFilterList
-})(({
-  theme
-}) => ({
-  margin: theme.spacing(1, 1, 0.5),
-  padding: theme.spacing(0, 1)
-}));
+})({
+  margin: _cssVariables.vars.spacing(1, 1, 0.5),
+  padding: _cssVariables.vars.spacing(0, 1)
+});
 
 // FIXME(v8:romgrk): override slotProps
 

package/components/toolbar/GridToolbarQuickFilter.js

@@ -9,20 +9,17 @@ exports.GridToolbarQuickFilter = GridToolbarQuickFilter;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _OutlinedInput = require("@mui/material/OutlinedInput");
+var _system = require("@mui/system");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _filter = require("../../hooks/features/filter");
-var _utils2 = require("../../utils/utils");
+var _quickFilter = require("../quickFilter");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"],
+  _excluded2 = ["ref", "slotProps"]; // import { NotRendered } from '../../utils/assert';
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -32,106 +29,69 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
 };
-const GridToolbarQuickFilterRoot = (0, _styles.styled)('div', {
+
+// TODO: Use NotRendered from /utils/assert
+// Currently causes react-docgen to fail
+const GridToolbarQuickFilterRoot = (0, _system.styled)(_props => {
+  throw new Error('Failed assertion: should not be rendered');
+}, {
   name: 'MuiDataGrid',
-  slot: 'ToolbarQuickFilter',
-  overridesResolver: (props, styles) => styles.toolbarQuickFilter
-})(({
-  theme
-}) => ({
-  [`.${_OutlinedInput.outlinedInputClasses.root}`]: {
-    fontSize: theme.typography.body2.fontSize
-  },
-  [`& input[type="search"]::-webkit-search-decoration,
-  & input[type="search"]::-webkit-search-cancel-button,
-  & input[type="search"]::-webkit-search-results-button,
-  & input[type="search"]::-webkit-search-results-decoration`]: {
-    /* clears the 'X' icon from Chrome */
-    display: 'none'
-  }
-}));
-const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
-const defaultSearchValueFormatter = values => values.join(' ');
+  slot: 'ToolbarQuickFilter'
+})({
+  width: 260,
+  marginLeft: 'auto'
+});
 function GridToolbarQuickFilter(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
   const {
-      quickFilterParser = defaultSearchValueParser,
-      quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = rootProps.filterDebounceMs,
+      quickFilterParser,
+      quickFilterFormatter,
+      debounceMs,
       className,
       slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(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
-      setSearchValue(prevSearchValue => (0, _utils2.isDeepEqual)(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
-    }
-  }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
-  const updateSearchValue = React.useCallback(newSearchValue => {
-    const newQuickFilterValues = quickFilterParser(newSearchValue);
-    prevQuickFilterValuesRef.current = newQuickFilterValues;
-    apiRef.current.setQuickFilterValues(newQuickFilterValues);
-  }, [apiRef, quickFilterParser]);
-  const debouncedUpdateSearchValue = React.useMemo(() => (0, _utils.unstable_debounce)(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
-  React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
-  const handleSearchValueChange = React.useCallback(event => {
-    const newSearchValue = event.target.value;
-    setSearchValue(newSearchValue);
-    debouncedUpdateSearchValue(newSearchValue);
-  }, [debouncedUpdateSearchValue]);
-  const handleSearchReset = React.useCallback(() => {
-    setSearchValue('');
-    updateSearchValue('');
-  }, [updateSearchValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
-    as: rootProps.slots.baseTextField,
-    ownerState: rootProps,
-    size: "small",
-    value: searchValue,
-    onChange: handleSearchValueChange,
-    className: (0, _clsx.default)(classes.root, className),
-    placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
-    "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
-    type: "search"
-  }, other, {
-    slotProps: (0, _extends2.default)({}, slotProps?.root.slotProps, {
-      input: (0, _extends2.default)({
-        startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-          position: "start",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
-            fontSize: "small"
-          })
-        }),
-        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-            "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-            size: "small",
-            edge: "end",
-            style: searchValue ? {
-              visibility: 'visible'
-            } : {
-              visibility: 'hidden'
-            },
-            onClick: handleSearchReset
-          }, rootProps.slotProps?.baseIconButton, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
-              fontSize: "small"
-            })
-          }))
-        })
-      }, slotProps?.root.slotProps?.input)
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilter, {
+    parser: quickFilterParser,
+    formatter: quickFilterFormatter,
+    debounceMs: debounceMs,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterControl, {
+      render: _ref => {
+        let {
+            ref,
+            slotProps: controlSlotProps
+          } = _ref,
+          controlProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
+          as: rootProps.slots.baseTextField,
+          className: (0, _clsx.default)(classes.root, className),
+          inputRef: ref,
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+          placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
+          size: "small",
+          slotProps: (0, _extends2.default)({
+            input: (0, _extends2.default)({
+              startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+                fontSize: "small"
+              }),
+              endAdornment: controlProps.value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterClear, {
+                render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, {
+                  size: "small",
+                  edge: "end",
+                  "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+                    fontSize: "small"
+                  })
+                })
+              }) : null
+            }, controlSlotProps?.input)
+          }, controlSlotProps)
+        }, rootProps.slotProps?.baseTextField, controlProps, slotProps?.root, other));
+      }
     })
-  }, rootProps.slotProps?.baseTextField));
+  });
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/toolbarV8/GridToolbar.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
+interface GridToolbarInternalProps {
+  additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
+}
+export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;
+declare function GridToolbar(props: GridToolbarProps): React.JSX.Element;
+declare namespace GridToolbar {
+  var propTypes: any;
+}
+export { GridToolbar };