From 8cead561a3a23fe33947051961fc224ee697439e Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Mon, 25 Nov 2024 12:47:01 +0000
Subject: [PATCH] [DataGrid] Fix order of spread props on toolbar items
 (#15556)

---
 .../toolbar/GridToolbarColumnsButton.tsx      |  4 ++--
 .../toolbar/GridToolbarDensitySelector.tsx    |  4 ++--
 .../toolbar/GridToolbarExportContainer.tsx    |  4 ++--
 .../toolbar/GridToolbarFilterButton.tsx       | 19 +++++++++++++++----
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx
index 67a176845fac..bc5568608b26 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx
@@ -57,8 +57,8 @@ const GridToolbarColumnsButton = React.forwardRef<HTMLButtonElement, GridToolbar
       <rootProps.slots.baseTooltip
         title={apiRef.current.getLocaleText('toolbarColumnsLabel')}
         enterDelay={1000}
-        {...tooltipProps}
         {...rootProps.slotProps?.baseTooltip}
+        {...tooltipProps}
       >
         <rootProps.slots.baseButton
           ref={ref}
@@ -69,9 +69,9 @@ const GridToolbarColumnsButton = React.forwardRef<HTMLButtonElement, GridToolbar
           aria-expanded={isOpen}
           aria-controls={isOpen ? columnPanelId : undefined}
           startIcon={<rootProps.slots.columnSelectorIcon />}
-          {...buttonProps}
           onClick={showColumns}
           {...rootProps.slotProps?.baseButton}
+          {...buttonProps}
         >
           {apiRef.current.getLocaleText('toolbarColumns')}
         </rootProps.slots.baseButton>
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
index 5e185987fa16..243382bccc81 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
@@ -112,8 +112,8 @@ const GridToolbarDensitySelector = React.forwardRef<
       <rootProps.slots.baseTooltip
         title={apiRef.current.getLocaleText('toolbarDensityLabel')}
         enterDelay={1000}
-        {...tooltipProps}
         {...rootProps.slotProps?.baseTooltip}
+        {...tooltipProps}
       >
         <rootProps.slots.baseButton
           ref={handleRef}
@@ -124,9 +124,9 @@ const GridToolbarDensitySelector = React.forwardRef<
           aria-expanded={open}
           aria-controls={open ? densityMenuId : undefined}
           id={densityButtonId}
-          {...buttonProps}
           onClick={handleDensitySelectorOpen}
           {...rootProps.slotProps?.baseButton}
+          {...buttonProps}
         >
           {apiRef.current.getLocaleText('toolbarDensity')}
         </rootProps.slots.baseButton>
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
index 2c00e4ba0b8b..e56ea330eafb 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
@@ -60,8 +60,8 @@ const GridToolbarExportContainer = React.forwardRef<
       <rootProps.slots.baseTooltip
         title={apiRef.current.getLocaleText('toolbarExportLabel')}
         enterDelay={1000}
-        {...tooltipProps}
         {...rootProps.slotProps?.baseTooltip}
+        {...tooltipProps}
       >
         <rootProps.slots.baseButton
           ref={handleRef}
@@ -72,9 +72,9 @@ const GridToolbarExportContainer = React.forwardRef<
           aria-haspopup="menu"
           aria-controls={open ? exportMenuId : undefined}
           id={exportButtonId}
-          {...buttonProps}
           onClick={handleMenuOpen}
           {...rootProps.slotProps?.baseButton}
+          {...buttonProps}
         >
           {apiRef.current.getLocaleText('toolbarExport')}
         </rootProps.slots.baseButton>
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
index 5f7bbb6f473f..29a4a8c637f6 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
@@ -8,6 +8,7 @@ import {
 } from '@mui/utils';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
+import { BadgeProps } from '@mui/material/Badge';
 import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector';
@@ -46,7 +47,11 @@ export interface GridToolbarFilterButtonProps {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps?: { button?: Partial<ButtonProps>; tooltip?: Partial<TooltipProps> };
+  slotProps?: {
+    button?: Partial<ButtonProps>;
+    tooltip?: Partial<TooltipProps>;
+    badge?: Partial<BadgeProps>;
+  };
 }
 
 const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarFilterButtonProps>(
@@ -54,6 +59,7 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
     const { slotProps = {} } = props;
     const buttonProps = slotProps.button || {};
     const tooltipProps = slotProps.tooltip || {};
+    const badgeProps = slotProps.badge || {};
     const apiRef = useGridApiContext();
     const rootProps = useGridRootProps();
     const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
@@ -131,8 +137,8 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
       <rootProps.slots.baseTooltip
         title={tooltipContentNode}
         enterDelay={1000}
-        {...tooltipProps}
         {...rootProps.slotProps?.baseTooltip}
+        {...tooltipProps}
       >
         <rootProps.slots.baseButton
           ref={ref}
@@ -143,13 +149,18 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
           aria-expanded={isOpen}
           aria-haspopup
           startIcon={
-            <rootProps.slots.baseBadge badgeContent={activeFilters.length} color="primary">
+            <rootProps.slots.baseBadge
+              badgeContent={activeFilters.length}
+              color="primary"
+              {...rootProps.slotProps?.baseBadge}
+              {...badgeProps}
+            >
               <rootProps.slots.openFilterButtonIcon />
             </rootProps.slots.baseBadge>
           }
-          {...buttonProps}
           onClick={toggleFilter}
           {...rootProps.slotProps?.baseButton}
+          {...buttonProps}
         >
           {apiRef.current.getLocaleText('toolbarFilters')}
         </rootProps.slots.baseButton>