Menu button updates for table

angular-workspace/projects/ni/nimble-angular/src/directives/menu-button/nimble-menu-button.directive.ts

@@ -1,9 +1,10 @@
 import { Directive, ElementRef, EventEmitter, HostListener, Input, Output, Renderer2 } from '@angular/core';
 import type { MenuButton } from '@ni/nimble-components/dist/esm/menu-button';
-import type { ButtonAppearance } from '@ni/nimble-components/dist/esm/menu-button/types';
+import type { ButtonAppearance, MenuButtonBeforeToggleEventDetail } from '@ni/nimble-components/dist/esm/menu-button/types';
 import { BooleanValueOrAttribute, toBooleanProperty } from '../utilities/template-value-helpers';
 
 export type { MenuButton };
+export type { MenuButtonBeforeToggleEventDetail };
 
 /**
  * Directive to provide Angular integration for the menu button.
@@ -48,6 +49,8 @@ export class NimbleMenuButtonDirective {
 
     @Output() public openChange = new EventEmitter<boolean>();
 
+    @Output() public beforeToggle = new EventEmitter<MenuButtonBeforeToggleEventDetail>();
+
     public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<MenuButton>) {}
 
     @HostListener('open-change', ['$event'])
@@ -56,4 +59,9 @@ export class NimbleMenuButtonDirective {
             this.openChange.emit(this.open);
         }
     }
+
+    @HostListener('beforetoggle', ['$event'])
+    public onBeforeToggle($event: CustomEvent): void {
+        this.beforeToggle.emit($event.detail as MenuButtonBeforeToggleEventDetail);
+    }
 }

change/@ni-nimble-angular-81d4a2bd-2ca0-47ba-a7bb-c47be917d8ae.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add beforetoggle event on menu button",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-blazor-51e63b35-2ce0-44af-9dda-744c7234e857.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add beforetoggle event on menu button",
+  "packageName": "@ni/nimble-blazor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-0c3b5f38-1366-416c-8b35-20029a8d3eba.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add beforetoggle event on menu button and update menu button to work when the slotted menu is nested within additional slots",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-blazor/NimbleBlazor/Components/NimbleMenuButton.razor

@@ -3,6 +3,7 @@
 <nimble-menu-button
     open="@BindConverter.FormatValue(Open)"
     @onnimblemenubuttonopenchange="(__value) => UpdateOpen(__value.Open)"
+    @onnimblemenubuttonbeforetoggle="(__value) => HandleBeforeToggle(__value)"
     appearance="@Appearance.ToAttributeValue()"
     position="@Position.ToAttributeValue()"
     disabled="@Disabled"

packages/nimble-blazor/NimbleBlazor/Components/NimbleMenuButton.razor.cs

@@ -52,6 +52,12 @@ public partial class NimbleMenuButton : ComponentBase
     [Parameter]
     public EventCallback<bool?> OpenChanged { get; set; }
 
+    /// <summary>
+    /// Gets or sets a callback that's invoked before the 'open' state of the menu button changes
+    /// </summary>
+    [Parameter]
+    public EventCallback<MenuButtonBeforeToggleEventArgs> BeforeToggle { get; set; }
+
     /// <summary>
     /// Called when 'open' changes on the web component.
     /// </summary>
@@ -62,6 +68,15 @@ protected async void UpdateOpen(bool? value)
         await OpenChanged.InvokeAsync(value);
     }
 
+    /// <summary>
+    /// Called when the 'beforetoggle' event is fired on the web component
+    /// </summary>
+    /// <param name="eventArgs">The state of the menu button</param>
+    protected async void HandleBeforeToggle(MenuButtonBeforeToggleEventArgs eventArgs)
+    {
+        await BeforeToggle.InvokeAsync(eventArgs);
+    }
+
     /// <summary>
     /// Gets or sets the additional attributes on the <see cref="NimbleMenuButton"/>.
     /// </summary>

packages/nimble-blazor/NimbleBlazor/EventHandlers.cs

@@ -18,9 +18,16 @@ public class MenuButtonOpenChangeEventArgs : EventArgs
     public bool Open { get; set; }
 }
 
+public class MenuButtonBeforeToggleEventArgs : EventArgs
+{
+    public bool NewState { get; set; }
+    public bool OldState { get; set; }
+}
+
 [EventHandler("onnimbletabsactiveidchange", typeof(TabsChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onnimblecheckedchange", typeof(CheckboxChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
-[EventHandler("onnimblemenubuttonopenchange", typeof(MenuButtonOpenChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("onnimblemenubuttonopenchange", typeof(MenuButtonOpenChangeEventArgs), enableStopPropagation: true, enablePreventDefault: false)]
+[EventHandler("onnimblemenubuttonbeforetoggle", typeof(MenuButtonBeforeToggleEventArgs), enableStopPropagation: true, enablePreventDefault: false)]
 public static class EventHandlers
 {
 }

packages/nimble-blazor/NimbleBlazor/wwwroot/NimbleBlazor.lib.module.js

@@ -39,6 +39,16 @@ export function afterStarted(Blazor) {
             };
         }
     });
+    // Used by NimbleMenuButton.razor
+    Blazor.registerCustomEventType('nimblemenubuttonbeforetoggle', {
+        browserEventName: 'beforetoggle',
+        createEventArgs: event => {
+            return {
+                newState: event.detail.newState,
+                oldState: event.detail.oldState
+            };
+        }
+    });
 }
 
 window.NimbleBlazor = {

packages/nimble-components/src/menu-button/index.ts

@@ -10,7 +10,7 @@ import { ButtonAppearance } from '../button/types';
 import type { ToggleButton } from '../toggle-button';
 import { styles } from './styles';
 import { template } from './template';
-import { MenuButtonPosition } from './types';
+import { MenuButtonBeforeToggleEventDetail, MenuButtonPosition } from './types';
 import type { ButtonPattern } from '../patterns/button/types';
 import type { AnchoredRegion } from '../anchored-region';
 
@@ -129,16 +129,16 @@ export class MenuButton extends FoundationElement implements ButtonPattern {
         }
 
         const focusTarget = e.relatedTarget as HTMLElement;
-        if (!this.contains(focusTarget)) {
-            this.open = false;
+        if (!this.contains(focusTarget) && !this.menu?.contains(focusTarget)) {
+            this.setOpen(false);
             return false;
         }
 
         return true;
     }
 
     public toggleButtonCheckedChangeHandler(e: Event): boolean {
-        this.open = this.toggleButton!.checked;
+        this.setOpen(this.toggleButton!.checked);
         // Don't bubble the 'change' event from the toggle button because
         // the menu button has its own 'open-change' event.
         e.stopPropagation();
@@ -149,10 +149,10 @@ export class MenuButton extends FoundationElement implements ButtonPattern {
         switch (e.key) {
             case keyArrowUp:
                 this.focusLastItemWhenOpened = true;
-                this.open = true;
+                this.setOpen(true);
                 return false;
             case keyArrowDown:
-                this.open = true;
+                this.setOpen(true);
                 return false;
             default:
                 return true;
@@ -162,16 +162,52 @@ export class MenuButton extends FoundationElement implements ButtonPattern {
     public menuKeyDownHandler(e: KeyboardEvent): boolean {
         switch (e.key) {
             case keyEscape:
-                this.open = false;
+                this.setOpen(false);
                 this.toggleButton!.focus();
                 return false;
             default:
                 return true;
         }
     }
 
+    private setOpen(newValue: boolean): void {
+        if (this.open === newValue) {
+            return;
+        }
+
+        const eventDetail: MenuButtonBeforeToggleEventDetail = {
+            oldState: this.open,
+            newState: newValue
+        };
+        this.$emit('beforetoggle', eventDetail);
+
+        this.open = newValue;
+    }
+
     private get menu(): HTMLElement | undefined {
-        return this.slottedMenus?.length ? this.slottedMenus[0] : undefined;
+        // Get the menu that is slotted within the menu-button, taking into account
+        // that it may be nested within multiple 'slot' elements, such as when used
+        // within a table.
+        if (!this.slottedMenus?.length) {
+            return undefined;
+        }
+
+        let currentItem = this.slottedMenus[0];
+        while (currentItem) {
+            if (currentItem.getAttribute('role') === 'menu') {
+                return currentItem;
+            }
+
+            if (currentItem?.nodeName === 'SLOT') {
+                currentItem = (
+                    currentItem as HTMLSlotElement
+                ).assignedNodes()[0] as HTMLElement;
+            } else {
+                return undefined;
+            }
+        }
+
+        return undefined;
     }
 
     private focusMenu(): void {
@@ -187,7 +223,7 @@ export class MenuButton extends FoundationElement implements ButtonPattern {
     }
 
     private readonly menuChangeHandler = (): void => {
-        this.open = false;
+        this.setOpen(false);
         this.toggleButton!.focus();
     };
 }

packages/nimble-components/src/menu-button/specs/README.md

@@ -84,6 +84,9 @@ _Methods_
 
 _Events_
 
+-   `beforetoggle` (event) - event fired before the opened state has changed. The event detail contains:
+    -   `newState` - boolean - The value of `open` on the menu button that the element is transitioning in to.
+    -   `oldState` - boolean - The value of `open` on the menu button that the element is transitioning out of.
 -   `open-change` (event) - event for when the opened state has changed
 
 _CSS Classes and CSS Custom Properties that affect the component_

packages/nimble-components/src/menu-button/template.ts

@@ -1,4 +1,4 @@
-import { elements, html, ref, slotted, when } from '@microsoft/fast-element';
+import { html, ref, slotted, when } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import type { MenuButton } from '.';
 import { ToggleButton } from '../toggle-button';
@@ -43,7 +43,7 @@ export const template = html<MenuButton>`
                 ${ref('region')}
             >
                 <span part="menu">
-                    <slot name="menu" ${slotted({ property: 'slottedMenus', filter: elements('[role=menu]') })}></slot>
+                    <slot name="menu" ${slotted({ property: 'slottedMenus' })}></slot>
                 </span>
             </${DesignSystem.tagFor(AnchoredRegion)}>
         `