@ni/nimble-components 17.2.0 → 18.0.0

package/dist/all-components-bundle.js

@@ -21238,7 +21238,7 @@
                 ${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)}>
         `)}
@@ -21281,7 +21281,7 @@
              */
             this.focusLastItemWhenOpened = false;
             this.menuChangeHandler = () => {
-                this.open = false;
+                this.setOpen(false);
                 this.toggleButton.focus();
             };
         }
@@ -21316,7 +21316,11 @@
             if (!this.open) {
                 // Only fire an event here if the menu is changing to being closed. Otherwise,
                 // wait until the menu is actually opened before firing the event.
-                this.$emit('open-change');
+                const eventDetail = {
+                    oldState: true,
+                    newState: false
+                };
+                this.$emit('toggle', eventDetail);
             }
         }
         regionLoadedHandler() {
@@ -21327,23 +21331,28 @@
             else {
                 this.focusMenu();
             }
-            this.$emit('open-change');
+            const eventDetail = {
+                oldState: false,
+                newState: true
+            };
+            this.$emit('toggle', eventDetail);
         }
         focusoutHandler(e) {
             if (!this.open) {
                 return true;
             }
             const focusTarget = e.relatedTarget;
-            if (!this.contains(focusTarget)) {
-                this.open = false;
+            if (!this.contains(focusTarget)
+                && !this.getMenu()?.contains(focusTarget)) {
+                this.setOpen(false);
                 return false;
             }
             return true;
         }
         toggleButtonCheckedChangeHandler(e) {
-            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.
+            // the menu button has its own 'toggle' event.
             e.stopPropagation();
             return false;
         }
@@ -21351,10 +21360,10 @@
             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;
@@ -21363,21 +21372,59 @@
         menuKeyDownHandler(e) {
             switch (e.key) {
                 case keyEscape:
-                    this.open = false;
+                    this.setOpen(false);
                     this.toggleButton.focus();
                     return false;
                 default:
                     return true;
             }
         }
-        get menu() {
-            return this.slottedMenus?.length ? this.slottedMenus[0] : undefined;
+        setOpen(newValue) {
+            if (this.open === newValue) {
+                return;
+            }
+            const eventDetail = {
+                oldState: this.open,
+                newState: newValue
+            };
+            this.$emit('beforetoggle', eventDetail);
+            this.open = newValue;
+        }
+        getMenu() {
+            // 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 (this.isSlotElement(currentItem)) {
+                    const firstNode = currentItem.assignedNodes()[0];
+                    if (firstNode instanceof HTMLElement) {
+                        currentItem = firstNode;
+                    }
+                    else {
+                        currentItem = undefined;
+                    }
+                }
+                else {
+                    return undefined;
+                }
+            }
+            return undefined;
+        }
+        isSlotElement(element) {
+            return element?.nodeName === 'SLOT';
         }
         focusMenu() {
-            this.menu?.focus();
+            this.getMenu()?.focus();
         }
         focusLastMenuItem() {
-            const menuItems = this.menu?.querySelectorAll('[role=menuitem]');
+            const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');
             if (menuItems?.length) {
                 const lastMenuItem = menuItems[menuItems.length - 1];
                 lastMenuItem.focus();