@mui/x-data-grid 6.5.0 → 6.7.0

package/legacy/components/containers/GridRootStyles.js

@@ -16,11 +16,11 @@ export var GridRootStyles = styled('div', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), styles['root--disableUserSelection']), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
-    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
+    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.headerFilterRow), styles.headerFilterRow), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
-})(function (_ref57) {
+})(function (_ref58) {
   var _$concat2, _$concat3, _extends2;
-  var theme = _ref57.theme;
+  var theme = _ref58.theme;
   var borderColor = getBorderColor(theme);
   var radius = theme.shape.borderRadius;
   var gridStyle = _extends({
@@ -39,7 +39,9 @@ export var GridRootStyles = 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'
   }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
@@ -100,6 +102,8 @@ export var GridRootStyles = styled('div', {
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     boxSizing: 'border-box'
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.headerFilterRow), {
+    borderTop: "1px solid ".concat(borderColor)
   }), _defineProperty(_extends2, "& .".concat(gridClasses.sortIcon, ", & .").concat(gridClasses.filterIcon), {
     fontSize: 'inherit'
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--sortable']), {

package/legacy/components/index.js

@@ -15,5 +15,4 @@ export * from './GridNoRowsOverlay';
 export * from './GridPagination';
 export * from './GridRowCount';
 export * from './GridRow';
-export * from './GridSelectedRowCount';
-export * from './GridScrollArea';
+export * from './GridSelectedRowCount';

package/legacy/components/panel/GridColumnsPanel.js

@@ -218,8 +218,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.bool,
+  /**
+   * If `true`, the `Hide all` button will not be displayed.
+   * @default false
+   */
   disableHideAllButton: PropTypes.bool,
+  /**
+   * If `true`, the `Show all` button will be disabled
+   * @default false
+   */
   disableShowAllButton: PropTypes.bool,
   /**
    * Returns the list of togglable columns.

package/legacy/components/panel/GridPreferencesPanel.js

@@ -17,7 +17,9 @@ export var GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPre
   return /*#__PURE__*/_jsx(rootProps.slots.panel, _extends({
     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 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.panel, props, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.basePopper, {
     children: panelContent
   }));

package/legacy/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "label"];
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -9,18 +10,19 @@ import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var BooleanOperatorContainer = styled('div')({
+var BooleanOperatorContainer = styled('div')(_defineProperty({
   display: 'flex',
-  alignItems: 'flex-end',
+  alignItems: 'center',
   width: '100%'
-});
+}, "& button", {
+  margin: 'auto 0px 5px 5px'
+}));
 function GridFilterInputBoolean(props) {
   var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
   var item = props.item,
     applyValue = props.applyValue,
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
-    headerFilterMenu = props.headerFilterMenu,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     tabIndex = props.tabIndex,
@@ -64,7 +66,6 @@ function GridFilterInputBoolean(props) {
         variant: "standard",
         native: isSelectNative,
         displayEmpty: true,
-        startAdornment: isFilterActive ? headerFilterMenu : null,
         inputProps: {
           ref: focusElementRef,
           tabIndex: tabIndex
@@ -100,7 +101,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any.isRequired
   })]),
-  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

package/legacy/components/panel/filterPanel/GridFilterInputDate.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "disabled"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -16,7 +16,6 @@ function GridFilterInputDate(props) {
     apiRef = props.apiRef,
     focusElementRef = props.focusElementRef,
     InputProps = props.InputProps,
-    headerFilterMenu = props.headerFilterMenu,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     tabIndex = props.tabIndex,
@@ -73,8 +72,6 @@ function GridFilterInputDate(props) {
         fontSize: "small",
         color: "action"
       }) : clearButton
-    } : {}, headerFilterMenu && isFilterActive ? {
-      startAdornment: headerFilterMenu
     } : {}, {
       disabled: disabled
     }, InputProps, {
@@ -96,7 +93,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
-  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

package/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,8 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "headerFilterMenu", "isFilterActive", "clearButton"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -34,11 +35,13 @@ var renderSingleSelectOptions = function renderSingleSelectOptions(_ref) {
     }), label);
   });
 };
