@mui/x-data-grid-pro 6.6.0 → 6.8.0

package/CHANGELOG.md

@@ -3,6 +3,140 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.8.0
+
+_Jun 16, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Greek (el-GR) locale on Pickers and improve on Data Grid
+- 🚅 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@6.8.0` / `@mui/x-data-grid-pro@6.8.0` / `@mui/x-data-grid-premium@6.8.0`
+
+#### Changes
+
+- [DataGrid] Add missing styles to `overridesResolver` (#9248) @mrmuhammadali
+- [DataGrid] Keep column header menu icon always visible on touch devices (#9076) @cherniavskii
+- [DataGrid] Correct the type for single digit edited number value (#9282) @MBilalShafi
+- [DataGrid] Correct the type for single digit edited number for row edit (#9348) @MBilalShafi
+- [DataGrid] Filtering performance: cache values (#9284) @romgrk
+- [DataGrid] Fix tabbing between `actions` cells in edit mode (#9321) @md250721
+- [DataGrid] Make autocompletion work for `GridColDef['type']` (#9320) @cherniavskii
+- [DataGrid] Polish shortcut logic (#9220) @oliviertassinari
+- [DataGrid] Row reordering fix for different row heights (#7006) @yaredtsy
+- [DataGrid] Scroll performance improvements (#9037) @romgrk
+- [l10n] Improve Greek (el-GR) locale (#9292) @clytras
+
+### `@mui/x-date-pickers@6.8.0` / `@mui/x-date-pickers-pro@6.8.0`
+
+#### Changes
+
+- [l10n] Add Greek (el-GR) locale (#9293) @clytras
+- [pickers] Add a `referenceDate` prop on `DateCalendar`, `MonthCalendar` and `YearCalendar` (#9260) @flaviendelangle
+- [pickers] Close the calendar when a shortcut is selected (#9080) @flaviendelangle
+- [pickers] Fix disabling for digital clock (#9300) @alexfauquette
+
+### Docs
+
+- [docs] Add header filters to the popular features demo (#9069) @MBilalShafi
+- [docs] Fix `Date Calendar` dynamic data demo (#9290) @benzler
+- [docs] Fix Data Grid header filter link (#9225) @oliviertassinari
+- [docs] Fix missing docs version warning (#9221) @oliviertassinari
+- [docs] Improve Chart overview (#9333) @oliviertassinari
+- [docs] Improve Next.js license installation guide (#8975) @oliviertassinari
+- [docs] Link pagination documentation to the migration guide (#9296) @MBilalShafi
+- [docs] One step toward components -> slots (#9251) @oliviertassinari
+- [docs] Improve and reorganize sections on editing page (#8431) @joserodolfofreitas
+- [docs] Add clipboard paste to popular features demo (#9029) @cherniavskii
+
+### Core
+
+- [core] Polish event name (#9336) @oliviertassinari
+- [core] Re-enable `Argos` CI step (#9301) @LukasTy
+- [core] Upgrade Node.js to v18 on CircleCI, CodeSandbox and Netlify (#9319) @ZeeshanTamboli
+- [core] Upgrade Node.js v18 for l10n GitHub CI (#9355) @ZeeshanTamboli
+- [charts] Add demonstration pages based on Recharts demo (#9175) @alexfauquette
+- [charts] Add legend (#9024) @alexfauquette
+- [charts] Complete the docs to introduce charts (#9153) @alexfauquette
+- [charts] Manage elements highlights (#9242) @alexfauquette
+- [charts] Prefix subcomponents with `Charts` (#9314) @alexfauquette
+- [license] Improve annual license expiration message (#9135) @oliviertassinari
+
+## 6.7.0
+
+_Jun 9, 2023_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Improve the default `format` prop value on the pickers.
+
+  Here are a few examples:
+
+  ```tsx
+  <TimePicker views={['hours', 'minutes', 'seconds']} ampm />
+  // Format before v6.7.0: `hh:mm aa`
+  // Format after v6.7.0: `hh:mm:ss aa`
+
+  <DatePicker views={['year']} />
+  // Format before v6.7.0: `MM/DD/YYYY`
+  // Format after v6.7.0: `YYYY`
+
+  <DateTimePicker views={['day', 'hours', 'minutes']} ampm />
+  // Format before v6.7.0: `MM/DD/YYYY hh:mm aa`
+  // Format after v6.7.0: `DD hh:mm aa`
+  ```
+
+- 🌍 Add Romanian (ro-RO) locale on the pickers
+- 🌍 Improve German (de-DE) locale on the pickers
+- 🌍 Improve Czech (cs-CZ), German (de-DE) and Turkish (tr-TR) locales on the data grid
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.7.0` / `@mui/x-data-grid-pro@v6.7.0` / `@mui/x-data-grid-premium@v6.7.0`
+
+#### Changes
+
+- [DataGrid] Allow overflowing grid root element (#9179) @cherniavskii
+- [DataGrid] Fix module augmentation error when using `@mui/lab` (#9235) @cherniavskii
+- [DataGrid] Fix row with ids matching `Object` prototype (#9265) @romgrk
+- [DataGrid] Fix `sortModel` and `filterModel` resetting when columns change (#9239) @alexgonch
+- [DataGrid] Improve grouping performance for large datasets (#9200) @romgrk
+- [DataGrid] Increase threshold to trigger memory leak warning (#9263) @m4theushw
+- [DataGrid] Update data grid migration guide to include updated type (#9272) @MBilalShafi
+- [DataGridPro] Improve header filter menu visuals (#9181) @MBilalShafi
+- [DataGridPremium] Remove last line break on clipboard paste (#9163) @cherniavskii
+- [l10n] Improve Czech (cs-CZ) locale (#9266) @MartinSkarpa
+- [l10n] Improve German (de-DE) locale (#9259) @ximex
+- [l10n] Improve Turkish (tr-TR) locale (#9237) @MCErtan
+
+### `@mui/x-date-pickers@v6.7.0` / `@mui/x-date-pickers-pro@v6.7.0`
+
+#### Changes
+
+- [l10n] Add Romanian (ro-RO) locale (#9257) @ximex
+- [l10n] Improve German (de-DE) locale (#9258) @ximex
+- [pickers] Apply dynamic default format depending on views for all desktop and mobile pickers (#9126) @flaviendelangle
+- [pickers] Update `DateRangePickerDay` props JSDoc (#9191) @stevus
+
+### Docs
+
+- [docs] Fix missing props on the `GridFilterPanel` API page (#9180) @cherniavskii
+- [docs] Fix overview page typo (#9230) @LukasTy
+- [docs] Fix version redirect (#9273) @alexfauquette
+
+### Core
+
+- [core] Temporarily remove the Argos upload on the regression testing (#9267) @flaviendelangle
+- [charts] Add clip-path to avoid charts overflow (#9012) @alexfauquette
+- [charts] Add style customization on bar (#8935) @alexfauquette
+- [charts] Enforce axis `min`/`max` over the `nice()` method (#9189) @alexfauquette
+- [charts] Improve axis label and ticks label alignements (#9190) @alexfauquette
+- [charts] Simplify the switch between responsive and fix dimensions (#9151) @alexfauquette
+
 ## 6.6.0
 
 _Jun 1, 2023_
@@ -11,7 +145,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 🚀 New date time picking UI on [`DesktopDateTimePicker`](https://mui.com/x/react-date-pickers/date-time-picker/)
 
-  <img src="https://user-images.githubusercontent.com/4941090/242533399-2b106390-8158-4aba-9ca4-b621c6310977.gif" width="628" />
+  <img src="https://github.com/mui/mui-x/assets/3165635/4e1fe9f9-03eb-4f23-99dd-80212b21fb23" width="840" height="506" />
 
 - 🚀 Performance improvements
 - 🐞 Bugfixes
@@ -79,7 +213,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [charts] Manage series stacking (#8888) @alexfauquette
 - [license] List side effects in the license package (#9092) @cherniavskii
 
-## v6.5.0
+## 6.5.0
 
 _May 19, 2023_
 
@@ -87,9 +221,9 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 - 💫 Introduce filtering on column headers for `DataGridPro` and `DataGridPremium`:
 
-  https://github.com/mui/mui-x/assets/12609561/c4c2bfec-59cf-4cab-932d-dc1983081de9
+  <img src="https://github.com/mui/mui-x/releases/download/v6.5.0/recording.gif" width="840" height="506" />
 
-  See [the documentation](https://mui.com/x/react-data-grid/filtering/#header-filters) for more information
+  See [the documentation](https://mui.com/x/react-data-grid/filtering/header-filters/) for more information
 
 - 🌍 Improve Hebrew (he-IL) and Czech (cs-CZ) locales
 - 📝 Support for editing on pinned rows
@@ -135,7 +269,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Memoize root props for better performance (#8942) @romgrk
 - [test] Skip flaky unit tests in JSDOM (#8994) @cherniavskii
 
-## v6.4.0
+## 6.4.0
 
 _May 12, 2023_
 
@@ -4168,7 +4302,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [docs] Revise and split up "Overview" page into "Introduction" (#4692) @samuelsycamore
 - [docs] Use `useKeepGroupedColumnsHiddren` from the grid package on remaining demo (#5382) @flaviendelangle
 
-## v5.12.3
+## 5.12.3
 
 _Jun 23, 2022_
 
@@ -4219,7 +4353,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 - [test] Throw if date adapter is not found (#5289) @cherniavskii
 - [test] Use mock for `ResizeObserver` (#5215) @m4theushw
 
-## v5.12.2
+## 5.12.2
 
 _Jun 16, 2022_
 
@@ -4262,7 +4396,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 - [core] Fix `GridColTypeDef` usage in demo (#5197) @cherniavskii
 - [test] Add `waitFor` before asserting height (#5203) @m4theushw
 
-## v5.12.1
+## 5.12.1
 
 _Jun 9, 2022_
 
@@ -4319,7 +4453,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [test] Fix dynamic row height test failing on Chrome (#5147) @m4theushw
 - [test] Remove delay on server demo for regression tests (#5131) @alexfauquette
 
-## v5.12.0
+## 5.12.0
 
 _May 31, 2022_
 
@@ -4400,7 +4534,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [test] Skip Safari and Firefox on broken tests (#4994) @alexfauquette
 - [test] Make argos screenshots stable (#5061) @m4theushw
 
-## v5.11.1
+## 5.11.1
 
 _May 20, 2022_
 
@@ -4492,7 +4626,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [core] Simplify rows cache management (#4933) @flaviendelangle
 - [core] Use internal icons for quick filter (#4912) @alexfauquette
 
-## v5.11.0
+## 5.11.0
 
 _May 13, 2022_
 
@@ -4636,7 +4770,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [test] Reset cleanup tracking on Karma tests (#4679) @m4theushw
 - [test] Restore `sinon` sandbox after each `karma` test (#4689) @m4theushw
 
-## v5.10.0
+## 5.10.0
 
 _Apr 25, 2022_
 
@@ -4672,7 +4806,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [core] Fix the README of the X packages (#4590) @flaviendelangle
 - [test] Fix test to not depend on screen resolution (#4587) @m4theushw
 
-## v5.9.0
+## 5.9.0
 
 _Apr 14, 2022_
 

package/components/headerFiltering/GridHeaderFilterCell.d.ts

@@ -7,7 +7,6 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
     sortIndex?: number;
     hasFocus?: boolean;
     tabIndex: 0 | -1;
-    headerFilterComponent?: React.ReactNode;
     filterOperators?: GridFilterOperator[];
     width: number;
     colDef: GridColDef;

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "headerFilterComponent", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+const _excluded = ["colIndex", "height", "hasFocus", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -8,7 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeCl
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { useGridPrivateApiContext, unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridHeaderFilterAdornment } from './GridHeaderFilterAdornment';
+import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,13 +23,17 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const dateSx = {
+  [`& input[value=""]:not(:focus)`]: {
+    color: 'transparent'
+  }
+};
 const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _filterOperators$find, _currentOperator$head, _colDef$headerName;
   const {
       colIndex,
       height,
       hasFocus,
-      headerFilterComponent,
       filterOperators,
       width,
       headerClassName,
@@ -61,6 +65,10 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const clearFilterItem = React.useCallback(() => {
     apiRef.current.deleteFilterItem(item);
   }, [apiRef, item]);
+  let headerFilterComponent;
+  if (colDef.renderHeaderFilter) {
+    headerFilterComponent = colDef.renderHeaderFilter(props);
+  }
   React.useLayoutEffect(() => {
     if (hasFocus && !isMenuOpen) {
       let focusableElement = cellRef.current.querySelector('[tabindex="0"]');
@@ -131,7 +139,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const mouseEventsHandlers = React.useMemo(() => ({
     onKeyDown: publish('headerFilterKeyDown', onKeyDown),
     onClick: publish('headerFilterClick'),
-    onMouseDown: publish('headerFilterMouseDown', onMouseDown)
+    onMouseDown: publish('headerFilterMouseDown', onMouseDown),
+    onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
   const ownerState = _extends({}, rootProps, {
     colDef
@@ -156,30 +165,35 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field : undefined
   }, other, mouseEventsHandlers, {
-    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsx(InputComponent, _extends({
-      apiRef: apiRef,
-      item: item,
-      inputRef: inputRef,
-      applyValue: applyFilterChanges,
-      onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
-      onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
-      placeholder: apiRef.current.getLocaleText('columnMenuFilter'),
-      label: isFilterActive ? capitalize(label) : ' ',
-      isFilterActive: isFilterActive,
-      headerFilterMenu: /*#__PURE__*/_jsx(GridHeaderFilterAdornment, {
+    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(InputComponent, _extends({
+        apiRef: apiRef,
+        item: item,
+        inputRef: inputRef,
+        applyValue: applyFilterChanges,
+        onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
+        onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
+        label: capitalize(label),
+        placeholder: "",
+        isFilterActive: isFilterActive,
+        clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
+          onClick: clearFilterItem
+        }) : null,
+        disabled: isNoInputOperator,
+        tabIndex: -1,
+        InputLabelProps: null,
+        sx: colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined
+      }, isNoInputOperator ? {
+        value: ''
+      } : {}, currentOperator == null ? void 0 : currentOperator.InputComponentProps, InputComponentProps)), /*#__PURE__*/_jsx(GridHeaderFilterMenuContainer, {
         operators: filterOperators,
         item: item,
         field: colDef.field,
         applyFilterChanges: applyFilterChanges,
         headerFilterMenuRef: headerFilterMenuRef,
         buttonRef: buttonRef
-      }),
-      clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
-        onClick: clearFilterItem
-      }) : null,
-      disabled: isNoInputOperator,
-      tabIndex: -1
-    }, currentOperator == null ? void 0 : currentOperator.InputComponentProps, InputComponentProps)) : null]
+      })]
+    }) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
@@ -204,7 +218,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
    * Class name that will be added in the column header cell.
    */
   headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  headerFilterComponent: PropTypes.node,
   headerFilterMenuRef: PropTypes.shape({
     current: PropTypes.object
   }).isRequired,

package/components/headerFiltering/GridHeaderFilterClearButton.js

@@ -17,7 +17,7 @@ function GridHeaderFilterClearButton({
     onClick: onClick,
     sx: sx
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-    children: /*#__PURE__*/_jsx(rootProps.slots.headerFilterClearIcon, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuClearIcon, {
       fontSize: "inherit"
     })
   }));

package/components/headerFiltering/GridHeaderFilterMenu.d.ts

@@ -8,7 +8,10 @@ interface GridHeaderFilterMenuProps {
     open: boolean;
     id: string;
     labelledBy: string;
-    targetRef: React.MutableRefObject<HTMLElement | null>;
+    target: HTMLElement | null;
+}
+declare function GridHeaderFilterMenu({ open, field, target, applyFilterChanges, operators, item, id, labelledBy, }: GridHeaderFilterMenuProps): React.JSX.Element | null;
+declare namespace GridHeaderFilterMenu {
+    var propTypes: any;
 }
-declare function GridHeaderFilterMenu({ open, field, targetRef, applyFilterChanges, operators, item, id, labelledBy, }: GridHeaderFilterMenuProps): React.JSX.Element | null;
 export { GridHeaderFilterMenu };

package/components/headerFiltering/GridHeaderFilterMenu.js

@@ -1,18 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_capitalize as capitalize, HTMLElementType } from '@mui/utils';
 import { useGridApiContext, GridMenu } from '@mui/x-data-grid';
-import { OPERATOR_SYMBOL_MAPPING } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridHeaderFilterMenu({
   open,
   field,
-  targetRef,
+  target,
   applyFilterChanges,
   operators,
   item,
@@ -31,13 +28,13 @@ function GridHeaderFilterMenu({
       hideMenu();
     }
   }, [hideMenu]);
-  if (!targetRef.current) {
+  if (!target) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridMenu, {
-    placement: "bottom-start",
+    placement: "bottom-end",
     open: open,
-    target: targetRef.current,
+    target: target,
     onClickAway: hideMenu,
     onExited: hideMenu,
     children: /*#__PURE__*/_jsx(MenuList, {
@@ -47,7 +44,7 @@ function GridHeaderFilterMenu({
       children: operators.map((op, i) => {
         var _op$headerLabel;
         const label = (_op$headerLabel = op == null ? void 0 : op.headerLabel) != null ? _op$headerLabel : apiRef.current.getLocaleText(`headerFilterOperator${capitalize(op.value)}`);
-        return /*#__PURE__*/_jsxs(MenuItem, {
+        return /*#__PURE__*/_jsx(MenuItem, {
           onClick: () => {
             applyFilterChanges(_extends({}, item, {
               operator: op.value
@@ -56,14 +53,38 @@ function GridHeaderFilterMenu({
           },
           autoFocus: i === 0 ? open : false,
           selected: op.value === item.operator,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: OPERATOR_SYMBOL_MAPPING[op.value]
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            children: label
-          })]
+          children: label
         }, `${field}-${op.value}`);
       })
     })
   });
 }
+process.env.NODE_ENV !== "production" ? GridHeaderFilterMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  applyFilterChanges: PropTypes.func.isRequired,
+  field: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  item: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    operator: PropTypes.string.isRequired,
+    value: PropTypes.any
+  }).isRequired,
+  labelledBy: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  operators: PropTypes.arrayOf(PropTypes.shape({
+    getApplyFilterFn: PropTypes.func.isRequired,
+    getValueAsString: PropTypes.func,
+    headerLabel: PropTypes.string,
+    InputComponent: PropTypes.elementType,
+    InputComponentProps: PropTypes.object,
+    label: PropTypes.string,
+    requiresFilterValue: PropTypes.bool,
+    value: PropTypes.string.isRequired
+  })).isRequired,
+  target: HTMLElementType
+} : void 0;
 export { GridHeaderFilterMenu };

package/components/headerFiltering/{GridHeaderFilterAdornment.d.ts → GridHeaderFilterMenuContainer.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridFilterItem, GridFilterOperator, GridColDef } from '@mui/x-data-grid';
-declare function GridHeaderFilterAdornment(props: {
+declare function GridHeaderFilterMenuContainer(props: {
     operators: GridFilterOperator<any, any, any>[];
     field: GridColDef['field'];
     item: GridFilterItem;
@@ -8,7 +8,7 @@ declare function GridHeaderFilterAdornment(props: {
     headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
     buttonRef: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element | null;
-declare namespace GridHeaderFilterAdornment {
+declare namespace GridHeaderFilterMenuContainer {
     var propTypes: any;
 }
-export { GridHeaderFilterAdornment };
+export { GridHeaderFilterMenuContainer };

package/{modern/components/headerFiltering/GridHeaderFilterAdornment.js → components/headerFiltering/GridHeaderFilterMenuContainer.js}

@@ -7,15 +7,15 @@ import { useGridApiContext } from '@mui/x-data-grid';
 import { unstable_useId as useId } from '@mui/utils';
 import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { OPERATOR_SYMBOL_MAPPING } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const sx = {
   width: 22,
   height: 22,
-  padding: '0px 0px 2px 2px'
+  margin: 'auto 0 10px 5px'
 };
-function GridHeaderFilterAdornment(props) {
+function GridHeaderFilterMenuContainer(props) {
+  var _rootProps$slotProps;
   const {
       operators,
       item,
@@ -37,35 +37,34 @@ function GridHeaderFilterAdornment(props) {
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-      position: "start",
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-        id: buttonId,
-        ref: buttonRef,
-        "aria-label": apiRef.current.getLocaleText('filterPanelOperator'),
-        title: apiRef.current.getLocaleText('filterPanelOperator'),
-        "aria-controls": menuId,
-        "aria-expanded": open ? 'true' : undefined,
-        "aria-haspopup": "true",
-        tabIndex: -1,
-        size: "small",
-        onClick: handleClick,
-        sx: sx
-      }, rootProps.slotProps?.baseIconButton, {
-        children: OPERATOR_SYMBOL_MAPPING[item?.operator] ?? '='
-      }))
-    }), /*#__PURE__*/_jsx(rootProps.slots.headerFilterMenu, _extends({
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      id: buttonId,
+      ref: buttonRef,
+      "aria-label": apiRef.current.getLocaleText('filterPanelOperator'),
+      title: apiRef.current.getLocaleText('filterPanelOperator'),
+      "aria-controls": menuId,
+      "aria-expanded": open ? 'true' : undefined,
+      "aria-haspopup": "true",
+      tabIndex: -1,
+      size: "small",
+      onClick: handleClick,
+      sx: sx
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {
+        fontSize: "small"
+      })
+    })), /*#__PURE__*/_jsx(rootProps.slots.headerFilterMenu, _extends({
       field: field,
       open: open,
       item: item,
-      targetRef: headerFilterMenuRef,
+      target: headerFilterMenuRef.current,
       operators: operators,
       labelledBy: buttonId,
       id: menuId
     }, others))]
   });
 }
-process.env.NODE_ENV !== "production" ? GridHeaderFilterAdornment.propTypes = {
+process.env.NODE_ENV !== "production" ? GridHeaderFilterMenuContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
@@ -95,4 +94,4 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterAdornment.propTypes = {
     value: PropTypes.string.isRequired
   })).isRequired
 } : void 0;
-export { GridHeaderFilterAdornment };
+export { GridHeaderFilterMenuContainer };

package/components/headerFiltering/index.d.ts

@@ -1,2 +1,3 @@
-export * from './GridHeaderFilterAdornment';
+export * from './GridHeaderFilterMenuContainer';
 export * from './GridHeaderFilterCell';
+export * from './GridHeaderFilterMenu';

package/components/headerFiltering/index.js

@@ -1,2 +1,3 @@
-export * from './GridHeaderFilterAdornment';
-export * from './GridHeaderFilterCell';
+export * from './GridHeaderFilterMenuContainer';
+export * from './GridHeaderFilterCell';
+export * from './GridHeaderFilterMenu';