@mui/x-data-grid 6.5.0 → 6.7.0

package/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuColumnsItem(props: GridColumnMenuItemProps): JSX.Element;
+declare function GridColumnMenuColumnsItem(props: GridColumnMenuItemProps): React.JSX.Element;
 declare namespace GridColumnMenuColumnsItem {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuFilterItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuFilterItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuFilterItem {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuHideItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuHideItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuHideItem {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuManageItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuManageItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuManageItem {
     var propTypes: any;
 }

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '../GridColumnMenuItemProps';
-declare function GridColumnMenuSortItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuSortItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuSortItem {
     var propTypes: any;
 }

package/components/panel/GridColumnsPanel.d.ts

@@ -1,11 +1,25 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridPanelWrapperProps } from './GridPanelWrapper';
 import type { GridColDef } from '../../models/colDef/gridColDef';
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {
     sort?: 'asc' | 'desc';
     searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
+    /**
+     * 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?: boolean;
+    /**
+     * If `true`, the `Hide all` button will not be displayed.
+     * @default false
+     */
     disableHideAllButton?: boolean;
+    /**
+     * If `true`, the `Show all` button will be disabled
+     * @default false
+     */
     disableShowAllButton?: boolean;
     /**
      * Returns the list of togglable columns.
@@ -16,7 +30,7 @@ export interface GridColumnsPanelProps extends GridPanelWrapperProps {
      */
     getTogglableColumns?: (columns: GridColDef[]) => GridColDef['field'][];
 }
-declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;
+declare function GridColumnsPanel(props: GridColumnsPanelProps): React.JSX.Element;
 declare namespace GridColumnsPanel {
     var propTypes: any;
 }

package/components/panel/GridColumnsPanel.js

@@ -198,8 +198,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/components/panel/GridPanelContent.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare function GridPanelContent(props: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace GridPanelContent {
     var propTypes: any;
 }

package/components/panel/GridPanelFooter.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace GridPanelFooter {
     var propTypes: any;
 }

package/components/panel/GridPanelHeader.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare function GridPanelHeader(props: React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace GridPanelHeader {
     var propTypes: any;
 }

package/components/panel/GridPreferencesPanel.js

@@ -17,7 +17,9 @@ export const GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridP
   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/components/panel/filterPanel/GridFilterInputBoolean.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldProps & {
-    headerFilterMenu?: React.ReactNode | null;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -10,7 +9,7 @@ export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldP
      */
     isFilterActive?: boolean;
 };
-declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): JSX.Element;
+declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): React.JSX.Element;
 declare namespace GridFilterInputBoolean {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "label"];
+const _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';
@@ -10,8 +10,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BooleanOperatorContainer = styled('div')({
   display: 'flex',
-  alignItems: 'flex-end',
-  width: '100%'
+  alignItems: 'center',
+  width: '100%',
+  [`& button`]: {
+    margin: 'auto 0px 5px 5px'
+  }
 });
 function GridFilterInputBoolean(props) {
   var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2, _rootProps$slotProps3;
@@ -20,8 +23,6 @@ function GridFilterInputBoolean(props) {
       applyValue,
       apiRef,
       focusElementRef,
-      headerFilterMenu,
-      isFilterActive,
       clearButton,
       tabIndex,
       label: labelProp
@@ -62,7 +63,6 @@ function GridFilterInputBoolean(props) {
         variant: "standard",
         native: isSelectNative,
         displayEmpty: true,
-        startAdornment: isFilterActive ? headerFilterMenu : null,
         inputProps: {
           ref: focusElementRef,
           tabIndex
@@ -98,7 +98,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/components/panel/filterPanel/GridFilterInputDate.d.ts

@@ -3,7 +3,6 @@ import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProps & {
     type?: 'date' | 'datetime-local';
-    headerFilterMenu?: React.ReactNode | null;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -12,7 +11,7 @@ export type GridFilterInputDateProps = GridFilterInputValueProps & TextFieldProp
     isFilterActive?: boolean;
 };
 export declare const SUBMIT_FILTER_DATE_STROKE_TIME = 500;
-declare function GridFilterInputDate(props: GridFilterInputDateProps): JSX.Element;
+declare function GridFilterInputDate(props: GridFilterInputDateProps): React.JSX.Element;
 declare namespace GridFilterInputDate {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputDate.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "disabled"];
+const _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,8 +16,6 @@ function GridFilterInputDate(props) {
       apiRef,
       focusElementRef,
       InputProps,
-      headerFilterMenu,
-      isFilterActive,
       clearButton,
       tabIndex,
       disabled
@@ -68,8 +66,6 @@ function GridFilterInputDate(props) {
         fontSize: "small",
         color: "action"
       }) : clearButton
-    } : {}, headerFilterMenu && isFilterActive ? {
-      startAdornment: headerFilterMenu
     } : {}, {
       disabled
     }, InputProps, {
@@ -91,7 +87,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/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import type { GridSingleSelectColDef, ValueOptions } from '../../../models/colDef/gridColDef';
 export interface GridFilterInputMultipleSingleSelectProps extends Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options' | 'renderInput' | 'onChange' | 'value' | 'id' | 'filterOptions' | 'isOptionEqualToValue' | 'multiple' | 'color' | 'getOptionLabel'>, Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'>, GridFilterInputValueProps {
     type?: 'singleSelect';
 }
-declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): JSX.Element;
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;
 declare namespace GridFilterInputMultipleSingleSelect {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputMultipleValue.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export type GridFilterInputMultipleValueProps = {
     type?: 'text' | 'number';
 } & GridFilterInputValueProps & Omit<AutocompleteProps<string, true, false, true>, 'options' | 'renderInput'>;
-declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): JSX.Element;
+declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;
 declare namespace GridFilterInputMultipleValue {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputSingleSelect.d.ts

@@ -3,7 +3,6 @@ import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps & TextFieldProps & Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'> & {
-    headerFilterMenu?: React.ReactNode | null;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -12,7 +11,7 @@ export type GridFilterInputSingleSelectProps = GridFilterInputValueProps & TextF
     isFilterActive?: boolean;
     type?: 'singleSelect';
 };
-declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): JSX.Element | null;
+declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputSingleSelect {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "headerFilterMenu", "isFilterActive", "clearButton"];
+const _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';
@@ -37,7 +37,10 @@ const renderSingleSelectOptions = ({
 const SingleSelectOperatorContainer = styled('div')({
   display: 'flex',
   alignItems: 'flex-end',
-  width: '100%'
+  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;
@@ -52,8 +55,6 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
-      headerFilterMenu,
-      isFilterActive,
       clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
@@ -118,6 +119,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
@@ -127,7 +129,6 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValueState,
         onChange: onFilterChange,
-        startAdornment: isFilterActive ? headerFilterMenu : null,
         variant: "standard",
         type: type || 'text',
         inputProps: {
@@ -172,7 +173,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/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -4,7 +4,6 @@ import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export declare const SUBMIT_FILTER_STROKE_TIME = 500;
 export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
-    headerFilterMenu?: React.ReactNode | null;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -12,7 +11,7 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFiel
      */
     isFilterActive?: boolean;
 };
-declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): JSX.Element;
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
 declare namespace GridFilterInputValue {
     var propTypes: any;
 }

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
+const _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,8 +17,6 @@ function GridFilterInputValue(props) {
       focusElementRef,
       tabIndex,
       disabled,
-      headerFilterMenu,
-      isFilterActive,
       clearButton,
       InputProps
     } = props,
@@ -65,8 +63,6 @@ function GridFilterInputValue(props) {
         fontSize: "small",
         color: "action"
       }) : clearButton
-    } : {}, headerFilterMenu && isFilterActive ? {
-      startAdornment: headerFilterMenu
     } : {}, {
       disabled
     }, InputProps, {
@@ -91,7 +87,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/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -22,7 +22,15 @@ export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOp
      * Props passed to each filter form.
      */
     filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' | 'filterColumns'>;
+    /**
+     * If `true`, the `Add filter` button will not be displayed.
+     * @default false
+     */
     disableAddFilterButton?: boolean;
+    /**
+     * If `true`, the `Remove all` button will be disabled
+     * @default false
+     */
     disableRemoveAllButton?: boolean;
     /**
      * @ignore - do not document.

package/components/panel/filterPanel/GridFilterPanel.js

@@ -179,7 +179,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/components/toolbar/GridToolbarColumnsButton.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _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';
@@ -14,17 +15,16 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const columnButtonId = useId();
+  const columnPanelId = useId();
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const {
-    open,
-    openedPanelValue
-  } = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const 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);
   };
@@ -33,10 +33,15 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
   if (rootProps.disableColumnSelector) {
     return null;
   }
+  const 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/components/toolbar/GridToolbarDensitySelector.js

@@ -94,9 +94,9 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
       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/components/toolbar/GridToolbarExport.d.ts

@@ -19,7 +19,7 @@ export interface GridToolbarExportProps extends ButtonProps {
     printOptions?: GridPrintExportOptions & GridExportDisplayOptions;
     [key: string]: any;
 }
-export declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): JSX.Element;
-export declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): JSX.Element;
+export declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): React.JSX.Element;
+export declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): React.JSX.Element;
 declare const GridToolbarExport: React.ForwardRefExoticComponent<Omit<GridToolbarExportProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExport };

package/components/toolbar/GridToolbarExportContainer.js

@@ -20,8 +20,8 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const buttonId = useId();
-  const menuId = useId();
+  const exportButtonId = useId();
+  const exportMenuId = useId();
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(ref, buttonRef);
@@ -54,11 +54,11 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
       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, {
@@ -69,9 +69,9 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
       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, child => {

package/components/toolbar/GridToolbarFilterButton.js

@@ -4,7 +4,7 @@ const _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';
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
 const GridToolbarFilterListRoot = styled('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
-  overridesResolver: (props, styles) => styles.toolbarFilterList
+  overridesResolver: (_props, styles) => styles.toolbarFilterList
 })(({
   theme
 }) => ({
@@ -48,6 +48,8 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   const lookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const classes = useUtilityClasses(rootProps);
+  const filterButtonId = useId();
+  const filterPanelId = useId();
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');
@@ -83,9 +85,9 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       openedPanelValue
     } = preferencePanel;
     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);
   };
@@ -94,14 +96,19 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   if (rootProps.disableColumnFilter) {
     return null;
   }
+  const 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/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterModel } from '../../models/gridFilterModel';
 export type GridToolbarQuickFilterProps = TextFieldProps & {
@@ -20,7 +20,7 @@ export type GridToolbarQuickFilterProps = TextFieldProps & {
      */
     debounceMs?: number;
 };
-declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): JSX.Element;
+declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
 declare namespace GridToolbarQuickFilter {
     var propTypes: any;
 }