@momentum-design/components 0.85.5 → 0.85.6

package/dist/components/menubar/menubar.component.d.ts

@@ -26,7 +26,10 @@ import { Component } from '../../models';
 declare class MenuBar extends Component {
     constructor();
     connectedCallback(): void;
-    menuItems: Array<HTMLElement>;
+    /**
+     * Returns all menuitem elements, including those nested inside menusection.
+     */
+    get menuItems(): Array<HTMLElement>;
     update(changedProperties: PropertyValues): void;
     firstUpdated(changedProperties: PropertyValues): void;
     /**
@@ -43,6 +46,9 @@ declare class MenuBar extends Component {
     private navigateToMenuItem;
     private showSubmenu;
     private getKeyWithDirectionFix;
+    /**
+     * Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)
+     */
     private isTopLevelMenuItem;
     private isNestedMenuItem;
     private closeAllMenuPopovers;

package/dist/components/menubar/menubar.component.js

@@ -1,19 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
 import { html } from 'lit';
-import { queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { ROLE } from '../../utils/roles';
 import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
-import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
+import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { KEYS } from '../../utils/keys';
 import { popoverStack } from '../popover/popover.stack';
 import { DEFAULTS, TAG_NAME as MENUBAR_TAGNAME } from './menubar.constants';
@@ -51,6 +41,25 @@ class MenuBar extends Component {
         this.role = ROLE.MENUBAR;
         this.ariaOrientation = DEFAULTS.ORIENTATION;
     }
+    /**
+     * Returns all menuitem elements, including those nested inside menusection.
+     */
+    get menuItems() {
+        var _a, _b;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const assigned = (_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) !== null && _b !== void 0 ? _b : [];
+        const items = [];
+        const collect = (el) => {
+            if (el.role === ROLE.MENUITEM && !el.hasAttribute('disabled')) {
+                items.push(el);
+            }
+            else if (el.tagName.toLowerCase() === MENUSECTION_TAGNAME) {
+                Array.from(el.children).forEach(collect);
+            }
+        };
+        assigned.forEach(collect);
+        return items;
+    }
     update(changedProperties) {
         super.update(changedProperties);
         this.updatePopoverPlacement();
@@ -124,13 +133,26 @@ class MenuBar extends Component {
             return KEYS.ARROW_LEFT;
         return originalKey;
     }
+    /**
+     * Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)
+     */
     isTopLevelMenuItem(element) {
         var _a;
-        return (((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === MENUBAR_TAGNAME &&
-            element.tagName.toLowerCase() === MENUITEM_TAGNAME);
+        const parent = element.parentElement;
+        if (!parent || element.role !== ROLE.MENUITEM)
+            return false;
+        const parentTag = parent.tagName.toLowerCase();
+        if (parentTag === MENUBAR_TAGNAME) {
+            return true;
+        }
+        if (parentTag === MENUSECTION_TAGNAME &&
+            ((_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === MENUBAR_TAGNAME) {
+            return true;
+        }
+        return false;
     }
     isNestedMenuItem(element) {
-        return !!element.closest(MENUPOPOVER_TAGNAME) && element.tagName.toLowerCase() === MENUITEM_TAGNAME;
+        return !!element.closest(MENUPOPOVER_TAGNAME) && element.role === ROLE.MENUITEM;
     }
     async closeAllMenuPopovers() {
         const popovers = [];
@@ -144,7 +166,7 @@ class MenuBar extends Component {
         await Promise.all(popovers.map(popover => popover.updateComplete));
     }
     async crossMenubarNavigationOnLeft(element) {
-        const isMenuItem = element.tagName.toLowerCase() === MENUITEM_TAGNAME;
+        const isMenuItem = element.role === ROLE.MENUITEM;
         if (isMenuItem) {
             const parentPopover = element.closest(MENUPOPOVER_TAGNAME);
             const triggerId = parentPopover === null || parentPopover === void 0 ? void 0 : parentPopover.getAttribute('triggerid');
@@ -229,8 +251,4 @@ class MenuBar extends Component {
     }
 }
 MenuBar.styles = [...Component.styles, ...styles];
-__decorate([
-    queryAssignedElements({ selector: `${MENUITEM_TAGNAME}:not([disabled])` }),
-    __metadata("design:type", Array)
-], MenuBar.prototype, "menuItems", void 0);
 export default MenuBar;

package/dist/custom-elements.json

@@ -15228,7 +15228,9 @@
               "name": "menuItems",
               "type": {
                 "text": "Array<HTMLElement>"
-              }
+              },
+              "description": "Returns all menuitem elements, including those nested inside menusection.",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -15386,7 +15388,8 @@
                     "text": "HTMLElement"
                   }
                 }
-              ]
+              ],
+              "description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)"
             },
             {
               "kind": "method",
@@ -20922,6 +20925,8 @@
               "type": {
                 "text": "Array<HTMLElement>"
               },
+              "description": "Returns all menuitem elements, including those nested inside menusection.",
+              "readonly": true,
               "inheritedFrom": {
                 "name": "MenuBar",
                 "module": "components/menubar/menubar.component.js"
@@ -21112,6 +21117,7 @@
                   }
                 }
               ],
+              "description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)",
               "inheritedFrom": {
                 "name": "MenuBar",
                 "module": "components/menubar/menubar.component.js"

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.85.5"
+  "version": "0.85.6"
 }