-var SingleSelectOperatorContainer = styled('div')({
+var SingleSelectOperatorContainer = styled('div')(_defineProperty({
   display: 'flex',
   alignItems: 'flex-end',
   width: '100%'
-});
+}, "& button", {
+  margin: 'auto 0px 5px 5px'
+}));
 function GridFilterInputSingleSelect(props) {
   var _item$value, _rootProps$slotProps$, _rootProps$slotProps, _rootProps$slotProps$2, _resolvedColumn, _resolvedColumn2, _rootProps$slotProps2, _rootProps$slotProps3, _rootProps$slotProps4;
   var item = props.item,
@@ -51,7 +54,6 @@ function GridFilterInputSingleSelect(props) {
     placeholder = props.placeholder,
     tabIndex = props.tabIndex,
     labelProp = props.label,
-    headerFilterMenu = props.headerFilterMenu,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     others = _objectWithoutProperties(props, _excluded);
@@ -119,6 +121,7 @@ function GridFilterInputSingleSelect(props) {
     children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseInputLabel, {
         id: labelId,
+        htmlFor: id,
         shrink: true,
         variant: "standard",
         children: label
@@ -128,7 +131,6 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValueState,
         onChange: onFilterChange,
-        startAdornment: isFilterActive ? headerFilterMenu : null,
         variant: "standard",
         type: type || 'text',
         inputProps: {
@@ -173,7 +175,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
    * @returns {string} The value to be used.
    */
   getOptionValue: PropTypes.func,
-  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

package/legacy/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
+var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -17,7 +17,6 @@ function GridFilterInputValue(props) {
     focusElementRef = props.focusElementRef,
     tabIndex = props.tabIndex,
     disabled = props.disabled,
-    headerFilterMenu = props.headerFilterMenu,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     InputProps = props.InputProps,
@@ -68,8 +67,6 @@ function GridFilterInputValue(props) {
         fontSize: "small",
         color: "action"
       }) : clearButton
-    } : {}, headerFilterMenu && isFilterActive ? {
-      startAdornment: headerFilterMenu
     } : {}, {
       disabled: disabled
     }, InputProps, {
@@ -94,7 +91,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
-  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

package/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -188,7 +188,15 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    * If not specified, the order is derived from the `columns` prop.
    */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
   disableAddFilterButton: PropTypes.bool,
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
   disableRemoveAllButton: PropTypes.bool,
   /**
    * Props passed to each filter form.

package/legacy/components/toolbar/GridToolbarColumnsButton.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["onClick"];
 import * as React from 'react';
+import { unstable_useId as useId } from '@mui/material/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
@@ -12,16 +13,16 @@ export var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function Gri
   var _rootProps$slotProps;
   var onClick = props.onClick,
     other = _objectWithoutProperties(props, _excluded);
+  var columnButtonId = useId();
+  var columnPanelId = useId();
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var _useGridSelector = useGridSelector(apiRef, gridPreferencePanelStateSelector),
-    open = _useGridSelector.open,
-    openedPanelValue = _useGridSelector.openedPanelValue;
+  var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   var showColumns = function showColumns(event) {
-    if (open && openedPanelValue === GridPreferencePanelsValue.columns) {
+    if (preferencePanel.open && preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();
     } else {
-      apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
+      apiRef.current.showPreferences(GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
     onClick == null ? void 0 : onClick(event);
   };
@@ -30,10 +31,15 @@ export var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function Gri
   if (rootProps.disableColumnSelector) {
     return null;
   }
+  var isOpen = preferencePanel.open && preferencePanel.panelId === columnPanelId;
   return /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
     ref: ref,
+    id: columnButtonId,
     size: "small",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? columnPanelId : undefined,
     startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
   }, other, {
     onClick: showColumns

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -102,9 +102,9 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
-      "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-controls": densityMenuId,
+      "aria-expanded": open,
+      "aria-controls": open ? densityMenuId : undefined,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -19,8 +19,8 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
     other = _objectWithoutProperties(props, _excluded);
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var buttonId = useId();
-  var menuId = useId();
+  var exportButtonId = useId();
+  var exportMenuId = useId();
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     open = _React$useState2[0],
@@ -60,11 +60,11 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
       ref: handleRef,
       size: "small",
       startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
-      "aria-expanded": open ? 'true' : undefined,
+      "aria-expanded": open,
       "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
       "aria-haspopup": "menu",
-      "aria-labelledby": menuId,
-      id: buttonId
+      "aria-controls": open ? exportMenuId : undefined,
+      id: exportButtonId
     }, other, {
       onClick: handleMenuOpen
     }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
@@ -75,9 +75,9 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
       onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
-        id: menuId,
+        id: exportMenuId,
         className: gridClasses.menuList,
-        "aria-labelledby": buttonId,
+        "aria-labelledby": exportButtonId,
         onKeyDown: handleListKeyDown,
         autoFocusItem: open,
         children: React.Children.map(children, function (child) {

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -4,7 +4,7 @@ var _excluded = ["componentsProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
 import Badge from '@mui/material/Badge';
 import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -26,7 +26,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 var GridToolbarFilterListRoot = styled('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
-  overridesResolver: function overridesResolver(props, styles) {
+  overridesResolver: function overridesResolver(_props, styles) {
     return styles.toolbarFilterList;
   }
 })(function (_ref) {
@@ -48,6 +48,8 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
   var lookup = useGridSelector(apiRef, gridColumnLookupSelector);
   var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   var classes = useUtilityClasses(rootProps);
+  var filterButtonId = useId();
+  var filterPanelId = useId();
   var tooltipContentNode = React.useMemo(function () {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');
@@ -86,9 +88,9 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
     var open = preferencePanel.open,
       openedPanelValue = preferencePanel.openedPanelValue;
     if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
-      apiRef.current.hideFilterPanel();
+      apiRef.current.hidePreferences();
     } else {
-      apiRef.current.showFilterPanel();
+      apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
     }
     (_buttonProps$onClick = buttonProps.onClick) == null ? void 0 : _buttonProps$onClick.call(buttonProps, event);
   };
@@ -97,14 +99,19 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
   if (rootProps.disableColumnFilter) {
     return null;
   }
+  var isOpen = preferencePanel.open && preferencePanel.panelId === filterPanelId;
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
   }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
+      id: filterButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
+      "aria-controls": isOpen ? filterPanelId : undefined,
+      "aria-expanded": isOpen,
+      "aria-haspopup": true,
       startIcon: /*#__PURE__*/_jsx(Badge, {
         badgeContent: activeFilters.length,
         color: "primary",

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/legacy/constants/localeTextConstants.js

@@ -82,10 +82,10 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   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>': 'Greater than',
+  'headerFilterOperator>=': 'Greater than or equal to',
+  'headerFilterOperator<': 'Less than',
+  'headerFilterOperator<=': 'Less than or equal to',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

package/legacy/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -7,7 +7,8 @@ export var GRID_DEFAULT_STRATEGY = 'none';
 export var GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
   filtering: 'rowTree',
-  sorting: 'rowTree'
+  sorting: 'rowTree',
+  visibleRowsLookupCreation: 'rowTree'
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)

package/legacy/hooks/features/filter/gridFilterSelector.js

@@ -27,12 +27,12 @@ export var gridQuickFilterValuesSelector = createSelector(gridFilterModelSelecto
 });
 
 /**
- * @category Filtering
+ * @category Visible rows
  * @ignore - do not document.
  */
-export var gridVisibleRowsLookupSelector = createSelector(gridFilterStateSelector, function (filterState) {
-  return filterState.visibleRowsLookup;
-});
+export var gridVisibleRowsLookupSelector = function gridVisibleRowsLookupSelector(state) {
+  return state.visibleRowsLookup;
+};
 
 /**
  * @category Filtering

package/legacy/hooks/features/filter/gridFilterState.js

@@ -11,4 +11,10 @@ export var getDefaultGridFilterModel = function getDefaultGridFilterModel() {
 /**
  * @param {GridRowId} rowId The id of the row we want to filter.
  * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
+ */
+
+/**
+ * Visibility status for each row.
+ * A row is visible if it is passing the filters AND if its parents are expanded.
+ * If a row is not registered in this lookup, it is visible.
  */