@momentum-design/components 0.100.0 → 0.100.2

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

@@ -31,12 +31,21 @@ declare class MenuBar extends Component {
      * Returns all menuitem elements, including those nested inside menusection.
      */
     get menuItems(): Array<HTMLElement>;
+    /** @internal */
+    private getVisibleSubMenusOfItems;
     /**
      * Returns all menupopovers, including direct and slotted ones .
      */
     private getAllPopovers;
     update(changedProperties: PropertyValues): void;
     firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Closes all other submenus on the top level.
+     * This method is used to ensure that only one topolevel submenu is open at a time.
+     * It finds all other menu items with submenus and closes their submenus.
+     * @param target - The target menu item that was clicked.
+     */
+    private handleClick;
     /**
      * Resets all list items tabindex to -1 and sets the tabindex of the
      * element at the given index to 0, effectively setting the active

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

@@ -45,7 +45,8 @@ import styles from './menubar.styles';
 class MenuBar extends Component {
     constructor() {
         super();
-        this.addEventListener('keydown', this.handleKeyDown);
+        this.addEventListener('click', this.handleClick.bind(this));
+        this.addEventListener('keydown', this.handleKeyDown.bind(this));
     }
     async connectedCallback() {
         var _a;
@@ -77,6 +78,23 @@ class MenuBar extends Component {
         assigned.forEach(collect);
         return items;
     }
+    /** @internal */
+    getVisibleSubMenusOfItems(items) {
+        const subMenus = [];
+        if (!items || items.length === 0)
+            return subMenus;
+        items.forEach(item => {
+            var _a;
+            const id = item.getAttribute('id');
+            if (!id)
+                return;
+            const submenu = (_a = this.querySelector) === null || _a === void 0 ? void 0 : _a.call(this, `${MENUPOPOVER_TAGNAME}[triggerid="${id}"]`);
+            if (submenu && submenu.visible) {
+                subMenus.push(submenu);
+            }
+        });
+        return subMenus;
+    }
     /**
      * Returns all menupopovers, including direct and slotted ones .
      */
@@ -110,6 +128,22 @@ class MenuBar extends Component {
         this.resetTabIndexAndSetActiveTabIndex(this.menuItems);
         this.updatePopoverPlacement();
     }
+    /**
+     * Closes all other submenus on the top level.
+     * This method is used to ensure that only one topolevel submenu is open at a time.
+     * It finds all other menu items with submenus and closes their submenus.
+     * @param target - The target menu item that was clicked.
+     */
+    handleClick(event) {
+        const target = event.target;
+        if (!target || !this.isTopLevelMenuItem(target))
+            return;
+        const otherMenuItemsOnTop = this.menuItems.filter(item => item !== target);
+        const otherOpenSubMenus = this.getVisibleSubMenusOfItems(otherMenuItemsOnTop);
+        otherOpenSubMenus.forEach(subMenu => {
+            subMenu.hide();
+        });
+    }
     /**
      * Resets all list items tabindex to -1 and sets the tabindex of the
      * element at the given index to 0, effectively setting the active
@@ -139,7 +173,7 @@ class MenuBar extends Component {
             return;
         const submenu = this.getSubmenu(triggerId);
         if (submenu)
-            submenu.showPopover();
+            submenu.show();
     }
     updatePopoverPlacement() {
         const placement = POPOVER_PLACEMENT.RIGHT_START;
@@ -208,7 +242,7 @@ class MenuBar extends Component {
         while (popoverStack.peek()) {
             const popover = popoverStack.pop();
             if (popover) {
-                popover.hidePopover();
+                popover.hide();
                 popovers.push(popover);
             }
         }
@@ -222,7 +256,7 @@ class MenuBar extends Component {
             const triggerMenuItem = this.menuItems.find(item => item.getAttribute('id') === triggerId);
             if (triggerMenuItem) {
                 if (this.isTopLevelMenuItem(triggerMenuItem)) {
-                    parentPopover === null || parentPopover === void 0 ? void 0 : parentPopover.hidePopover();
+                    parentPopover === null || parentPopover === void 0 ? void 0 : parentPopover.hide();
                 }
                 await (parentPopover === null || parentPopover === void 0 ? void 0 : parentPopover.updateComplete);
                 const parentMenuItemIndex = this.getCurrentIndex(triggerMenuItem);

package/dist/components/menuitem/menuitem.component.js

@@ -58,7 +58,7 @@ class MenuItem extends ListItem {
          * It is typically used with checkbox and radio menu items, but can be handy for any menu item.
          */
         this.value = undefined;
-        this.addEventListener('keyup', this.handleKeyUp);
+        this.addEventListener('keyup', this.handleKeyUp.bind(this));
     }
     /**
      * Handles the keydown event for the menu item.

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -72,23 +72,23 @@ class MenuItemCheckbox extends MenuItem {
          * @default 'checkbox'
          */
         this.indicator = DEFAULTS.INDICATOR;
