@ni/nimble-components 17.1.0 → 18.0.0

package/dist/all-components-bundle.js

@@ -15541,6 +15541,9 @@
         iconSize: 'icon-size',
         groupHeaderTextTransform: 'group-header-text-transform',
         drawerWidth: 'drawer-width',
+        spinnerSmallHeight: 'spinner-small-height',
+        spinnerMediumHeight: 'spinner-medium-height',
+        spinnerLargeHeight: 'spinner-large-height',
         smallDelay: 'small-delay',
         mediumDelay: 'medium-delay',
         largeDelay: 'large-delay',
@@ -15810,6 +15813,9 @@
     const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
     const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
     const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
+    const spinnerSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerSmallHeight)).withDefault('16px');
+    DesignToken.create(styleNameFromTokenName(tokenNames.spinnerMediumHeight)).withDefault('32px');
+    DesignToken.create(styleNameFromTokenName(tokenNames.spinnerLargeHeight)).withDefault('64px');
     // Drop Shadow Tokens
     DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
     const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
@@ -21232,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)}>
         `)}
@@ -21275,7 +21281,7 @@
              */
             this.focusLastItemWhenOpened = false;
             this.menuChangeHandler = () => {
-                this.open = false;
+                this.setOpen(false);
                 this.toggleButton.focus();
             };
         }
@@ -21310,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() {
@@ -21321,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;
         }
@@ -21345,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;
@@ -21357,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();
@@ -22022,8 +22075,8 @@
     ${display('inline-flex')}
 
     :host {
-        width: 16px;
-        height: 16px;
+        height: ${spinnerSmallHeight};
+        aspect-ratio: 1 / 1;
     }
 
     div.container {