@momentum-design/components 0.76.4 → 0.76.5

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

@@ -24,7 +24,6 @@ declare const MenuBar_base: import("../../utils/mixins/index.types").Constructor
 declare class MenuBar extends MenuBar_base {
     constructor();
     connectedCallback(): void;
-    firstUpdated(): void;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

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

@@ -33,10 +33,6 @@ class MenuBar extends MenuMixin(Component) {
         super.connectedCallback();
         this.role = ROLE.MENUBAR;
     }
-    firstUpdated() {
-        // For the first, we set the first element only as active.
-        this.resetTabIndexAndSetActiveTabIndex(0);
-    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('ariaOrientation')) {

package/dist/components/menupopover/menupopover.component.js

@@ -43,9 +43,10 @@ class MenuPopover extends MenuMixin(Popover) {
         this.ariaOrientation = ORIENTATION.VERTICAL;
     }
     async firstUpdated(changedProperties) {
-        var _a, _b;
+        var _a, _b, _c;
         await super.firstUpdated(changedProperties);
-        if (((_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === MENU_POPOVER) {
+        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ROLE.MENU);
+        if (((_c = (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.tagName) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === MENU_POPOVER) {
             this.interactive = true;
             this.placement = POPOVER_PLACEMENT.RIGHT_START;
         }

package/dist/components/popover/popover.component.js

@@ -496,11 +496,9 @@ class Popover extends FocusTrapMixin(Component) {
             if (!this.disableAriaExpanded) {
                 this.triggerElement.removeAttribute('aria-expanded');
             }
-            if (this.interactive) {
-                const triggerElementRole = this.triggerElement.getAttribute('aria-haspopup');
-                if (triggerElementRole === 'dialog' || triggerElementRole === 'alertdialog') {
-                    this.triggerElement.removeAttribute('aria-haspopup');
-                }
+            // Remove aria-haspopup if the popover is not interactive
+            if (!this.interactive) {
+                this.triggerElement.removeAttribute('aria-haspopup');
             }
             if (this.focusBackToTrigger) {
                 (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.focus();

package/dist/custom-elements.json

@@ -15132,41 +15132,20 @@
                 "module": "utils/mixins/MenuMixin.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "setTabIndexOnMouseClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse click event."
-                }
-              ],
-              "description": "Handles the mouse click event on the menu items.\nResets all the menu items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when clicking on the menu items.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
-            },
             {
               "kind": "method",
               "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "protected",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "newIndex",
+                  "name": "menuItems",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new active element in the list."
+                    "text": "Array<HTMLElement>"
+                  }
+                },
+                {
+                  "description": "The index of the new active element in the list.",
+                  "name": "newIndex"
                 }
               ],
               "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard.",
@@ -18028,41 +18007,20 @@
                 "module": "utils/mixins/MenuMixin.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "setTabIndexOnMouseClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse click event."
-                }
-              ],
-              "description": "Handles the mouse click event on the menu items.\nResets all the menu items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when clicking on the menu items.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
-            },
             {
               "kind": "method",
               "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "protected",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "newIndex",
+                  "name": "menuItems",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new active element in the list."
+                    "text": "Array<HTMLElement>"
+                  }
+                },
+                {
+                  "description": "The index of the new active element in the list.",
+                  "name": "newIndex"
                 }
               ],
               "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard.",
@@ -35042,42 +35000,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setTabIndexOnMouseClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "updatePopoverPlacementBasedOnOrientation",
@@ -35517,37 +35439,20 @@
               ],
               "description": "Checks if the given menu item is a valid menu item."
             },
-            {
-              "kind": "method",
-              "name": "setTabIndexOnMouseClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse click event."
-                }
-              ],
-              "description": "Handles the mouse click event on the menu items.\nResets all the menu items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when clicking on the menu items."
-            },
             {
               "kind": "method",
               "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "protected",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "newIndex",
+                  "name": "menuItems",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new active element in the list."
+                    "text": "Array<HTMLElement>"
+                  }
+                },
+                {
+                  "description": "The index of the new active element in the list.",
+                  "name": "newIndex"
                 }
               ],
               "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."

package/dist/utils/mixins/MenuMixin.d.ts

@@ -5,8 +5,6 @@ export declare class MenuMixinInterface {
     ariaOrientation: Orientation;
     protected handleKeyDown(event: KeyboardEvent): void;
     protected handleMouseClick(event: MouseEvent): void;
-    protected resetTabIndexAndSetActiveTabIndex(newIndex: number): void;
-    protected setTabIndexOnMouseClick(event: MouseEvent): void;
     protected updatePopoverPlacementBasedOnOrientation(): void;
 }
 export declare const MenuMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MenuMixinInterface> & T;

package/dist/utils/mixins/MenuMixin.js

@@ -47,6 +47,7 @@ export const MenuMixin = (superClass) => {
         firstUpdated(changedProperties) {
             super.firstUpdated(changedProperties);
             this.setMenuBarPopoverValue(false);
+            this.resetTabIndexAndSetActiveTabIndex(this.menuItems);
         }
         /**
          * Sets the value of the data-menu-popover-open attribute on the menu element.
@@ -202,6 +203,10 @@ export const MenuMixin = (superClass) => {
             if (this.isValidPopover(menu === null || menu === void 0 ? void 0 : menu.tagName)) {
                 menu === null || menu === void 0 ? void 0 : menu.toggleAttribute('visible');
             }
+            if (menu === null || menu === void 0 ? void 0 : menu.children) {
+                const menuChildren = Array.from(menu.children).filter((child) => this.isValidMenuItem(child));
+                this.resetTabIndexAndSetActiveTabIndex(menuChildren);
+            }
             if (menu === null || menu === void 0 ? void 0 : menu.parentElement) {
                 this.hideAllPopovers(menu.parentElement);
             }
@@ -300,19 +305,6 @@ export const MenuMixin = (superClass) => {
             return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME]
                 .includes((_a = menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
         }
-        /**
-         * Handles the mouse click event on the menu items.
-         * Resets all the menu items tabindex to -1 and sets the tabindex of the
-         * element at the given index to 0, effectively setting the active
-         * element. This is used when clicking on the menu items.
-         * @param event - The mouse click event.
-         */
-        setTabIndexOnMouseClick(event) {
-            var _a;
-            const newIndex = this.getCurrentIndex(event.target);
-            this.resetTabIndexAndSetActiveTabIndex(newIndex);
-            (_a = this.menuItems[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
         /**
          * Resets all list items tabindex to -1 and sets the tabindex of the
          * element at the given index to 0, effectively setting the active
@@ -320,9 +312,9 @@ export const MenuMixin = (superClass) => {
          *
          * @param newIndex - The index of the new active element in the list.
          */
-        resetTabIndexAndSetActiveTabIndex(newIndex) {
-            this.menuItems.forEach((node, index) => {
-                const newTabindex = newIndex === index ? '0' : '-1';
+        resetTabIndexAndSetActiveTabIndex(menuItems) {
+            menuItems.forEach((node, index) => {
+                const newTabindex = index === 0 ? '0' : '-1';
                 node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
             });
         }

package/package.json

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