@mui/x-data-grid 6.5.0 → 6.7.0

package/modern/locales/skSK.js

@@ -68,12 +68,12 @@ const skSKGrid = {
   filterOperatorIsEmpty: 'je prázdny',
   filterOperatorIsNotEmpty: 'nie je prázdny',
   filterOperatorIsAnyOf: 'je jeden z',
-  // filterOperator=: '=',
-  // filterOperator!=: '!=',
-  // filterOperator>: '>',
-  // filterOperator>=: '>=',
-  // filterOperator<: '<',
-  // filterOperator<=: '<=',
+  // 'filterOperator=': '=',
+  // 'filterOperator!=': '!=',
+  // 'filterOperator>': '>',
+  // 'filterOperator>=': '>=',
+  // 'filterOperator<': '<',
+  // 'filterOperator<=': '<=',
 
   // Header filter operators text
   // headerFilterOperatorContains: 'Contains',
@@ -89,12 +89,12 @@ const skSKGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // headerFilterOperator=: 'Equals',
-  // headerFilterOperator!=: 'Not equals',
-  // headerFilterOperator>: 'Is greater than',
-  // headerFilterOperator>=: 'Is greater than or equal to',
-  // headerFilterOperator<: 'Is less than',
-  // headerFilterOperator<=: 'Is less than or equal to',
+  // 'headerFilterOperator=': 'Equals',
+  // 'headerFilterOperator!=': 'Not equals',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'akýkoľvek',

package/modern/locales/svSE.js

@@ -60,12 +60,12 @@ const svSEGrid = {
   filterOperatorIsEmpty: 'är tom',
   filterOperatorIsNotEmpty: 'är inte tom',
   filterOperatorIsAnyOf: 'är någon av',
-  // filterOperator=: '=',
-  // filterOperator!=: '!=',
-  // filterOperator>: '>',
-  // filterOperator>=: '>=',
-  // filterOperator<: '<',
-  // filterOperator<=: '<=',
+  // 'filterOperator=': '=',
+  // 'filterOperator!=': '!=',
+  // 'filterOperator>': '>',
+  // 'filterOperator>=': '>=',
+  // 'filterOperator<': '<',
+  // 'filterOperator<=': '<=',
 
   // Header filter operators text
   // headerFilterOperatorContains: 'Contains',
@@ -81,12 +81,12 @@ const svSEGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // headerFilterOperator=: 'Equals',
-  // headerFilterOperator!=: 'Not equals',
-  // headerFilterOperator>: 'Is greater than',
-  // headerFilterOperator>=: 'Is greater than or equal to',
-  // headerFilterOperator<: 'Is less than',
-  // headerFilterOperator<=: 'Is less than or equal to',
+  // 'headerFilterOperator=': 'Equals',
+  // 'headerFilterOperator!=': 'Not equals',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'något',

package/modern/locales/trTR.js

@@ -60,18 +60,17 @@ const trTRGrid = {
   filterOperatorIsEmpty: 'boş',
   filterOperatorIsNotEmpty: 'dolu',
   filterOperatorIsAnyOf: 'herhangi biri',
-  // filterOperator=: '=',
-  // filterOperator!=: '!=',
-  // filterOperator>: '>',
-  // filterOperator>=: '>=',
-  // filterOperator<: '<',
-  // filterOperator<=: '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorContains: 'Şunu içerir',
+  headerFilterOperatorEquals: 'Şuna eşittir',
+  headerFilterOperatorStartsWith: 'Şununla başlar',
+  headerFilterOperatorEndsWith: 'Şununla biter',
   // headerFilterOperatorIs: 'Is',
   // headerFilterOperatorNot: 'Is not',
   // headerFilterOperatorAfter: 'Is after',
@@ -81,12 +80,12 @@ const trTRGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // headerFilterOperator=: 'Equals',
-  // headerFilterOperator!=: 'Not equals',
-  // headerFilterOperator>: 'Is greater than',
-  // headerFilterOperator>=: 'Is greater than or equal to',
-  // headerFilterOperator<: 'Is less than',
-  // headerFilterOperator<=: 'Is less than or equal to',
+  // 'headerFilterOperator=': 'Equals',
+  // 'headerFilterOperator!=': 'Not equals',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'herhangi',
@@ -96,9 +95,9 @@ const trTRGrid = {
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Sütunları göster',
   columnMenuManageColumns: 'Sütunları yönet',
-  columnMenuFilter: 'Filtre uygula',
+  columnMenuFilter: 'Filtre Ekle',
   columnMenuHideColumn: 'Gizle',
-  columnMenuUnsort: 'Sıralama',
+  columnMenuUnsort: 'Varsayılan Sıralama',
   columnMenuSortAsc: 'Sırala - Artan',
   columnMenuSortDesc: 'Sırala - Azalan',
   // Column header text

package/modern/locales/ukUA.js

@@ -74,12 +74,12 @@ const ukUAGrid = {
   filterOperatorIsEmpty: 'порожній',
   filterOperatorIsNotEmpty: 'не порожній',
   filterOperatorIsAnyOf: 'будь-що із',
-  // filterOperator=: '=',
-  // filterOperator!=: '!=',
-  // filterOperator>: '>',
-  // filterOperator>=: '>=',
-  // filterOperator<: '<',
-  // filterOperator<=: '<=',
+  // 'filterOperator=': '=',
+  // 'filterOperator!=': '!=',
+  // 'filterOperator>': '>',
+  // 'filterOperator>=': '>=',
+  // 'filterOperator<': '<',
+  // 'filterOperator<=': '<=',
 
   // Header filter operators text
   // headerFilterOperatorContains: 'Contains',
@@ -95,12 +95,12 @@ const ukUAGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // headerFilterOperator=: 'Equals',
-  // headerFilterOperator!=: 'Not equals',
-  // headerFilterOperator>: 'Is greater than',
-  // headerFilterOperator>=: 'Is greater than or equal to',
-  // headerFilterOperator<: 'Is less than',
-  // headerFilterOperator<=: 'Is less than or equal to',
+  // 'headerFilterOperator=': 'Equals',
+  // 'headerFilterOperator!=': 'Not equals',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'будь-який',

package/modern/locales/urPK.js

@@ -60,12 +60,12 @@ const urPKGrid = {
   filterOperatorIsEmpty: 'خالی ہے',
   filterOperatorIsNotEmpty: 'خالی نہیں ہے',
   filterOperatorIsAnyOf: 'ان میں سے کوئی ہے',
-  // filterOperator=: '=',
-  // filterOperator!=: '!=',
-  // filterOperator>: '>',
-  // filterOperator>=: '>=',
-  // filterOperator<: '<',
-  // filterOperator<=: '<=',
+  // 'filterOperator=': '=',
+  // 'filterOperator!=': '!=',
+  // 'filterOperator>': '>',
+  // 'filterOperator>=': '>=',
+  // 'filterOperator<': '<',
+  // 'filterOperator<=': '<=',
 
   // Header filter operators text
   // headerFilterOperatorContains: 'Contains',
@@ -81,12 +81,12 @@ const urPKGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // headerFilterOperator=: 'Equals',
-  // headerFilterOperator!=: 'Not equals',
-  // headerFilterOperator>: 'Is greater than',
-  // headerFilterOperator>=: 'Is greater than or equal to',
-  // headerFilterOperator<: 'Is less than',
-  // headerFilterOperator<=: 'Is less than or equal to',
+  // 'headerFilterOperator=': 'Equals',
+  // 'headerFilterOperator!=': 'Not equals',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'کوئی بھی',

package/modern/locales/viVN.js

@@ -60,12 +60,12 @@ const viVNGrid = {
   filterOperatorIsEmpty: 'Rỗng',
   filterOperatorIsNotEmpty: 'Khác rỗng',
   // filterOperatorIsAnyOf: 'is any of',
-  // filterOperator=: '=',
-  // filterOperator!=: '!=',
-  // filterOperator>: '>',
-  // filterOperator>=: '>=',
-  // filterOperator<: '<',
-  // filterOperator<=: '<=',
+  // 'filterOperator=': '=',
+  // 'filterOperator!=': '!=',
+  // 'filterOperator>': '>',
+  // 'filterOperator>=': '>=',
+  // 'filterOperator<': '<',
+  // 'filterOperator<=': '<=',
 
   // Header filter operators text
   // headerFilterOperatorContains: 'Contains',
@@ -81,12 +81,12 @@ const viVNGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // headerFilterOperator=: 'Equals',
-  // headerFilterOperator!=: 'Not equals',
-  // headerFilterOperator>: 'Is greater than',
-  // headerFilterOperator>=: 'Is greater than or equal to',
-  // headerFilterOperator<: 'Is less than',
-  // headerFilterOperator<=: 'Is less than or equal to',
+  // 'headerFilterOperator=': 'Equals',
+  // 'headerFilterOperator!=': 'Not equals',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: 'bất kỳ giá trị nào',

package/modern/locales/zhCN.js

@@ -60,12 +60,12 @@ const zhCNGrid = {
   filterOperatorIsEmpty: '为空',
   filterOperatorIsNotEmpty: '不为空',
   filterOperatorIsAnyOf: '属于',
-  // filterOperator=: '=',
-  // filterOperator!=: '!=',
-  // filterOperator>: '>',
-  // filterOperator>=: '>=',
-  // filterOperator<: '<',
-  // filterOperator<=: '<=',
+  // 'filterOperator=': '=',
+  // 'filterOperator!=': '!=',
+  // 'filterOperator>': '>',
+  // 'filterOperator>=': '>=',
+  // 'filterOperator<': '<',
+  // 'filterOperator<=': '<=',
 
   // Header filter operators text
   // headerFilterOperatorContains: 'Contains',
@@ -81,12 +81,12 @@ const zhCNGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // headerFilterOperator=: 'Equals',
-  // headerFilterOperator!=: 'Not equals',
-  // headerFilterOperator>: 'Is greater than',
-  // headerFilterOperator>=: 'Is greater than or equal to',
-  // headerFilterOperator<: 'Is less than',
-  // headerFilterOperator<=: 'Is less than or equal to',
+  // 'headerFilterOperator=': 'Equals',
+  // 'headerFilterOperator!=': 'Not equals',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: '任何',

package/modern/locales/zhTW.js

@@ -60,12 +60,12 @@ const zhTWGrid = {
   filterOperatorIsEmpty: '為空',
   filterOperatorIsNotEmpty: '不為空',
   filterOperatorIsAnyOf: '是其中之一',
-  // filterOperator=: '=',
-  // filterOperator!=: '!=',
-  // filterOperator>: '>',
-  // filterOperator>=: '>=',
-  // filterOperator<: '<',
-  // filterOperator<=: '<=',
+  // 'filterOperator=': '=',
+  // 'filterOperator!=': '!=',
+  // 'filterOperator>': '>',
+  // 'filterOperator>=': '>=',
+  // 'filterOperator<': '<',
+  // 'filterOperator<=': '<=',
 
   // Header filter operators text
   // headerFilterOperatorContains: 'Contains',
@@ -81,12 +81,12 @@ const zhTWGrid = {
   // headerFilterOperatorIsEmpty: 'Is empty',
   // headerFilterOperatorIsNotEmpty: 'Is not empty',
   // headerFilterOperatorIsAnyOf: 'Is any of',
-  // headerFilterOperator=: 'Equals',
-  // headerFilterOperator!=: 'Not equals',
-  // headerFilterOperator>: 'Is greater than',
-  // headerFilterOperator>=: 'Is greater than or equal to',
-  // headerFilterOperator<: 'Is less than',
-  // headerFilterOperator<=: 'Is less than or equal to',
+  // 'headerFilterOperator=': 'Equals',
+  // 'headerFilterOperator!=': 'Not equals',
+  // 'headerFilterOperator>': 'Greater than',
+  // 'headerFilterOperator>=': 'Greater than or equal to',
+  // 'headerFilterOperator<': 'Less than',
+  // 'headerFilterOperator<=': 'Less than or equal to',
 
   // Filter values text
   filterValueAny: '任何值',

package/modern/models/gridFilterItem.js

@@ -1,7 +1,7 @@
 /**
  * Filter item definition interface.
  * @demos
- *   - [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator)
+ *   - [Custom filter operator](/x/react-data-grid/filtering/customization/#create-a-custom-operator)
  */
 var GridLogicOperator = /*#__PURE__*/function (GridLogicOperator) {
   GridLogicOperator["And"] = "and";

package/modern/utils/EventManager.js

@@ -3,7 +3,7 @@
 // the Node.js (https://nodejs.org/api/events.html) polyfill used by webpack.
 export class EventManager {
   constructor() {
-    this.maxListeners = 10;
+    this.maxListeners = 20;
     this.warnOnce = false;
     this.events = {};
   }
@@ -25,7 +25,7 @@ export class EventManager {
       const collectionSize = collection.highPriority.size + collection.regular.size;
       if (collectionSize > this.maxListeners && !this.warnOnce) {
         this.warnOnce = true;
-        console.warn([`Possible EventEmitter memory leak detected. ${collectionSize} ${eventName} listeners added.`, `Use emitter.setMaxListeners() to increase limit.`].join('\n'));
+        console.warn([`Possible EventEmitter memory leak detected. ${collectionSize} ${eventName} listeners added.`].join('\n'));
       }
     }
   }

package/node/DataGrid/DataGrid.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataGrid = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
@@ -22,15 +23,16 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContextProvider.GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.GridRoot, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {
         VirtualScrollerComponent: _DataGridVirtualScroller.DataGridVirtualScroller
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
@@ -191,6 +193,11 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
     quickFilterValues: _propTypes.default.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: _propTypes.default.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

package/node/components/GridColumnHeaders.js

@@ -10,7 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
-var _GridScrollArea = require("./GridScrollArea");
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
 var _GridColumnHeadersInner = require("./columnHeaders/GridColumnHeadersInner");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -59,18 +58,14 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
     ref: ref
   }, getRootProps(other), {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
-      scrollDirection: "left"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridColumnHeadersInner.GridColumnHeadersInner, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridColumnHeadersInner.GridColumnHeadersInner, (0, _extends2.default)({
       isDragging: isDragging
     }, getInnerProps(), {
       children: [getColumnGroupHeaders(), getColumnHeaders()]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
-      scrollDirection: "right"
-    })]
+    }))
   }));
 });
 exports.GridColumnHeaders = GridColumnHeaders;

package/node/components/cell/GridActionsCell.js

@@ -160,9 +160,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/node/components/cell/GridEditSingleSelectCell.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _gridEditCellParams = require("../../models/params/gridEditCellParams");
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridEditRowModel = require("../../models/gridEditRowModel");
@@ -97,11 +98,10 @@ function GridEditSingleSelectCell(props) {
       return;
     }
     if (reason === 'backdropClick' || (0, _keyboardUtils.isEscapeKey)(event.key)) {
-      apiRef.current.stopCellEditMode({
-        id,
-        field,
-        ignoreModifications: true
-      });
+      const params = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', (0, _extends2.default)({}, params, {
+        reason: (0, _keyboardUtils.isEscapeKey)(event.key) ? _gridEditCellParams.GridCellEditStopReasons.escapeKeyDown : _gridEditCellParams.GridCellEditStopReasons.cellFocusOut
+      }));
     }
   };
   const handleOpen = event => {

package/node/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -57,9 +57,9 @@ 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.slotProps?.baseIconButton, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuIcon, {

package/node/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _hooks = require("../../hooks");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -40,6 +41,9 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
+  const preferencePanel = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
+  const labelId = (0, _utils.unstable_useId)();
+  const panelId = (0, _utils.unstable_useId)();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -50,21 +54,26 @@ function GridColumnHeaderFilterIconButton(props) {
     if (open && openedPanelValue === _gridPreferencePanelsValue.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__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+    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?.baseIconButton, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,

package/node/components/containers/GridRoot.js

@@ -73,9 +73,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    "aria-multiselectable": !rootProps.disableMultipleRowSelection,
-    "aria-label": rootProps['aria-label'],
-    "aria-labelledby": rootProps['aria-labelledby']
+    "aria-multiselectable": !rootProps.disableMultipleRowSelection
   }, other, {
     children: children
   }));

package/node/components/containers/GridRootStyles.js

@@ -84,6 +84,8 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--sorted']}`]: styles['columnHeader--sorted']
   }, {
     [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
+  }, {
+    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: styles.headerFilterRow
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
   }, {
@@ -156,7 +158,9 @@ const GridRootStyles = (0, _styles.styled)('div', {
     outline: 'none',
     height: '100%',
     display: 'flex',
-    overflow: 'hidden',
+    minWidth: 0,
+    // See https://github.com/mui/mui-x/issues/8547
+    minHeight: 0,
     flexDirection: 'column',
     overflowAnchor: 'none',
     // Keep the same scrolling position
@@ -234,6 +238,9 @@ const GridRootStyles = (0, _styles.styled)('div', {
       borderBottomStyle: 'solid',
       boxSizing: 'border-box'
     },
+    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: {
+      borderTop: `1px solid ${borderColor}`
+    },
     [`& .${_gridClasses.gridClasses.sortIcon}, & .${_gridClasses.gridClasses.filterIcon}`]: {
       fontSize: 'inherit'
     },

package/node/components/index.js

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

package/node/components/panel/GridColumnsPanel.js

@@ -202,8 +202,22 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
   autoFocusSearchField: _propTypes.default.bool,
+  /**
+   * If `true`, the `Hide all` button will not be displayed.
+   * @default false
+   */
   disableHideAllButton: _propTypes.default.bool,
+  /**
+   * If `true`, the `Show all` button will be disabled
+   * @default false
+   */
   disableShowAllButton: _propTypes.default.bool,
   /**
    * Returns the list of togglable columns.

package/node/components/panel/GridPreferencesPanel.js

@@ -25,7 +25,9 @@ const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferen
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.panel, (0, _extends2.default)({
     ref: ref,
     as: rootProps.slots.basePopper,
-    open: columns.length > 0 && preferencePanelState.open
+    open: columns.length > 0 && preferencePanelState.open,
+    id: preferencePanelState.panelId,
+    "aria-labelledby": preferencePanelState.labelId
   }, rootProps.slotProps?.panel, props, rootProps.slotProps?.basePopper, {
     children: panelContent
   }));