@mui/x-data-grid 6.4.0 → 6.6.0

package/CHANGELOG.md

@@ -3,6 +3,138 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.6.0
+
+_Jun 1, 2023_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 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" />
+
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Dutch (nl-NL) and French (fr-FR) locales on the data grid
+- 🌍 Add Vietnamese (vi-VN) locale on the pickers
+
+### `@mui/x-data-grid@v6.6.0` / `@mui/x-data-grid-pro@v6.6.0` / `@mui/x-data-grid-premium@v6.6.0`
+
+#### Changes
+
+- [DataGrid] Support data attributes (#8845) @romgrk
+- [DataGrid] Avoid allocations in `hydrateRowsMeta` (#9121) @romgrk
+- [DataGrid] Fix filter input select accessibility (#9018) @Jul13nT
+- [DataGrid] Fix accessibility issues in panels and toolbar buttons (#8862) @romgrk
+- [DataGrid] Fix `onCellEditStop` not invoked (#8857) @romgrk
+- [DataGridPro] Fix auto-scroll when reordering columns (#8856) @m4theushw
+- [DataGridPro] Fix row ID type casting in detail panels lookup (#8976) @minchaej
+- [DataGridPro] Emit `columnWidthChange` event on `touchEnd` of column resize (#8669) @MBilalShafi
+- [DataGridPro] Do not apply filters on `rowExpansionChange` (#8671) @cherniavskii
+- [DataGridPro] Prevent click event on sorting after a resize (#9117) @romgrk
+- [DataGridPremium] Improve Excel export interface (#9128) @TiagoPortfolio
+- [l10n] Improve Dutch (nl-NL) locale (#9043) @thedutchruben
+- [l10n] Improve French (fr-FR) locale (#9109) @Jul13nT
+
+### `@mui/x-date-pickers@v6.6.0` / `@mui/x-date-pickers-pro@v6.6.0`
+
+#### Changes
+
+- [fields] Allow to explicitly define the reference value and improve its default value (#9019) @flaviendelangle
+- [l10n] Add Vietnamese (vi-VN) locale (#9099) @nhannt201
+- [pickers] Add `DigitalClock` to `DesktopDateTimePicker` (#8946) @LukasTy
+- [pickers] Add support for timezones on the adapters (#9068) @flaviendelangle
+- [pickers] Fix `MonthCalendar` and `YearCalendar` disabled validation (#9149) @LukasTy
+- [pickers] Fix bug when fields have a unique section (#9110) @alexfauquette
+- [pickers] Fix focus jumping on Safari (#9072) @LukasTy
+- [pickers] Use the locale start of the week in `getWeekArray` (#9176) @flaviendelangle
+
+### Docs
+
+- [docs] Add single input range picker demo (#9159) @LukasTy
+- [docs] Align `DateCalendar` demo views with labels (#9152) @LukasTy
+- [docs] Clarify the peer dependency with React (#9067) @oliviertassinari
+- [docs] Fix Norwegian locale typo (#9168) @LukasTy
+- [docs] Fix column menu item demo (#9071) @MBilalShafi
+- [docs] Improve localization table progress bars (#9033) @noraleonte
+- [docs] Smooth performance animation (#8986) @oliviertassinari
+- [docs] Use responsive time and date time pickers and the views sections (#9127) @flaviendelangle
+- [docs] Reduce layout shift in grid demo (#9132) @oliviertassinari
+- [docs] Fix tree data children lazy-loading demo (#8840) @yaredtsy
+- [docs] Improve filtering docs discoverability (#9074) @MBilalShafi
+
+### Core
+
+- [core] Allow string literals as keys in `localesText` (#9045) @MBilalShafi
+- [core] Fix `randomInt` producing values exceeding `max` value (#9086) @cherniavskii
+- [core] Fix flaky test on `dateWithTimezone` adapter test (#9129) @flaviendelangle
+- [core] Lock `@types/node` on v18 (#9107) @LukasTy
+- [core] Remove `cross-fetch` dependency (#9108) @LukasTy
+- [core] Remove `createDetectElementResize()` replaced with `ResizeObserver` (#9015) @oliviertassinari
+- [core] Upgrade monorepo (#9027) @m4theushw
+- [core] Upgrade monorepo (#9106) @LukasTy
+- [charts] Fix proptypes (#9125) @LukasTy
+- [charts] Generate the charts proptypes (#9010) @alexfauquette
+- [charts] Manage series stacking (#8888) @alexfauquette
+- [license] List side effects in the license package (#9092) @cherniavskii
+
+## v6.5.0
+
+_May 19, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Introduce filtering on column headers for `DataGridPro` and `DataGridPremium`:
+
+  https://github.com/mui/mui-x/assets/12609561/c4c2bfec-59cf-4cab-932d-dc1983081de9
+
+  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
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@6.5.0` / `@mui/x-data-grid-pro@6.5.0` / `@mui/x-data-grid-premium@6.5.0`
+
+#### Changes
+
+- [DataGrid] Fix grid size calculation when `.MuiDataGrid-main` has border (#8882) @cherniavskii
+- [DataGridPro] Filtering on Column Header (#7760) @MBilalShafi
+- [DataGridPro] Improve `treeData` and `rowGrouping` performance (#8990) @MBilalShafi
+- [DataGridPro] Support pinned rows editing (#8921) @cherniavskii
+- [l10n] Improve Hebrew (he-IL) locale (#8943) @Itzik-Tech
+- [l10n] Improve Czech (cs-CZ) locale (#8829) @harastaivan
+- [l10n] Improve Czech (cs-CZ) locale (#8956) @davidzemancz
+
+### `@mui/x-date-pickers@6.5.0` / `@mui/x-date-pickers-pro@6.5.0`
+
+#### Changes
+
+- [fields] Select the first section instead of last when clicking right of content (#9005) @noraleonte
+- [fields] Refactor prop drilling in fields (#8660) @flaviendelangle
+- [pickers] Allow to render the months before `currentMonth` instead of the one after (#8592) @flaviendelangle
+- [pickers] Fix view management when `openTo` or `views` is modified (#8997) @alexfauquette
+- [l10n] Improve Czech (cs-CZ) locale (#8829) @harastaivan
+
+### Docs
+
+- [docs] Clarify what Controlled / Uncontrolled means (#8926) @flaviendelangle
+- [docs] Fix docs using wrong service worker (#9030) @cherniavskii
+- [docs] Remove prop-types from JS demos (#9008) @flaviendelangle
+
+### Core
+
+- [core] Add assertion about checkbox rerenders (#8974) @oliviertassinari
+- [core] Allow selecting a section by type in field tests (#9009) @flaviendelangle
+- [core] Fix `yarn.lock` (#8988) @flaviendelangle
+- [core] Fix flacky adapter test (#8995) @flaviendelangle
+- [charts] Clean the axis rendering (#8948) @alexfauquette
+- [DataGrid] Memoize root props for better performance (#8942) @romgrk
+- [test] Skip flaky unit tests in JSDOM (#8994) @cherniavskii
+
 ## v6.4.0
 
 _May 12, 2023_
@@ -46,7 +178,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 ### Docs
 
-- [docs] Fix date pickers typo in the docs  (#8939) @richbustos
+- [docs] Fix date pickers typo in the docs (#8939) @richbustos
 - [docs] Fix master detail demo (#8894) @m4theushw
 - [docs] Fix typo in clipboard docs (#8971) @MBilalShafi
 - [docs] Reduce list of dependencies in Codesandbox/Stackblitz demos (#8535) @cherniavskii
@@ -4384,7 +4516,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 👔 **Excel export**. You can find this new Premium feature at: https://mui.com/x/react-data-grid/export/#excel-export.
 
-- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter).
+- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/quick-filter/).
 
   <img src="https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png" width="724">
 

package/DataGrid/DataGrid.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
@@ -14,15 +15,16 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, {
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         VirtualScrollerComponent: DataGridVirtualScroller
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
@@ -182,6 +184,11 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

package/DataGrid/useDataGridProps.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from '../constants';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
 import { GridEditModes } from '../models';
-import { computeSlots, uncapitalizeObjectKeys } from '../internals/utils';
+import { computeSlots, useProps, uncapitalizeObjectKeys } from '../internals/utils';
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -72,15 +70,10 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
 };
 const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProps = inProps => {
-  const _useThemeProps = useThemeProps({
-      props: inProps,
-      name: 'MuiDataGrid'
-    }),
-    {
-      components,
-      componentsProps
-    } = _useThemeProps,
-    themedProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+  const [components, componentsProps, themedProps] = useProps(useThemeProps({
+    props: inProps,
+    name: 'MuiDataGrid'
+  }));
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

package/README.md

@@ -21,8 +21,8 @@ This component has the following peer dependencies that you will need to install
 "peerDependencies": {
   "@mui/material": "^5.4.1",
   "@mui/system": "^5.4.1",
-  "react": "^17.0.2 || ^18.0.0",
-  "react-dom": "^17.0.2 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0"
 },
 ```
 

package/colDef/gridNumericOperators.js

@@ -17,7 +17,6 @@ export const getGridNumericQuickFilterFn = value => {
   };
 };
 export const getGridNumericOperators = () => [{
-  label: '=',
   value: '=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -34,7 +33,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '!=',
   value: '!=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -51,7 +49,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '>',
   value: '>',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -71,7 +68,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '>=',
   value: '>=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -91,7 +87,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '<',
   value: '<',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -111,7 +106,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '<=',
   value: '<=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {

package/components/GridColumnHeaders.js

@@ -4,11 +4,10 @@ const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup"
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-import { GridScrollArea } from './GridScrollArea';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
   const {
       innerRef,
@@ -51,18 +50,14 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
+  return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
     ref: ref
   }, getRootProps(other), {
-    children: [/*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "left"
-    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+    children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
       children: [getColumnGroupHeaders(), getColumnHeaders()]
-    })), /*#__PURE__*/_jsx(GridScrollArea, {
-      scrollDirection: "right"
-    })]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {

package/components/GridHeader.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function GridHeader(): JSX.Element;
+import * as React from 'react';
+export declare function GridHeader(): React.JSX.Element;

package/components/base/GridBody.d.ts

@@ -7,7 +7,7 @@ interface GridBodyProps {
         disableVirtualization: boolean;
     }>;
 }
-declare function GridBody(props: GridBodyProps): JSX.Element;
+declare function GridBody(props: GridBodyProps): React.JSX.Element;
 declare namespace GridBody {
     var propTypes: any;
 }

package/components/base/GridFooterPlaceholder.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function GridFooterPlaceholder(): JSX.Element | null;
+import * as React from 'react';
+export declare function GridFooterPlaceholder(): React.JSX.Element | null;

package/components/base/GridOverlays.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function GridOverlays(): JSX.Element | null;
+import * as React from 'react';
+export declare function GridOverlays(): React.JSX.Element | null;

package/components/cell/GridActionsCell.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { GridMenuProps } from '../menu/GridMenu';
 interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
     api?: GridRenderCellParams['api'];
     position?: GridMenuProps['position'];
 }
-declare function GridActionsCell(props: GridActionsCellProps): JSX.Element;
+declare function GridActionsCell(props: GridActionsCellProps): React.JSX.Element;
 declare namespace GridActionsCell {
     var propTypes: any;
 }
 export { GridActionsCell };
-export declare const renderActionsCell: (params: GridRenderCellParams) => JSX.Element;
+export declare const renderActionsCell: (params: GridRenderCellParams) => React.JSX.Element;

package/components/cell/GridActionsCell.js

@@ -152,9 +152,9 @@ function GridActionsCell(props) {
       ref: buttonRef,
       id: buttonId,
       "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-controls": menuId,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? menuId : undefined,
       role: "menuitem",
       size: "small",
       onClick: showMenu,

package/components/cell/GridBooleanCell.d.ts

@@ -4,7 +4,7 @@ import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { GridColDef } from '../../models/colDef/gridColDef';
 interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
 }
-declare function GridBooleanCellRaw(props: GridBooleanCellProps): JSX.Element;
+declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element;
 declare namespace GridBooleanCellRaw {
     var propTypes: any;
 }

package/components/cell/GridEditBooleanCell.d.ts

@@ -9,9 +9,9 @@ export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit
      */
     onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => Promise<void> | void;
 }
-declare function GridEditBooleanCell(props: GridEditBooleanCellProps): JSX.Element;
+declare function GridEditBooleanCell(props: GridEditBooleanCellProps): React.JSX.Element;
 declare namespace GridEditBooleanCell {
     var propTypes: any;
 }
 export { GridEditBooleanCell };
-export declare const renderEditBooleanCell: (params: GridEditBooleanCellProps) => JSX.Element;
+export declare const renderEditBooleanCell: (params: GridEditBooleanCellProps) => React.JSX.Element;

package/components/cell/GridEditDateCell.d.ts

@@ -10,9 +10,9 @@ export interface GridEditDateCellProps extends GridRenderEditCellParams, Omit<In
      */
     onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: Date | null) => Promise<void> | void;
 }
-declare function GridEditDateCell(props: GridEditDateCellProps): JSX.Element;
+declare function GridEditDateCell(props: GridEditDateCellProps): React.JSX.Element;
 declare namespace GridEditDateCell {
     var propTypes: any;
 }
 export { GridEditDateCell };
-export declare const renderEditDateCell: (params: GridRenderEditCellParams) => JSX.Element;
+export declare const renderEditDateCell: (params: GridRenderEditCellParams) => React.JSX.Element;

package/components/cell/GridEditInputCell.d.ts

@@ -13,4 +13,4 @@ export interface GridEditInputCellProps extends GridRenderEditCellParams, Omit<I
 }
 declare const GridEditInputCell: React.ForwardRefExoticComponent<Omit<GridEditInputCellProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { GridEditInputCell };
-export declare const renderEditInputCell: (params: GridEditInputCellProps) => JSX.Element;
+export declare const renderEditInputCell: (params: GridEditInputCellProps) => React.JSX.Element;

package/components/cell/GridEditInputCell.js

@@ -88,7 +88,10 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
     onChange: handleChange,
-    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {}) : undefined
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+      fontSize: "small",
+      color: "action"
+    }) : undefined
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { GridSingleSelectColDef } from '../../models/colDef/gridColDef';
@@ -15,9 +15,9 @@ export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams,
      */
     initialOpen?: boolean;
 }
-declare function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps): JSX.Element | null;
+declare function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps): React.JSX.Element | null;
 declare namespace GridEditSingleSelectCell {
     var propTypes: any;
 }
 export { GridEditSingleSelectCell };
-export declare const renderEditSingleSelectCell: (params: GridEditSingleSelectCellProps) => JSX.Element;
+export declare const renderEditSingleSelectCell: (params: GridEditSingleSelectCellProps) => React.JSX.Element;

package/components/cell/GridEditSingleSelectCell.js

@@ -5,6 +5,7 @@ const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowN
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
@@ -90,11 +91,10 @@ function GridEditSingleSelectCell(props) {
       return;
     }
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      apiRef.current.stopCellEditMode({
-        id,
-        field,
-        ignoreModifications: true
-      });
+      const params = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
+        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+      }));
     }
   };
   const handleOpen = event => {

package/components/cell/GridSkeletonCell.d.ts

@@ -5,7 +5,7 @@ export interface GridSkeletonCellProps {
     field: string;
     align: string;
 }
-declare function GridSkeletonCell(props: React.HTMLAttributes<HTMLDivElement> & GridSkeletonCellProps): JSX.Element;
+declare function GridSkeletonCell(props: React.HTMLAttributes<HTMLDivElement> & GridSkeletonCellProps): React.JSX.Element;
 declare namespace GridSkeletonCell {
     var propTypes: any;
 }

package/components/columnHeaders/ColumnHeaderMenuIcon.d.ts

@@ -7,4 +7,4 @@ export interface ColumnHeaderMenuIconProps {
     open: boolean;
     iconButtonRef: React.RefObject<HTMLButtonElement>;
 }
-export declare const ColumnHeaderMenuIcon: React.MemoExoticComponent<(props: ColumnHeaderMenuIconProps) => JSX.Element>;
+export declare const ColumnHeaderMenuIcon: React.MemoExoticComponent<(props: ColumnHeaderMenuIconProps) => React.JSX.Element>;

package/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -49,9 +49,9 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
         "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
         size: "small",
         onClick: handleMenuIconClick,
-        "aria-expanded": open ? 'true' : undefined,
-        "aria-haspopup": "true",
-        "aria-controls": columnMenuId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? columnMenuId : undefined,
         id: columnMenuButtonId
       }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {

package/components/columnHeaders/GridColumnGroupHeader.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface GridColumnGroupHeaderProps {
     groupId: string | null;
     width: number;
@@ -11,5 +11,5 @@ interface GridColumnGroupHeaderProps {
     hasFocus?: boolean;
     tabIndex: 0 | -1;
 }
-declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): JSX.Element;
+declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): React.JSX.Element;
 export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnHeaderFilterIconButton.d.ts

@@ -5,7 +5,7 @@ export interface ColumnHeaderFilterIconButtonProps {
     counter?: number;
     onClick?: (params: GridColumnHeaderParams, event: React.MouseEvent<HTMLButtonElement>) => void;
 }
-declare function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonProps): JSX.Element | null;
+declare function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonProps): React.JSX.Element | null;
 declare namespace GridColumnHeaderFilterIconButton {
     var propTypes: any;
 }

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import Badge from '@mui/material/Badge';
+import { useGridSelector } from '../../hooks';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -33,6 +34,9 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
+  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const labelId = useId();
+  const panelId = useId();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -43,21 +47,26 @@ function GridColumnHeaderFilterIconButton(props) {
     if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
       apiRef.current.hideFilterPanel();
     } else {
-      apiRef.current.showFilterPanel();
+      apiRef.current.showFilterPanel(undefined, panelId, labelId);
     }
     if (onClick) {
       onClick(apiRef.current.getColumnHeaderParams(field), event);
     }
-  }, [apiRef, field, onClick]);
+  }, [apiRef, field, onClick, panelId, labelId]);
   if (!counter) {
     return null;
   }
+  const open = preferencePanel.open && preferencePanel.labelId === labelId;
   const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    id: labelId,
     onClick: toggleFilter,
     color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? panelId : undefined
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,

package/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridStateColDef } from '../../models/colDef/gridColDef';
 import { GridSortDirection } from '../../models/gridSortModel';
 import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
@@ -17,7 +17,7 @@ interface GridColumnHeaderItemProps {
     disableReorder?: boolean;
     separatorSide?: GridColumnHeaderSeparatorProps['side'];
 }
-declare function GridColumnHeaderItem(props: GridColumnHeaderItemProps): JSX.Element;
+declare function GridColumnHeaderItem(props: GridColumnHeaderItemProps): React.JSX.Element;
 declare namespace GridColumnHeaderItem {
     var propTypes: any;
 }

package/components/columnHeaders/GridColumnHeaderSeparator.d.ts

@@ -9,7 +9,7 @@ export interface GridColumnHeaderSeparatorProps extends React.HTMLAttributes<HTM
     height: number;
     side?: GridColumnHeaderSeparatorSides;
 }
-declare function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps): JSX.Element;
+declare function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps): React.JSX.Element;
 declare namespace GridColumnHeaderSeparatorRaw {
     var propTypes: any;
 }

package/components/columnHeaders/GridColumnHeaderSortIcon.d.ts

@@ -5,7 +5,7 @@ export interface GridColumnHeaderSortIconProps {
     index: number | undefined;
     sortingOrder: GridSortDirection[];
 }
-declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): JSX.Element | null;
+declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): React.JSX.Element | null;
 declare namespace GridColumnHeaderSortIconRaw {
     var propTypes: any;
 }

package/components/columnHeaders/GridColumnHeaderTitle.d.ts

@@ -4,7 +4,7 @@ export interface GridColumnHeaderTitleProps {
     columnWidth: number;
     description?: React.ReactNode;
 }
-declare function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps): JSX.Element;
+declare function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps): React.JSX.Element;
 declare namespace GridColumnHeaderTitle {
     var propTypes: any;
 }