@mui/x-data-grid 8.0.0-beta.1 → 8.0.0-beta.2

package/components/quickFilter/QuickFilterControl.js

@@ -16,7 +16,7 @@ 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"];
+const _excluded = ["render", "className", "slotProps", "onKeyDown", "onChange"];
 /**
  * A component that takes user input and filters row data.
  * It renders the `baseTextField` slot.
@@ -32,35 +32,61 @@ const _excluded = ["render", "className"];
 const QuickFilterControl = exports.QuickFilterControl = (0, _forwardRef.forwardRef)(function QuickFilterControl(props, ref) {
   const {
       render,
-      className
+      className,
+      slotProps,
+      onKeyDown,
+      onChange
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     state,
+    controlId,
     controlRef,
     onValueChange,
+    onExpandedChange,
     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();
+      if (state.value === '') {
+        onExpandedChange(false);
+      } else {
+        clearValue();
+      }
     }
-    props.onKeyDown?.(event);
+    onKeyDown?.(event);
+  };
+  const handleBlur = event => {
+    if (state.value === '') {
+      onExpandedChange(false);
+    }
+    slotProps?.htmlInput?.onBlur?.(event);
+  };
+  const handleChange = event => {
+    if (!state.expanded) {
+      onExpandedChange(true);
+    }
+    onValueChange(event);
+    onChange?.(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),
+        role: 'searchbox',
+        id: controlId,
+        tabIndex: state.expanded ? undefined : -1
+      }, slotProps?.htmlInput, {
+        onBlur: handleBlur
+      })
+    }, slotProps),
     value: state.value,
-    className: resolvedClassName,
-    onChange: onValueChange,
-    onKeyDown: handleKeyDown
+    className: resolvedClassName
   }, other, {
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
     ref: handleRef
   }), state);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {

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

package/components/quickFilter/QuickFilterTrigger.js

@@ -0,0 +1,211 @@
+"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.QuickFilterTrigger = 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 _utils = require("@mui/utils");
+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", "onClick"];
+/**
+ * A button that expands/collapses the quick filter.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+ *
+ * API:
+ *
+ * - [QuickFilterTrigger API](https://mui.com/x/api/data-grid/quick-filter-trigger/)
+ */
+const QuickFilterTrigger = exports.QuickFilterTrigger = (0, _forwardRef.forwardRef)(function QuickFilterTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    state,
+    controlId,
+    onExpandedChange,
+    triggerRef
+  } = (0, _QuickFilterContext.useQuickFilterContext)();
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleRef = (0, _utils.unstable_useForkRef)(triggerRef, ref);
+  const handleClick = event => {
+    onExpandedChange(!state.expanded);
+    onClick?.(event);
+  };
+  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+    className: resolvedClassName,
+    'aria-controls': controlId,
+    'aria-expanded': state.expanded
+  }, other, {
+    onClick: handleClick,
+    ref: handleRef
+  }), state);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? QuickFilterTrigger.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).
+   * @default 'primary'
+   */
+  color: _propTypes.default.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+  component: _propTypes.default.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: _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,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: _propTypes.default.node,
+  /**
+   * 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,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: _propTypes.default.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: _propTypes.default.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: _propTypes.default.elementType,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: _propTypes.default.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: _propTypes.default.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: _propTypes.default.oneOf(['center', 'end', 'start']),
+  /**
+   * 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']),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: _propTypes.default.node,
+  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,
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: _propTypes.default.oneOf(['contained', 'outlined', 'text'])
+} : void 0;

package/components/quickFilter/index.d.ts

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

package/components/quickFilter/index.js

@@ -35,4 +35,15 @@ Object.keys(_QuickFilterClear).forEach(function (key) {
       return _QuickFilterClear[key];
     }
   });
+});
+var _QuickFilterTrigger = require("./QuickFilterTrigger");
+Object.keys(_QuickFilterTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QuickFilterTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _QuickFilterTrigger[key];
+    }
+  });
 });

package/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 interface GridToolbarColumnsButtonProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
 declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps> | React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 interface GridToolbarDensitySelectorProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
 declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps> | React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;

package/components/toolbar/GridToolbarExport.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { GridCsvExportOptions, GridPrintExportOptions } from "../../models/gridExport.js";
 export interface GridExportDisplayOptions {
   /**
@@ -23,8 +22,8 @@ export interface GridToolbarExportProps {
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
   [x: `data-${string}`]: string;
 }

package/components/toolbar/GridToolbarExportContainer.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 interface GridToolbarExportContainerProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
 declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<GridToolbarExportContainerProps>> | React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -1,16 +1,14 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
-import { BadgeProps } from "../../models/gridBaseSlots.js";
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 export interface GridToolbarFilterButtonProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
-    badge?: Partial<BadgeProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
+    badge?: Partial<GridSlotProps['baseBadge']>;
   };
 }
 declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/toolbar/GridToolbarFilterButton.js

@@ -11,8 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 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 _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+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");
@@ -41,9 +41,6 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   margin: _cssVariables.vars.spacing(1, 1, 0.5),
   padding: _cssVariables.vars.spacing(0, 1)
 });
-
-// FIXME(v8:romgrk): override slotProps
-
 const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRef.forwardRef)(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}

package/components/toolbar/GridToolbarQuickFilter.js

@@ -17,34 +17,69 @@ var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _quickFilter = require("../quickFilter");
+var _toolbarV = require("../toolbarV8");
+var _cssVariables = require("../../constants/cssVariables");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"],
-  _excluded2 = ["ref", "slotProps"]; // import { NotRendered } from '../../utils/assert';
+  _excluded2 = ["ref", "slotProps"];
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['toolbarQuickFilter']
+    root: ['toolbarQuickFilter'],
+    trigger: ['toolbarQuickFilterTrigger'],
+    control: ['toolbarQuickFilterControl']
   };
   return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
 };
+const GridQuickFilterRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilter'
+})({
+  display: 'grid',
+  alignItems: 'center',
+  marginLeft: 'auto'
+});
+const GridQuickFilterTrigger = (0, _system.styled)(_toolbarV.ToolbarButton, {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilterTrigger'
+})(({
+  ownerState
+}) => ({
+  gridArea: '1 / 1',
+  width: 'min-content',
+  height: 'min-content',
+  zIndex: 1,
+  opacity: ownerState.expanded ? 0 : 1,
+  pointerEvents: ownerState.expanded ? 'none' : 'auto',
+  transition: _cssVariables.vars.transition(['opacity'])
+}));
 
 // TODO: Use NotRendered from /utils/assert
 // Currently causes react-docgen to fail
-const GridToolbarQuickFilterRoot = (0, _system.styled)(_props => {
+const GridQuickFilterTextField = (0, _system.styled)(_props => {
   throw new Error('Failed assertion: should not be rendered');
 }, {
   name: 'MuiDataGrid',
-  slot: 'ToolbarQuickFilter'
-})({
-  width: 260,
-  marginLeft: 'auto'
-});
+  slot: 'ToolbarQuickFilterControl'
+})(({
+  ownerState
+}) => ({
+  gridArea: '1 / 1',
+  overflowX: 'clip',
+  width: ownerState.expanded ? 260 : 'var(--trigger-width)',
+  opacity: ownerState.expanded ? 1 : 0,
+  transition: _cssVariables.vars.transition(['width', 'opacity'])
+}));
 function GridToolbarQuickFilter(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const classes = useUtilityClasses(rootProps);
+  const ownerState = {
+    classes: rootProps.classes,
+    expanded: false
+  };
+  const classes = useUtilityClasses(ownerState);
   const {
       quickFilterParser,
       quickFilterFormatter,
@@ -57,40 +92,65 @@ function GridToolbarQuickFilter(props) {
     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, {
+    render: (quickFilterProps, state) => {
+      const currentOwnerState = (0, _extends2.default)({}, ownerState, {
+        expanded: state.expanded
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridQuickFilterRoot, (0, _extends2.default)({}, quickFilterProps, {
+        className: (0, _clsx.default)(classes.root, className),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterTrigger, {
+          render: triggerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+            title: apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+            enterDelay: 0 // Prevents tooltip lagging behind transitioning trigger element
+            ,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridQuickFilterTrigger, (0, _extends2.default)({
+              className: classes.trigger
+            }, triggerProps, {
+              ownerState: currentOwnerState,
+              color: "default",
+              "aria-disabled": state.expanded,
+              children: /*#__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, {
+              })
+            }))
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterControl, {
+          render: _ref => {
+            let {
+                ref,
+                slotProps: controlSlotProps
+              } = _ref,
+              controlProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridQuickFilterTextField, (0, _extends2.default)({
+              as: rootProps.slots.baseTextField,
+              className: classes.control,
+              ownerState: currentOwnerState,
+              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"
-                  })
-                })
-              }) : null
-            }, controlSlotProps?.input)
-          }, controlSlotProps)
-        }, rootProps.slotProps?.baseTextField, controlProps, slotProps?.root, other));
-      }
-    })
+                  }),
+                  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));
+          }
+        })]
+      }));
+    }
   });
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {