@mui/x-data-grid 5.11.1 → 5.12.2

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -70,6 +70,7 @@ function GridColumnHeaderItem(props) {
     hasScrollX: false,
     hasScrollY: false
   };
+  const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
   let headerComponent = null;
 
   if (column.renderHeader) {
@@ -100,12 +101,12 @@ function GridColumnHeaderItem(props) {
     onFocus: publish('columnHeaderFocus'),
     onBlur: publish('columnHeaderBlur')
   };
-  const draggableEventHandlers = {
+  const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
     onDragEnd: publish('columnHeaderDragEnd')
-  };
+  } : null;
   const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
   const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
 
@@ -166,6 +167,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  const label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: headerCellRef,
     className: clsx(classes.root, headerClassName),
@@ -178,18 +180,19 @@ function GridColumnHeaderItem(props) {
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
   }, mouseEventsHandlers, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
-      draggable: !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder
+      draggable: isDraggable
     }, draggableEventHandlers, {
       children: [/*#__PURE__*/_jsxs("div", {
         className: classes.titleContainer,
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.titleContainerContent,
-          children: headerComponent || /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-            label: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
+          children: column.renderHeader ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
             description: column.description,
             columnWidth: width
           })

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -85,7 +85,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/components/columnSelection/GridHeaderCheckbox.js

@@ -111,7 +111,6 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/components/containers/GridRootStyles.js

@@ -165,7 +165,7 @@ export const GridRootStyles = styled('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflowX: 'hidden'
     },
     [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',
@@ -221,6 +221,9 @@ export const GridRootStyles = styled('div', {
       },
       [`&.${gridClasses['columnSeparator--resizing']}`]: {
         color: theme.palette.text.primary
+      },
+      '& svg': {
+        pointerEvents: 'none'
       }
     },
     [`& .${gridClasses.iconSeparator}`]: {
@@ -274,10 +277,12 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses.cell}`]: {
       display: 'flex',
       alignItems: 'center',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
       borderBottom: `1px solid ${borderColor}`
     },
+    [`& .${gridClasses.row}:not(.${gridClasses['row--dynamicHeight']}) > .${gridClasses.cell}`]: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    },
     [`& .${gridClasses.cellContent}`]: {
       overflow: 'hidden',
       textOverflow: 'ellipsis'

package/components/menu/GridMenu.js

@@ -13,6 +13,7 @@ import { styled } from '@mui/material/styles';
 import { HTMLElementType } from '@mui/utils';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -56,6 +57,7 @@ const GridMenu = props => {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const prevTarget = React.useRef(target);
   const prevOpen = React.useRef(open);
   const rootProps = useGridRootProps();
@@ -66,11 +68,16 @@ const GridMenu = props => {
   React.useEffect(() => {
     if (prevOpen.current && prevTarget.current) {
       prevTarget.current.focus();
-    }
+    } // Emit menuOpen or menuClose events
+
 
+    const eventName = open ? 'menuOpen' : 'menuClose';
+    apiRef.current.publishEvent(eventName, {
+      target
+    });
     prevOpen.current = open;
     prevTarget.current = target;
-  }, [open, target]);
+  }, [apiRef, open, target]);
 
   const handleExited = popperOnExited => node => {
     if (popperOnExited) {

package/components/panel/GridColumnsPanel.js

@@ -76,8 +76,16 @@ export function GridColumnsPanel(props) {
   };
 
   const toggleAllColumns = React.useCallback(isVisible => {
-    // TODO v6: call `setColumnVisibilityModel` directly
-    apiRef.current.updateColumns(columns.map(col => {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
+      if (isVisible) {
+        return apiRef.current.setColumnVisibilityModel({});
+      }
+
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(col => [col.field, false])));
+    } // TODO v6: Remove
+
+
+    return apiRef.current.updateColumns(columns.map(col => {
       if (col.hideable !== false) {
         return {
           field: col.field,
@@ -127,7 +135,6 @@ export function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                color: "primary",
                 size: "small"
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
@@ -144,13 +151,11 @@ export function GridColumnsPanel(props) {
       })
     }), /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
-        onClick: () => toggleAllColumns(false),
-        color: "primary"
+        onClick: () => toggleAllColumns(false)
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
-        onClick: () => toggleAllColumns(true),
-        color: "primary"
+        onClick: () => toggleAllColumns(true)
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]

package/components/panel/GridPanelWrapper.d.ts

@@ -3,5 +3,5 @@ import { Theme } from '@mui/material/styles';
 import { MUIStyledCommonProps } from '@mui/system';
 export interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>, MUIStyledCommonProps<Theme> {
 }
-declare function GridPanelWrapper(props: GridPanelWrapperProps): JSX.Element;
+declare const GridPanelWrapper: React.ForwardRefExoticComponent<GridPanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
 export { GridPanelWrapper };

package/components/panel/GridPanelWrapper.js

@@ -35,7 +35,7 @@ const GridPanelWrapperRoot = styled('div', {
 
 const isEnabled = () => true;
 
-function GridPanelWrapper(props) {
+const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
     className
   } = props,
@@ -51,10 +51,10 @@ function GridPanelWrapper(props) {
     disableEnforceFocus: true,
     isEnabled: isEnabled,
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
+      ref: ref,
       tabIndex: -1,
       className: clsx(className, classes.root)
     }, other))
   });
-}
-
+});
 export { GridPanelWrapper };

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

@@ -1,25 +1,82 @@
 import * as React from 'react';
 import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem';
 export interface GridFilterFormProps {
+    /**
+     * The [[GridFilterItem]] representing this form.
+     */
     item: GridFilterItem;
+    /**
+     * If `true`, the logic operator field is rendered.
+     * The field will be invisible if `showMultiFilterOperators` is also `true`.
+     */
     hasMultipleFilters: boolean;
+    /**
+     * If `true`, the logic operator field is visible.
+     */
     showMultiFilterOperators?: boolean;
+    /**
+     * The current logic operator applied.
+     */
     multiFilterOperator?: GridLinkOperator;
+    /**
+     * If `true`, disables the logic operator field but still renders it.
+     */
     disableMultiFilterOperator?: boolean;
+    /**
+     * A ref allowing to set imperative focus.
+     * It can be passed to the el
+     */
     focusElementRef?: React.Ref<any>;
+    /**
+     * Callback called when the operator, column field or value is changed.
+     * @param {GridFilterItem} item The updated [[GridFilterItem]].
+     */
     applyFilterChanges: (item: GridFilterItem) => void;
+    /**
+     * Callback called when the logic operator is changed.
+     * @param {GridLinkOperator} operator The new logic operator.
+     */
     applyMultiFilterOperatorChanges: (operator: GridLinkOperator) => void;
+    /**
+     * Callback called when the delete button is clicked.
+     * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+     */
     deleteFilter: (item: GridFilterItem) => void;
+    /**
+     * Sets the available logic operators.
+     * @default [GridLinkOperator.And, GridLinkOperator.Or]
+     */
     linkOperators?: GridLinkOperator[];
+    /**
+     * Changes how the options in the columns selector should be ordered.
+     * If not specified, the order is derived from the `columns` prop.
+     */
     columnsSort?: 'asc' | 'desc';
+    /**
+     * Props passed to the delete icon.
+     * @default {}
+     */
     deleteIconProps?: any;
+    /**
+     * Props passed to the logic operator input component.
+     * @default {}
+     */
     linkOperatorInputProps?: any;
+    /**
+     * Props passed to the operator input component.
+     * @default {}
+     */
     operatorInputProps?: any;
+    /**
+     * Props passed to the column input component.
+     * @default {}
+     */
     columnInputProps?: any;
+    /**
+     * Props passed to the value input component.
+     * @default {}
+     */
     valueInputProps?: any;
 }
-declare function GridFilterForm(props: GridFilterFormProps): JSX.Element;
-declare namespace GridFilterForm {
-    var propTypes: any;
-}
+declare const GridFilterForm: React.ForwardRefExoticComponent<GridFilterFormProps & React.RefAttributes<HTMLDivElement>>;
 export { GridFilterForm };

package/components/panel/filterPanel/GridFilterForm.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -102,8 +104,7 @@ const getLinkOperatorLocaleKey = linkOperator => {
 const getColumnLabel = col => col.headerName || col.field;
 
 const collator = new Intl.Collator();
-
-function GridFilterForm(props) {
+const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
   var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
 
   const {
@@ -123,7 +124,9 @@ function GridFilterForm(props) {
     operatorInputProps = {},
     columnInputProps = {},
     valueInputProps = {}
-  } = props;
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
   const apiRef = useGridApiContext();
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
   const columnSelectId = useId();
@@ -223,8 +226,10 @@ function GridFilterForm(props) {
       }
     }
   }), [currentOperator]);
-  return /*#__PURE__*/_jsxs(GridFilterFormRoot, {
-    className: classes.root,
+  return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
+    ref: ref,
+    className: classes.root
+  }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
@@ -319,36 +324,111 @@ function GridFilterForm(props) {
         focusElementRef: valueRef
       }, currentOperator.InputComponentProps)) : null
     }))]
-  });
-}
-
+  }));
+});
 process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+
+  /**
+   * Callback called when the operator, column field or value is changed.
+   * @param {GridFilterItem} item The updated [[GridFilterItem]].
+   */
   applyFilterChanges: PropTypes.func.isRequired,
+
+  /**
+   * Callback called when the logic operator is changed.
+   * @param {GridLinkOperator} operator The new logic operator.
+   */
   applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
+
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
   columnInputProps: PropTypes.any,
+
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Callback called when the delete button is clicked.
+   * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+   */
   deleteFilter: PropTypes.func.isRequired,
+
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
   deleteIconProps: PropTypes.any,
+
+  /**
+   * If `true`, disables the logic operator field but still renders it.
+   */
   disableMultiFilterOperator: PropTypes.bool,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
   hasMultipleFilters: PropTypes.bool.isRequired,
+
+  /**
+   * The [[GridFilterItem]] representing this form.
+   */
   item: PropTypes.shape({
     columnField: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operatorValue: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
+
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
   linkOperatorInputProps: PropTypes.any,
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The current logic operator applied.
+   */
   multiFilterOperator: PropTypes.oneOf(['and', 'or']),
+
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
   operatorInputProps: PropTypes.any,
+
+  /**
+   * If `true`, the logic operator field is visible.
+   */
   showMultiFilterOperators: PropTypes.bool,
+
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
   valueInputProps: PropTypes.any
 } : void 0;
 export { GridFilterForm };

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -84,7 +84,6 @@ function GridFilterInputMultipleSingleSelect(props) {
   }, [applyValue, item]);
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
-    freeSolo: false,
     limitTags: 1,
     options: resolvedValueOptions // TODO: avoid `any`?
     ,

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

@@ -1,12 +1,15 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { GridFilterFormProps } from './GridFilterForm';
 export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'linkOperators' | 'columnsSort'> {
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
     sx?: SxProps<Theme>;
+    /**
+     * Props passed to each filter form.
+     */
     filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'linkOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps'>;
 }
-declare function GridFilterPanel(props: GridFilterPanelProps): JSX.Element;
-declare namespace GridFilterPanel {
-    var propTypes: any;
-}
+declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
 export { GridFilterPanel };

package/components/panel/filterPanel/GridFilterPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["linkOperators", "columnsSort", "filterFormProps"];
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -16,8 +16,7 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-function GridFilterPanel(props) {
+const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   var _rootProps$components;
 
   const apiRef = useGridApiContext();
@@ -73,9 +72,7 @@ function GridFilterPanel(props) {
       return;
     }
 
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: [...items, defaultItem]
-    }));
+    apiRef.current.upsertFilterItems([...items, defaultItem]);
   };
 
   const deleteFilter = React.useCallback(item => {
@@ -96,7 +93,9 @@ function GridFilterPanel(props) {
       lastFilterRef.current.focus();
     }
   }, [items.length]);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
+    ref: ref
+  }, other, {
     children: [/*#__PURE__*/_jsx(GridPanelContent, {
       children: items.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
         item: item,
@@ -114,21 +113,28 @@ function GridFilterPanel(props) {
     }), !rootProps.disableMultipleColumnsFiltering && /*#__PURE__*/_jsx(GridPanelFooter, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: addNewFilter,
-        startIcon: /*#__PURE__*/_jsx(GridAddIcon, {}),
-        color: "primary"
+        startIcon: /*#__PURE__*/_jsx(GridAddIcon, {})
       }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
       }))
     })]
   }));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Props passed to each filter form.
+   */
   filterFormProps: PropTypes.shape({
     columnInputProps: PropTypes.any,
     columnsSort: PropTypes.oneOf(['asc', 'desc']),
@@ -137,7 +143,16 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     operatorInputProps: PropTypes.any,
     valueInputProps: PropTypes.any
   }),
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridFilterPanel };

package/components/toolbar/GridToolbarColumnsButton.js

@@ -41,7 +41,6 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
   return /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
     ref: ref,
     size: "small",
-    color: "primary",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
     startIcon: /*#__PURE__*/_jsx(rootProps.components.ColumnSelectorIcon, {})
   }, other, {

package/components/toolbar/GridToolbarDensitySelector.js

@@ -95,7 +95,6 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),

package/components/toolbar/GridToolbarExportContainer.js

@@ -52,7 +52,6 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: /*#__PURE__*/_jsx(rootProps.components.ExportIcon, {}),
       "aria-expanded": open ? 'true' : undefined,

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -10,5 +10,5 @@ export interface GridToolbarFilterButtonProps extends Omit<TooltipProps, 'title'
         button?: ButtonProps;
     };
 }
-declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<Pick<GridToolbarFilterButtonProps, "hidden" | "color" | "style" | "open" | "translate" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onClose" | "sx" | "classes" | "componentsProps" | "components" | "TransitionComponent" | "TransitionProps" | "onOpen" | "placement" | "arrow" | "describeChild" | "disableFocusListener" | "disableHoverListener" | "disableInteractive" | "disableTouchListener" | "enterDelay" | "enterNextDelay" | "enterTouchDelay" | "followCursor" | "leaveDelay" | "leaveTouchDelay" | "PopperComponent" | "PopperProps"> & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<Pick<GridToolbarFilterButtonProps, "hidden" | "color" | "style" | "open" | "translate" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onClose" | "sx" | "classes" | "components" | "componentsProps" | "TransitionComponent" | "TransitionProps" | "onOpen" | "placement" | "arrow" | "describeChild" | "disableFocusListener" | "disableHoverListener" | "disableInteractive" | "disableTouchListener" | "enterDelay" | "enterNextDelay" | "enterTouchDelay" | "followCursor" | "leaveDelay" | "leaveTouchDelay" | "PopperComponent" | "PopperProps"> & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarFilterButton };

package/components/toolbar/GridToolbarFilterButton.js

@@ -108,7 +108,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     children: /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: ref,
       size: "small",
-      color: "primary",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       startIcon: /*#__PURE__*/_jsx(Badge, {
         badgeContent: activeFilters.length,