@momentum-design/components 0.83.4 → 0.83.6

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

@@ -98,14 +98,15 @@ declare class ListItem extends ListItem_base {
     constructor();
     connectedCallback(): void;
     /**
-     * Fires the click event when the enter or space key is pressed.
+     * Fires the click event when the enter or space key is pressed down.
+     * This behavior is similar to a button click and key interaction.
      * @param event - The keyboard event triggered when a key is pressed down.
      */
-    private handleKeyDown;
+    protected handleKeyDown(event: KeyboardEvent): void;
     /**
      * Triggers a click event on the list item.
      */
-    private triggerClickEvent;
+    protected triggerClickEvent(): void;
     /**
      * Handles the click event on the list item.
      * If the tooltip is open, it has to be closed first.

package/dist/components/listitem/listitem.component.js

@@ -90,7 +90,8 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         this.role = this.role || ROLE.LISTITEM;
     }
     /**
-     * Fires the click event when the enter or space key is pressed.
+     * Fires the click event when the enter or space key is pressed down.
+     * This behavior is similar to a button click and key interaction.
      * @param event - The keyboard event triggered when a key is pressed down.
      */
     handleKeyDown(event) {

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

@@ -36,6 +36,22 @@ declare class MenuItem extends ListItem {
      * - `'negative'`: Arrow points toward the leading side.
      */
     arrowDirection?: ArrowDirections;
+    constructor();
+    /**
+     * Handles the keydown event for the menu item.
+     * If the Enter key is pressed, it triggers a click event on the menu item.
+     * This allows keyboard users to activate the menu item using the Enter key.
+     * @param event - The keyboard event that triggered the action.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handles the keyup event for the menu item.
+     * If the Space key is released, it triggers a click event on the menu item.
+     * This allows keyboard users to activate the menu item using the Space key.
+     * It also prevents the default action of the Space key to avoid scrolling the page.
+     * @param event - The keyboard event that triggered the action.
+     */
+    private handleKeyUp;
     connectedCallback(): void;
     /**
      * Renders the trailing controls slot and optionally the trailing arrow icon,

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

@@ -14,6 +14,7 @@ import ListItem from '../listitem/listitem.component';
 import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
 import { ARROW_ICONS, ARROW_DIRECTIONS, ARROW_POSITIONS } from './menuitem.constants';
 import styles from './menuitem.styles';
+import { KEYS } from '../../utils/keys';
 /**
  * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>
  * A menu item can contain an icon on the leading or trailing side.
@@ -35,6 +36,35 @@ import styles from './menuitem.styles';
  * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.
  */
 class MenuItem extends ListItem {
+    constructor() {
+        super();
+        this.addEventListener('keyup', this.handleKeyUp);
+    }
+    /**
+     * Handles the keydown event for the menu item.
+     * If the Enter key is pressed, it triggers a click event on the menu item.
+     * This allows keyboard users to activate the menu item using the Enter key.
+     * @param event - The keyboard event that triggered the action.
+     */
+    handleKeyDown(event) {
+        if (event.key === KEYS.ENTER) {
+            this.triggerClickEvent();
+            event.preventDefault();
+        }
+    }
+    /**
+     * Handles the keyup event for the menu item.
+     * If the Space key is released, it triggers a click event on the menu item.
+     * This allows keyboard users to activate the menu item using the Space key.
+     * It also prevents the default action of the Space key to avoid scrolling the page.
+     * @param event - The keyboard event that triggered the action.
+     */
+    handleKeyUp(event) {
+        if (event.key === KEYS.SPACE) {
+            this.triggerClickEvent();
+            event.preventDefault();
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.MENUITEM;

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

@@ -45,9 +45,35 @@ declare class MenuItemCheckbox extends MenuItem {
      * @default 'checkbox'
      */
     indicator: Indicator;
+    constructor();
     connectedCallback(): void;
+    /**
+     * Handles click events to toggle checked state
+     * If the menuitemcheckbox is disabled, it does nothing.
+     * If the menuitemcheckbox is not disabled, it toggles the `aria-checked` state between `true` and `false`.
+     */
+    private menuitemcheckboxHandleClick;
+    /**
+     * Returns a static checkbox element if the indicator is set to checkbox.
+     * If the indicator is not set to checkbox, it returns nothing.
+     * @returns TemplateResult | typeof nothing
+     */
     private staticCheckbox;
+    /**
+     * Returns a static toggle element if the indicator is set to toggle.
+     * If the indicator is not set to toggle, it returns nothing.
+     *
+     * The toggle will always be positioned on the trailing side of the menuitem label.
+     * @returns TemplateResult | typeof nothing
+     */
     private staticToggle;
+    /**
+     * Returns a checkmark icon if the indicator is set to checkmark and the aria-checked state is true.
+     * If the indicator is not set to checkmark or the aria-checked state is false, it returns nothing.
+     *
+     * The checkmark icon will always be positioned on the trailing side of the menuitem label.
+     * @returns TemplateResult | typeof nothing
+     */
     private getCheckmarkIcon;
     render(): TemplateResult<1>;
     static styles: Array<CSSResult>;

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

@@ -50,7 +50,7 @@ import styles from './menuitemcheckbox.styles';
  */
 class MenuItemCheckbox extends MenuItem {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.
          * @default 'false'
@@ -61,11 +61,28 @@ 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 `aria-checked` state between `true` and `false`.
+         */
+        this.menuitemcheckboxHandleClick = () => {
+            if (this.disabled)
+                return;
+            const prevChecked = this.ariaChecked === ARIA_CHECKED_STATES.TRUE;
+            this.ariaChecked = prevChecked ? ARIA_CHECKED_STATES.FALSE : ARIA_CHECKED_STATES.TRUE;
+        };
+        this.addEventListener('click', this.menuitemcheckboxHandleClick);
     }
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.MENUITEMCHECKBOX;
     }
+    /**
+     * Returns a static checkbox element if the indicator is set to checkbox.
+     * If the indicator is not set to checkbox, it returns nothing.
+     * @returns TemplateResult | typeof nothing
+     */
     staticCheckbox() {
         if (this.indicator !== INDICATOR.CHECKBOX) {
             return nothing;
@@ -78,6 +95,13 @@ class MenuItemCheckbox extends MenuItem {
       ></mdc-staticcheckbox>
   `;
     }
+    /**
+     * Returns a static toggle element if the indicator is set to toggle.
+     * If the indicator is not set to toggle, it returns nothing.
+     *
+     * The toggle will always be positioned on the trailing side of the menuitem label.
+     * @returns TemplateResult | typeof nothing
+     */
     staticToggle() {
         if (this.indicator !== INDICATOR.TOGGLE) {
             return nothing;
@@ -91,6 +115,13 @@ class MenuItemCheckbox extends MenuItem {
       ></mdc-statictoggle>
     `;
     }
+    /**
+     * Returns a checkmark icon if the indicator is set to checkmark and the aria-checked state is true.
+     * If the indicator is not set to checkmark or the aria-checked state is false, it returns nothing.
+     *
+     * The checkmark icon will always be positioned on the trailing side of the menuitem label.
+     * @returns TemplateResult | typeof nothing
+     */
     getCheckmarkIcon() {
         if (this.indicator !== INDICATOR.CHECKMARK || this.ariaChecked === ARIA_CHECKED_STATES.FALSE) {
             return nothing;

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

@@ -27,7 +27,18 @@ declare class MenuItemRadio extends MenuItem {
      * @default 'false'
      */
     ariaChecked: AriaCheckedStates;
+    /**
+     * The name attribute is used to group radio items within the same menu container.
+     */
+    name: string;
+    constructor();
     connectedCallback(): void;
+    /**
+     * 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 aria-checked state to `true`
+     * and sets all other menuitemradio elements of the same group with aria-checked state to `false`.
+     */
+    private menuitemradioHandleClick;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -12,7 +12,8 @@ import { property } from 'lit/decorators.js';
 import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
-import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
+import { ARIA_CHECKED_STATES, TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
+import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
 /**
  * A menuitemradio component is a checkable menuitem that is used in a menu.
  * A menuitemradio should be checked only one at a time. <br/>
@@ -35,12 +36,38 @@ import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
  */
 class MenuItemRadio extends MenuItem {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The aria-checked attribute is used to indicate that the menuitemradio is checked or not.
          * @default 'false'
          */
         this.ariaChecked = ARIA_CHECKED_STATES.FALSE;
+        /**
+         * The name attribute is used to group radio items within the same menu container.
+         */
+        this.name = '';
+        /**
+         * 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 aria-checked state to `true`
+         * and sets all other menuitemradio elements of the same group with aria-checked state to `false`.
+         */
+        this.menuitemradioHandleClick = () => {
+            if (this.disabled || this.ariaChecked === ARIA_CHECKED_STATES.TRUE)
+                return;
+            // Find the closest menu container (menupopover or menusection)
+            const container = this.closest(`${MENUSECTION_TAGNAME}, ${MENUPOPOVER_TAGNAME}`);
+            if (container) {
+                const radios = Array.from(container.querySelectorAll(this.tagName));
+                radios.forEach((item) => {
+                    const radio = item;
+                    if (radio.name === this.name) {
+                        radio.ariaChecked = ARIA_CHECKED_STATES.FALSE;
+                    }
+                });
+            }
+            this.ariaChecked = ARIA_CHECKED_STATES.TRUE;
+        };
+        this.addEventListener('click', this.menuitemradioHandleClick);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -67,4 +94,8 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'aria-checked' }),
     __metadata("design:type", String)
 ], MenuItemRadio.prototype, "ariaChecked", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], MenuItemRadio.prototype, "name", void 0);
 export default MenuItemRadio;

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

@@ -1,6 +1,5 @@
 import { CSSResult, PropertyValues } from 'lit';
 import Popover from '../popover/popover.component';
-declare const MenuPopover_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/MenuMixin").MenuMixinInterface> & typeof Popover;
 /**
  * A popover menu component that displays a list of menu items in a floating container.
  * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
@@ -21,10 +20,75 @@ declare const MenuPopover_base: import("../../utils/mixins/index.types").Constru
  * @tagname mdc-menupopover
  * @slot default - Contains the menu items to be displayed in the popover
  */
-declare class MenuPopover extends MenuPopover_base {
+declare class MenuPopover extends Popover {
     constructor();
+    /** @internal */
+    get menuItems(): Array<HTMLElement>;
+    hidePopover: () => void;
     connectedCallback(): void;
     firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    /**
+     * Retrieves the current index of the menu item that triggered the event.
+     * @param target - The target element that triggered the event.
+     * @returns - The index of the current menu item in the `menuItems` array.
+     */
+    private getCurrentIndex;
+    /**
+     * Resets the tabindex of the currently focused menu item and sets focus to a new menu item.
+     * @param newIndex - The index of the new menu item to focus.
+     * @param oldIndex - The index of the currently focused menu item.
+     * @returns - This method does not return anything.
+     */
+    private resetTabIndexAndSetFocus;
+    /**
+     * Closes all menu popovers in the stack.
+     * This method is used to ensure that when a menu item is clicked,
+     * all other open popovers are closed, maintaining a clean user interface.
+     * It iterates through the `popoverStack` and hides each popover until the stack is empty.
+     */
+    private closeAllMenuPopovers;
+    /**
+     * Handles outside click events to close the popover.
+     * This method checks if the click occurred outside the popover and its trigger element.
+     * If so, it closes the popover by calling `closeAllMenuPopovers`.
+     * It also checks if the click was on the backdrop element (if present) to close the popover.
+     * @param event - The mouse event that triggered the outside click.
+     */
+    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.
+     */
+    private hasSubmenuWithTriggerId;
+    /**
+     * 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.
+     * If it is, it closes all other menu popovers to ensure only one menu is open at a time.
+     * @param event - The mouse event that triggered the click.
+     */
+    private handleMouseClick;
+    /**
+     * Resolves the key pressed by the user based on the direction of the layout.
+     * This method is used to handle keyboard navigation in a right-to-left (RTL) layout.
+     * It checks if the layout is RTL and adjusts the arrow keys accordingly.
+     * For example, in RTL, the left arrow key behaves like the right arrow key and vice versa.
+     * @param key - The key pressed by the user.
+     * @param isRtl - A boolean indicating if the layout is right-to-left (RTL).
+     * @returns - The resolved key based on the direction.
+     */
+    private resolveDirectionKey;
+    /**
+     * Handles keydown events for keyboard navigation within the menu popover.
+     * This method allows users to navigate through the menu items using the keyboard.
+     * It supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.
+     * @param event - The keyboard event that triggered the keydown action.
+     * @returns - This method does not return anything.
+     */
+    private handleKeyDown;
     static styles: Array<CSSResult>;
 }
 export default MenuPopover;

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

@@ -1,10 +1,13 @@
-import { MenuMixin } from '../../utils/mixins/MenuMixin';
+import { KEYS } from '../../utils/keys';
 import { ROLE } from '../../utils/roles';
+import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { ORIENTATION } from '../menubar/menubar.constants';
 import Popover from '../popover/popover.component';
-import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { COLOR } from '../popover/popover.constants';
 import { TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
+import { isActiveMenuItem, isValidMenuItem, isValidPopover } from './menupopover.utils';
+import { popoverStack } from '../popover/popover.stack';
 /**
  * A popover menu component that displays a list of menu items in a floating container.
  * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
@@ -25,32 +28,221 @@ import styles from './menupopover.styles';
  * @tagname mdc-menupopover
  * @slot default - Contains the menu items to be displayed in the popover
  */
-class MenuPopover extends MenuMixin(Popover) {
+class MenuPopover extends Popover {
     constructor() {
         super();
+        this.hidePopover = () => {
+            setTimeout(() => {
+                this.visible = false;
+                this.isTriggerClicked = false;
+            }, this.closeDelay);
+        };
+        /**
+         * Handles outside click events to close the popover.
+         * This method checks if the click occurred outside the popover and its trigger element.
+         * If so, it closes the popover by calling `closeAllMenuPopovers`.
+         * It also checks if the click was on the backdrop element (if present) to close the popover.
+         * @param event - The mouse event that triggered the outside click.
+         */
+        this.onOutsidePopoverClick = (event) => {
+            if (popoverStack.peek() !== this)
+                return;
+            let insidePopoverClick = false;
+            const path = event.composedPath();
+            insidePopoverClick = this.contains(event.target) || path.includes(this.triggerElement);
+            const clickedOnBackdrop = this.backdropElement ? path.includes(this.backdropElement) : false;
+            if (!insidePopoverClick || clickedOnBackdrop) {
+                this.closeAllMenuPopovers();
+            }
+        };
         this.addEventListener('keydown', this.handleKeyDown);
         this.addEventListener('click', this.handleMouseClick);
     }
+    /** @internal */
+    get menuItems() {
+        var _a;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const allAssignedElements = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || []);
+        return allAssignedElements.map((node) => {
+            if (node.tagName.toLowerCase() === MENUSECTION_TAGNAME) {
+                return Array.from(node.children)
+                    .filter((child) => isValidMenuItem(child));
+            }
+            return isValidMenuItem(node) ? node : [];
+        })
+            .flat()
+            .filter((node) => !!node && !node.hasAttribute('disabled'));
+    }
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.MENU;
+        this.ariaOrientation = ORIENTATION.VERTICAL;
+        this.backdrop = false;
+        this.color = COLOR.TONAL;
+        this.disableAriaExpanded = false;
         this.focusBackToTrigger = true;
         this.focusTrap = true;
-        this.focusBackToTrigger = true;
         this.hideOnEscape = true;
         this.hideOnOutsideClick = true;
         this.interactive = true;
-        this.placement = POPOVER_PLACEMENT.BOTTOM_START;
         this.showArrow = false;
-        this.ariaOrientation = ORIENTATION.VERTICAL;
+        this.closeButton = false;
+        this.closeButtonAriaLabel = null;
     }
     async firstUpdated(changedProperties) {
-        var _a, _b, _c;
+        var _a;
         await super.firstUpdated(changedProperties);
+        // Reset all tabindex to -1 and set the tabindex of the first menu item to 0
+        if (this.menuItems.length > 0) {
+            this.menuItems.forEach((menuitem) => menuitem.setAttribute('tabindex', '-1'));
+            this.menuItems[0].setAttribute('tabindex', '0');
+        }
         (_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;
+    }
+    /**
+     * Retrieves the current index of the menu item that triggered the event.
+     * @param target - The target element that triggered the event.
+     * @returns - The index of the current menu item in the `menuItems` array.
+     */
+    getCurrentIndex(target) {
+        return this.menuItems.findIndex((node) => node === target);
+    }
+    /**
+     * Resets the tabindex of the currently focused menu item and sets focus to a new menu item.
+     * @param newIndex - The index of the new menu item to focus.
+     * @param oldIndex - The index of the currently focused menu item.
+     * @returns - This method does not return anything.
+     */
+    resetTabIndexAndSetFocus(newIndex, oldIndex) {
+        if (newIndex === oldIndex)
+            return;
+        this.menuItems[oldIndex].setAttribute('tabindex', '-1');
+        this.menuItems[newIndex].setAttribute('tabindex', '0');
+        this.menuItems[newIndex].focus();
+    }
+    /**
+     * Closes all menu popovers in the stack.
+     * This method is used to ensure that when a menu item is clicked,
+     * all other open popovers are closed, maintaining a clean user interface.
+     * It iterates through the `popoverStack` and hides each popover until the stack is empty.
+     */
+    closeAllMenuPopovers() {
+        while (popoverStack.peek()) {
+            const popover = popoverStack.pop();
+            if (popover) {
+                popover.hidePopover();
+            }
+        }
+    }
+    /**
+     * 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.
+     */
+    hasSubmenuWithTriggerId(id) {
+        var _a;
+        return ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`${MENU_POPOVER}[triggerid="${id}"]`)) !== null;
+    }
+    /**
+     * 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.
+     * If it is, it closes all other menu popovers to ensure only one menu is open at a time.
+     * @param event - The mouse event that triggered the click.
+     */
+    handleMouseClick(event) {
+        const target = event.target;
+        const triggerId = target.getAttribute('id');
+        if (isActiveMenuItem(target) // menuitemcheckbox and menuitemradio are not supposed to close the popover
+            && !this.hasSubmenuWithTriggerId(triggerId)) {
+            this.closeAllMenuPopovers();
+        }
+    }
+    /**
+     * Resolves the key pressed by the user based on the direction of the layout.
+     * This method is used to handle keyboard navigation in a right-to-left (RTL) layout.
+     * It checks if the layout is RTL and adjusts the arrow keys accordingly.
+     * For example, in RTL, the left arrow key behaves like the right arrow key and vice versa.
+     * @param key - The key pressed by the user.
+     * @param isRtl - A boolean indicating if the layout is right-to-left (RTL).
+     * @returns - The resolved key based on the direction.
+     */
+    resolveDirectionKey(key, isRtl) {
+        if (!isRtl)
+            return key;
+        switch (key) {
+            case KEYS.ARROW_LEFT:
+                return KEYS.ARROW_RIGHT;
+            case KEYS.ARROW_RIGHT:
+                return KEYS.ARROW_LEFT;
+            default:
+                return key;
+        }
+    }
+    /**
+     * Handles keydown events for keyboard navigation within the menu popover.
+     * This method allows users to navigate through the menu items using the keyboard.
+     * It supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.
+     * @param event - The keyboard event that triggered the keydown action.
+     * @returns - This method does not return anything.
+     */
+    handleKeyDown(event) {
+        var _a, _b;
+        const currentIndex = this.getCurrentIndex(event.target);
+        if (currentIndex === -1)
+            return;
+        const isRtl = window.getComputedStyle(this).direction === 'rtl';
+        const targetKey = this.resolveDirectionKey(event.key, isRtl);
+        switch (targetKey) {
+            case KEYS.HOME: {
+                // Move focus to the first menu item
+                this.resetTabIndexAndSetFocus(0, currentIndex);
+                break;
+            }
+            case KEYS.END: {
+                // Move focus to the last menu item
+                this.resetTabIndexAndSetFocus(this.menuItems.length - 1, currentIndex);
+                break;
+            }
+            case KEYS.ARROW_DOWN: {
+                // Move focus to the next menu item
+                const newIndex = (currentIndex + 1) === this.menuItems.length ? 0 : (currentIndex + 1);
+                this.resetTabIndexAndSetFocus(newIndex, currentIndex);
+                break;
+            }
+            case KEYS.ARROW_UP: {
+                // Move focus to the prev menu item
+                const newIndex = (currentIndex - 1) === -1 ? (this.menuItems.length - 1) : (currentIndex - 1);
+                this.resetTabIndexAndSetFocus(newIndex, currentIndex);
+                break;
+            }
+            case KEYS.ARROW_RIGHT: {
+                // If there is a submenu, open it.
+                const triggerId = (_a = this.menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.getAttribute('id');
+                if (this.hasSubmenuWithTriggerId(triggerId)) {
+                    const submenu = (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector(`${MENU_POPOVER}[triggerid="${triggerId}"]`);
+                    if (submenu) {
+                        submenu.showPopover();
+                    }
+                }
+                break;
+            }
+            case KEYS.ARROW_LEFT: {
+                // If the current popover is a submenu then close this popover.
+                if (isValidPopover(this.parentElement)) {
+                    this.hidePopover();
+                    this.resetTabIndexAndSetFocus(0, currentIndex);
+                }
+                break;
+            }
+            case KEYS.ESCAPE: {
+                this.resetTabIndexAndSetFocus(0, currentIndex);
+                break;
+            }
+            default:
+                break;
         }
     }
 }

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

@@ -0,0 +1,9 @@
+/**
+ * Checks if the given menu item is a valid menu item.
+ * @param menuItem - The menu item to check.
+ * @returns True if the menu item is a valid menu item, false otherwise.
+ */
+declare const isValidMenuItem: (menuItem: Element | null) => boolean;
+declare const isValidPopover: (menuItem: Element | null) => boolean;
+declare const isActiveMenuItem: (menuItem: Element | null) => boolean;
+export { isValidMenuItem, isValidPopover, isActiveMenuItem, };

package/dist/components/menupopover/menupopover.utils.js

@@ -0,0 +1,21 @@
+import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
+import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../menuitemcheckbox/menuitemcheckbox.constants';
+import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradio.constants';
+import { TAG_NAME as MENUPOPOVER_TAGNAME } from './menupopover.constants';
+/**
+ * Checks if the given menu item is a valid menu item.
+ * @param menuItem - The menu item to check.
+ * @returns True if the menu item is a valid menu item, false otherwise.
+ */
+const isValidMenuItem = (menuItem) => {
+    var _a, _b;
+    return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME]
+        .includes((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a));
+};
+const isValidPopover = (menuItem) => { var _a; return ((_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
+const isActiveMenuItem = (menuItem) => {
+    var _a, _b;
+    return ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === MENUITEM_TAGNAME
+        && !menuItem.hasAttribute('disabled');
+};
+export { isValidMenuItem, isValidPopover, isActiveMenuItem, };