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

package/components/quickFilter/QuickFilter.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { QuickFilterState } from "./QuickFilterContext.js";
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import type { GridFilterModel } from '../../models';
-export type QuickFilterProps = {
-  children: React.ReactNode;
+export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user
@@ -21,10 +22,32 @@ export type QuickFilterProps = {
    * @default 150
    */
   debounceMs?: number;
+  /**
+   * The default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * The expanded state of the quick filter control.
+   */
+  expanded?: boolean;
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<'div'>, QuickFilterState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: QuickFilterState) => string);
+  /**
+   * Callback function that is called when the quick filter input is expanded or collapsed.
+   * @param {boolean} expanded The new expanded state of the quick filter control
+   */
+  onExpandedChange?: (expanded: boolean) => void;
 };
 /**
  * The top level Quick Filter component that provides context to child components.
- * It does not render any DOM elements.
+ * It renders a `<div />` element.
  *
  * Demos:
  *

package/components/quickFilter/QuickFilter.js

@@ -6,22 +6,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.QuickFilter = QuickFilter;
+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 _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _QuickFilterContext = require("./QuickFilterContext");
+var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 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 _excluded = ["render", "className", "parser", "formatter", "debounceMs", "defaultExpanded", "expanded", "onExpandedChange"];
 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.
+ * It renders a `<div />` element.
  *
  * Demos:
  *
@@ -34,26 +40,73 @@ const DEFAULT_FORMATTER = values => values.join(' ');
 function QuickFilter(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
-    parser = DEFAULT_PARSER,
-    formatter = DEFAULT_FORMATTER,
-    debounceMs = rootProps.filterDebounceMs,
-    children
-  } = props;
+      render,
+      className,
+      parser = DEFAULT_PARSER,
+      formatter = DEFAULT_FORMATTER,
+      debounceMs = rootProps.filterDebounceMs,
+      defaultExpanded,
+      expanded,
+      onExpandedChange
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   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 [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded ?? value.length > 0);
+  const expandedValue = expanded ?? internalExpanded;
+  const state = React.useMemo(() => ({
+    value,
+    expanded: expandedValue
+  }), [value, expandedValue]);
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const ref = React.useRef(null);
+  const controlId = (0, _useId.default)();
+  const handleExpandedChange = React.useCallback(newExpanded => {
+    if (onExpandedChange) {
+      onExpandedChange(newExpanded);
+    }
+    if (expanded === undefined) {
+      setInternalExpanded(newExpanded);
+    }
+  }, [onExpandedChange, expanded]);
   const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
-    if (!(0, _utils2.isDeepEqual)(prevQuickFilterValuesRef.current, quickFilterValues)) {
+    if (!(0, _isDeepEqual.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 ?? []));
+      setValue(prevSearchValue => (0, _isDeepEqual.isDeepEqual)(parser(prevSearchValue), quickFilterValues) ? prevSearchValue : formatter(quickFilterValues ?? []));
     }
   }, [quickFilterValues, formatter, parser]);
+  const isFirstRender = React.useRef(true);
+  const previousExpandedValue = React.useRef(expandedValue);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    // Ensure the expanded state has actually changed before focusing
+    if (previousExpandedValue.current !== expandedValue) {
+      if (expandedValue) {
+        // Ensures the focus does not interupt CSS transitions and animations on the control
+        requestAnimationFrame(() => {
+          controlRef.current?.focus({
+            preventScroll: true
+          });
+        });
+      } else {
+        triggerRef.current?.focus({
+          preventScroll: true
+        });
+      }
+      previousExpandedValue.current = expandedValue;
+    }
+  }, [expandedValue]);
   const setQuickFilterValueDebounced = React.useMemo(() => (0, _utils.unstable_debounce)(newValue => {
     const newQuickFilterValues = parser(newValue);
     prevQuickFilterValuesRef.current = newQuickFilterValues;
@@ -65,7 +118,7 @@ function QuickFilter(props) {
     setValue(newValue);
     setQuickFilterValueDebounced(newValue);
   }, [setQuickFilterValueDebounced]);
-  const handleClear = React.useCallback(() => {
+  const handleClearValue = React.useCallback(() => {
     setValue('');
     apiRef.current.setQuickFilterValues([]);
     controlRef.current?.focus();
@@ -73,15 +126,25 @@ function QuickFilter(props) {
   const contextValue = React.useMemo(() => ({
     controlRef,
     triggerRef,
-    state: {
-      value
-    },
-    clearValue: handleClear,
-    onValueChange: handleValueChange
-  }), [value, handleValueChange, handleClear]);
+    state,
+    controlId,
+    clearValue: handleClearValue,
+    onValueChange: handleValueChange,
+    onExpandedChange: handleExpandedChange
+  }), [controlId, state, handleValueChange, handleClearValue, handleExpandedChange]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (ref.current && triggerRef.current) {
+      ref.current.style.setProperty('--trigger-width', `${triggerRef.current?.offsetWidth}px`);
+    }
+  }, []);
+  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)('div', render, (0, _extends2.default)({
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuickFilterContext.QuickFilterContext.Provider, {
     value: contextValue,
-    children: children
+    children: element
   });
 }
 process.env.NODE_ENV !== "production" ? QuickFilter.propTypes = {
@@ -89,12 +152,24 @@ process.env.NODE_ENV !== "production" ? QuickFilter.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   /**
    * The debounce time in milliseconds.
    * @default 150
    */
   debounceMs: _propTypes.default.number,