-        /**
-         * Handles click events to toggle checked state
-         * If the menuitemcheckbox is disabled, it does nothing.
-         * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
-         */
-        this.handleMouseClick = () => {
-            if (this.disabled)
-                return;
-            this.checked = !this.checked;
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-        };
-        this.addEventListener('click', this.handleMouseClick);
+        this.addEventListener('click', this.handleMouseClick.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.MENUITEMCHECKBOX;
     }
+    /**
+     * Handles click events to toggle checked state
+     * If the menuitemcheckbox is disabled, it does nothing.
+     * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
+     */
+    handleMouseClick() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('checked')) {

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -75,19 +75,7 @@ class MenuItemRadio extends MenuItem {
          * @default 'radio'
          */
         this.indicator = DEFAULTS.INDICATOR;
-        /**
-         * Handles click events to set checked state and uncheck siblings in the same group and container.
-         * If the menuitemradio is not checked, it sets its checked state to `true`
-         * and sets all other menuitemradio elements of the same group with checked state to `false`.
-         */
-        this.handleMouseClick = () => {
-            if (this.disabled || this.checked)
-                return;
-            this.updateOtherRadiosCheckedState();
-            this.checked = true;
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-        };
-        this.addEventListener('click', this.handleMouseClick);
+        this.addEventListener('click', this.handleMouseClick.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -115,6 +103,18 @@ class MenuItemRadio extends MenuItem {
             }
         });
     }
+    /**
+     * Handles click events to set checked state and uncheck siblings in the same group and container.
+     * If the menuitemradio is not checked, it sets its checked state to `true`
+     * and sets all other menuitemradio elements of the same group with checked state to `false`.
+     */
+    handleMouseClick() {
+        if (this.disabled || this.checked)
+            return;
+        this.updateOtherRadiosCheckedState();
+        this.checked = true;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('checked')) {

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

@@ -64,9 +64,21 @@ declare class MenuPopover extends Popover {
      */
     placement: PopoverPlacement;
     private menuItems;
+    private menuItemsWithSubMenus;
     constructor();
+    /**
+     * Retrieves the submenu popover associated with a given target element.
+     * This method checks if the target element has an `id` attribute and uses it to find the corresponding submenu popover.
+     * If a submenu popover is found, it returns it; otherwise, it returns `undefined` or `null`.
+     * @param target - The target element for which to find the submenu popover.
+     * @returns - The submenu popover instance or `undefined`/`null` if not found.
+     * @internal
+     */
+    private getSubMenuPopoverOfTarget;
     /** @internal */
-    collectMenuItems(): void;
+    private collectMenuItems;
+    /** @internal */
+    private getOpenSubMenusOfItems;
     connectedCallback(): void;
     protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
     firstUpdated(changedProperties: PropertyValues): Promise<void>;
@@ -107,21 +119,27 @@ declare class MenuPopover extends Popover {
      */
     onOutsidePopoverClick: (event: MouseEvent) => void;
     /**
-     * Checks if the menu popover has a submenu with the specified trigger ID.
-     * This method is used to determine if a menu item has a submenu associated with it,
-     * which is indicated by the presence of a `triggerid` attribute in the submenu popover.
-     * It queries the parent element for any popover with the specified trigger ID.
-     * @param id - The ID of the menu item to check for a submenu.
-     * @returns - A boolean indicating whether a submenu with the specified trigger ID exists.
+     * Toggles the visibility of the popover.
+     * This method checks if the trigger element has the `soft-disabled` attribute.
+     * If it does, the popover will not be toggled.
+     * If the popover is currently visible, it hides the popover; otherwise, it shows the popover.
+     * @returns - This method does not return anything.
      */
-    private hasSubmenuWithTriggerId;
     togglePopoverVisible: () => void;
     /**
-     * Determines whether to close the menu based on the clicked target.
-     *
-     * @param target - The target element that was clicked.
+     * Closes all other submenus on the same level as the target menu item.
+     * This method is used to ensure that only one submenu is open at a time.
+     * It finds all other menu items with submenus and closes their submenus.
+     * @param target - The target menu item that was clicked.
+     */
+    private closeOtherSubMenusOnSameLevel;
+    /**
+     * Fires the 'action' event on the target menu item.
+     * This method is used to trigger the action associated with a menu item when it is clicked or activated.
+     * It checks if the target element matches the `MENUITEM_TAGNAME` and dispatches an 'action' event.
+     * @param target - The target menu item that was clicked or activated.
      */
-    private closeMenu;
+    private fireMenuItemAction;
     /**
      * Handles mouse click events on the menu items.
      * This method checks if the clicked element is a valid menu item and not a submenu trigger.