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

package/CHANGELOG.md

@@ -5,6 +5,177 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.2
+
+_Mar 27, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔍 Update the Data Grid quick filter to be collapsed when not in use
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057) @arminmeh
+- [DataGrid] Refactor: remove more material (#16922) @romgrk
+- [DataGrid] Update Quick Filter component to be expandable (#16862) @KenanYusuf
+- [DataGrid] Fix crash when used with `@mui/styled-engine-sc` (#17154) @KenanYusuf
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-beta.2`, plus:
+
+- [DataGridPro] Data source: Allow expanding groups with unknown children (#17144) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-beta.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.2`
+
+- [fields] Extract the props of each field slot into a standalone hook for easier re-use (#17114) @flaviendelangle
+- [pickers] Fix visual regression in Date Range Calendar's day (#17148) @flaviendelangle
+- [pickers] Remove all code duplication to apply default values to validation props (#17038) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-beta.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.2`
+
+- [charts] Memoize axes and series with default (#17156) @alexfauquette
+- [charts] Add pie benchmark (#17115) @JCQuintas
+- [charts] Fix CSS vars support for dark theme (#17106) @alexfauquette
+- [charts] Fix radar hover (#17134) @alexfauquette
+- [charts] Move axis interaction to selectors (#17039) @alexfauquette
+- [charts] Fix Pie benchmark (#17125) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.2`.
+
+### `@mui/x-codemod@8.0.0-beta.1`
+
+- [codemod] Add Data Grid codemods (#17121, #17124) @MBilalShafi
+
+### Docs
+
+- [docs] Fix example import for `ExportExcel` component (#17110) @KenanYusuf
+
+### Core
+
+- [code-infra] Remove `@mui/styles` dependency & patches (#17071) @mnajdova
+- [code-infra] Add more tests to slow screenshot tests (#17075) @JCQuintas
+- [code-infra] Fix pickers codecov (#17120) @JCQuintas
+- [code-infra] Move `isDeepEqual` to @mui/x-internals (#17129) @JCQuintas
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17108) @LukasTy
+- [code-infra] Update some data-grid tests for vitest (#17078, #17104, #17146) @JCQuintas
+- [code-infra] Update some date-pickers tests for vitest (#17083) @JCQuintas
+- [infra] Update `issue-status-label-handler.yml` @michelengelen
+- [infra] Added reusable issue status label handler workflow (#17145) @michelengelen
+- [infra] Switch to reusable 'stale issues/PRs' workflow (#17107) @michelengelen
+- [telemetry] Improve request body size, update dependencies, and optimize SSR handling (#17008) @hasdfa
+
+## 8.0.0-beta.1
+
+_Mar 21, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@jyash97.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.1`
+
+- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
+- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-beta.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-beta.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.1`
+
+- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
+- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
+- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
+- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-beta.1`, plus:
+
+- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.1`
+
+- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.1`, plus:
+
+- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.1`.
+
+### Docs
+
+- [docs] Fix 404 (#17033) @alexfauquette
+- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
+
 ## 8.0.0-beta.0
 
 <img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

package/DataGrid/DataGrid.js

@@ -117,6 +117,7 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
    * The character used to separate cell values when copying to the clipboard.
    * @default '\t'
@@ -776,6 +777,7 @@ DataGridRaw.propTypes = {
     field: _propTypes.default.string.isRequired,
     sort: _propTypes.default.oneOf(['asc', 'desc'])
   })),
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/components/GridRow.js

@@ -86,7 +86,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
-  const rowNode = apiRef.current.getRowNode(rowId);
+  const rowNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, rowId);
   const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
     rowId,
     editMode: rootProps.editMode
@@ -199,7 +199,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
-  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
+  const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
@@ -209,11 +209,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  /* Start of rendering */
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -222,7 +217,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
-    if (rowNode?.type === 'skeletonRow') {
+    if (rowNode.type === 'skeletonRow') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         type: column.type,
         width: width,

package/components/GridShadowScrollArea.js

@@ -25,48 +25,56 @@ const detectScroll = (0, _system.keyframes)({
     '--scrollable': '" "'
   }
 });
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
 const ShadowScrollArea = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ShadowScrollArea'
-})({
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  animation: detectScroll,
-  animationTimeline: '--scroll-timeline',
-  animationFillMode: 'none',
-  boxSizing: 'border-box',
-  overflow: 'auto',
-  scrollTimeline: '--scroll-timeline block',
-  '&::before, &::after': {
-    content: '""',
-    flexShrink: 0,
-    display: 'block',
-    position: 'sticky',
-    left: 0,
-    width: '100%',
-    height: '4px',
-    animation: `${reveal} linear both`,
-    animationTimeline: '--scroll-timeline',
+})`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  animation: ${detectScroll};
+  animation-timeline: --scroll-timeline;
+  animation-fill-mode: none;
+  box-sizing: border-box;
+  overflow: auto;
+  scroll-timeline: --scroll-timeline block;
+
+  &::before,
+  &::after {
+    content: '';
+    flex-shrink: 0;
+    display: block;
+    position: sticky;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    animation: ${reveal} linear both;
+    animation-timeline: --scroll-timeline;
+
     // Custom property toggle trick:
     // - Detects if the element is scrollable
     // - https://css-tricks.com/the-css-custom-property-toggle-trick/
-    '--visibility-scrollable': 'var(--scrollable) visible',
-    '--visibility-not-scrollable': 'hidden',
-    visibility: 'var(--visibility-scrollable, var(--visibility-not-scrollable))'
-  },
-  '&::before': {
-    top: 0,
-    background: 'linear-gradient(to bottom, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationRange: '0 4px'
-  },
-  '&::after': {
-    bottom: 0,
-    background: 'linear-gradient(to top, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationDirection: 'reverse',
-    animationRange: 'calc(100% - 4px) 100%'
+    --visibility-scrollable: var(--scrollable) visible;
+    --visibility-not-scrollable: hidden;
+    visibility: var(--visibility-scrollable, var(--visibility-not-scrollable));
   }
-});
+
+  &::before {
+    top: 0;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-range: 0 4px;
+  }
+
+  &::after {
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-direction: reverse;
+    animation-range: calc(100% - 4px) 100%;
+  }
+`;
 
 /**
  * Adds scroll shadows above and below content in a scrollable container.

package/components/cell/GridBooleanCell.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import type { GridColDef } from '../../models/colDef/gridColDef';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+interface GridBooleanCellProps extends GridRenderCellParams {
   hideDescendantCount?: boolean;
 }
 declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element | null;

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
-export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'> {
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams {
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */
-  onValueChange?: (event: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+  onValueChange?: (event: Parameters<NonNullable<GridSlotProps['baseSelect']['onOpen']>>[0], newValue: any) => Promise<void> | void;
   /**
    * If true, the select opens by default.
    */

package/components/cell/GridEditSingleSelectCell.js

@@ -171,7 +171,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   isValidating: _propTypes.default.bool,
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */

package/components/columnSelection/GridHeaderCheckbox.js

@@ -77,7 +77,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to a Set to make O(1) checking if a row exists or not
     const candidates = new Set();
@@ -88,7 +88,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
       }
     }
     return candidates;
-  }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [apiRef, rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => {

package/components/containers/GridToolbarContainer.js

@@ -17,6 +17,7 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _toolbarV = require("../toolbarV8");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "children"];
 const useUtilityClasses = ownerState => {
@@ -28,16 +29,17 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridToolbarContainerRoot = (0, _system.styled)('div', {
+const GridToolbarContainerRoot = (0, _system.styled)(_toolbarV.Toolbar, {
   name: 'MuiDataGrid',
   slot: 'ToolbarContainer',
-  overridesResolver: (_, styles) => styles.toolbarContainer
+  shouldForwardProp: prop => prop !== 'ownerState'
 })({
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
   gap: _cssVariables.vars.spacing(1),
-  padding: _cssVariables.vars.spacing(0.5, 0.5, 0)
+  padding: _cssVariables.vars.spacing(0.5),
+  minHeight: 'auto'
 });
 const GridToolbarContainer = exports.GridToolbarContainer = (0, _forwardRef.forwardRef)(function GridToolbarContainer(props, ref) {
   const {

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;