+  /**
+   * The default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded: _propTypes.default.bool,
+  /**
+   * The expanded state of the quick filter control.
+   */
+  expanded: _propTypes.default.bool,
   /**
    * Function responsible for formatting values of quick filter in a string when the model is modified
    * @param {any[]} values The new values passed to the quick filter model
@@ -102,11 +177,20 @@ process.env.NODE_ENV !== "production" ? QuickFilter.propTypes = {
    * @default (values: string[]) => values.join(' ')
    */
   formatter: _propTypes.default.func,
+  /**
+   * Callback function that is called when the quick filter input is expanded or collapsed.
+   * @param {boolean} expanded The new expanded state of the quick filter control
+   */
+  onExpandedChange: _propTypes.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
+  parser: _propTypes.default.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
 } : void 0;

package/components/quickFilter/QuickFilterClear.js

@@ -15,7 +15,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", "onClick"];
 /**
  * A button that resets the filter value.
  * It renders the `baseIconButton` slot.
@@ -31,7 +31,8 @@ const _excluded = ["render", "className"];
 const QuickFilterClear = exports.QuickFilterClear = (0, _forwardRef.forwardRef)(function QuickFilterClear(props, ref) {
   const {
       render,
-      className
+      className,
+      onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -40,10 +41,15 @@ const QuickFilterClear = exports.QuickFilterClear = (0, _forwardRef.forwardRef)(
     clearValue
   } = (0, _QuickFilterContext.useQuickFilterContext)();
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    clearValue();
+    onClick?.(event);
+  };
   const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
-    onClick: clearValue,
-    className: resolvedClassName
+    className: resolvedClassName,
+    tabIndex: -1
   }, other, {
+    onClick: handleClick,
     ref
   }), state);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
@@ -55,120 +61,23 @@ process.env.NODE_ENV !== "production" ? QuickFilterClear.propTypes = {
   // | 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,
+  id: _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,
-  /**
-   * 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,
-  /**
-   * 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.
-   */
+  role: _propTypes.default.string,
   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.
-   */
+  title: _propTypes.default.string,
   touchRippleRef: _propTypes.default.any
 } : void 0;

package/components/quickFilter/QuickFilterContext.d.ts

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

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, {
@@ -87,8 +113,6 @@ process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
     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.

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,86 @@
+"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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  disabled: _propTypes.default.bool,
+  id: _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(['large', 'medium', 'small']),
+  startIcon: _propTypes.default.node,
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  title: _propTypes.default.string,
+  touchRippleRef: _propTypes.default.any
+} : 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/GridToolbar.js

@@ -18,6 +18,7 @@ var _GridToolbarFilterButton = require("./GridToolbarFilterButton");
 var _GridToolbarExport = require("./GridToolbarExport");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
+var _GridToolbar = require("../toolbarV8/GridToolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function GridToolbar(props, ref) {
@@ -38,7 +39,9 @@ const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function G
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({}, other, {
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
+    children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbar.GridToolbarLabel, {
+      children: rootProps.label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
       // @ts-ignore