Add hover effect to header menus

Author: jassmith

packages/core/src/internal/data-grid/data-grid.tsx

@@ -1327,7 +1327,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
                     // else we will assume doesn't need it.
                     needsHoverPosition = rendererNeeds ?? toCheck.kind === GridCellKind.Custom;
                     needsDamageCell = needsHoverPosition;
-                } else if (args.kind === groupHeaderKind) {
+                } else {
                     needsDamageCell = true;
                 }
 
@@ -1517,6 +1517,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
                                     false,
                                     theme,
                                     false,
+                                    undefined,
+                                    undefined,
                                     false,
                                     0,
                                     spriteManager,

packages/core/src/internal/data-grid/render/data-grid-render.header.ts

@@ -46,7 +46,10 @@ export function drawGridHeaders(
     ctx.fillStyle = outerTheme.bgHeader;
     ctx.fillRect(0, 0, width, totalHeaderHeight);
 
-    const [hCol, hRow] = hovered?.[0] ?? [];
+    const hCol = hovered?.[0]?.[0];
+    const hRow = hovered?.[0]?.[1];
+    const hPosX = hovered?.[1]?.[0];
+    const hPosY = hovered?.[1]?.[1];
 
     const font = outerTheme.headerFontFull;
     // Assinging the context font too much can be expensive, it can be worth it to minimze this
@@ -115,6 +118,8 @@ export function drawGridHeaders(
             selected,
             theme,
             hoveredBoolean,
+            hoveredBoolean ? hPosX : undefined,
+            hoveredBoolean ? hPosY : undefined,
             hasSelectedCell,
             hover,
             spriteManager,
@@ -415,6 +420,8 @@ function drawHeaderInner(
     selected: boolean,
     theme: FullTheme,
     isHovered: boolean,
+    posX: number | undefined,
+    posY: number | undefined,
     hoverAmount: number,
     spriteManager: SpriteManager,
     touchMode: boolean,
@@ -533,6 +540,12 @@ function drawHeaderInner(
     if (shouldDrawMenu && headerLayout.menuBounds !== undefined) {
         const menuBounds = headerLayout.menuBounds;
 
+        const hovered = posX !== undefined && posY !== undefined && pointInRect(menuBounds, posX + x, posY + y);
+
+        if (!hovered) {
+            ctx.globalAlpha = 0.7;
+        }
+
         if (c.menuIcon === undefined || c.menuIcon === GridColumnMenuIcon.Triangle) {
             // Draw the default triangle menu icon:
             ctx.beginPath();
@@ -572,6 +585,10 @@ function drawHeaderInner(
             const iconY = menuBounds.y + (menuBounds.height - theme.headerIconSize) / 2;
             spriteManager.drawSprite(c.menuIcon, "normal", ctx, iconX, iconY, theme.headerIconSize, theme);
         }
+
+        if (!hovered) {
+            ctx.globalAlpha = 1;
+        }
     }
 }
 
@@ -585,6 +602,8 @@ export function drawHeader(
     selected: boolean,
     theme: FullTheme,
     isHovered: boolean,
+    posX: number | undefined,
+    posY: number | undefined,
     hasSelectedCell: boolean,
     hoverAmount: number,
     spriteManager: SpriteManager,
@@ -620,6 +639,8 @@ export function drawHeader(
                     selected,
                     theme,
                     isHovered,
+                    posX,
+                    posY,
                     hoverAmount,
                     spriteManager,
                     touchMode,
@@ -638,6 +659,8 @@ export function drawHeader(
             selected,
             theme,
             isHovered,
+            posX,
+            posY,
             hoverAmount,
             spriteManager,
             touchMode,

packages/core/src/internal/data-grid/render/draw-grid-arg.ts

@@ -19,7 +19,7 @@ import type { EnqueueCallback } from "../use-animation-queue.js";
 import type { ImageWindowLoader } from "../image-window-loader-interface.js";
 import type { GroupDetailsCallback, GetRowThemeCallback, Highlight } from "./data-grid-render.cells.js";
 
-export type HoverInfo = readonly [Item, Item];
+export type HoverInfo = readonly [Item, readonly [number, number]];
 
 export interface DragAndDropState {
     src: number;