@momentum-design/components 0.85.2 → 0.85.4

package/dist/react/index.d.ts

@@ -6,8 +6,8 @@ export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as ButtonGroup } from './buttongroup';
 export { default as Button } from './button';
+export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
@@ -62,6 +62,6 @@ export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
 export { default as VirtualizedList } from './virtualizedlist';
-export { default as ToggleTip } from './toggletip';

package/dist/react/index.js

@@ -6,8 +6,8 @@ export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as ButtonGroup } from './buttongroup';
 export { default as Button } from './button';
+export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
@@ -62,6 +62,6 @@ export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
 export { default as VirtualizedList } from './virtualizedlist';
-export { default as ToggleTip } from './toggletip';

package/dist/react/menubar/index.d.ts

@@ -1,13 +1,12 @@
 import Component from '../../components/menubar';
 /**
- * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * Menubar is a navigational menu component that provides a vertical fixed list of menu items,
  * with support for nested submenus and keyboard navigation. It serves as a container
  * for menu items and manages their interaction patterns, including:
- * - Keyboard navigation (arrow keys, Home, End)
+ * - Keyboard navigation (Arrow keys, Home, End)
  * - Menu item activation (Enter/Space)
  * - Submenu toggling (Right/Left arrow keys)
  * - Focus management
- * - Support for both horizontal and vertical orientations
  * - Integration with MenuPopover for nested menus
  *
  * A menubar will contain a set of menu items and their associated popovers.
@@ -16,6 +15,10 @@ import Component from '../../components/menubar';
  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
  *
+ * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.
+ *
+ * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.
+ *
  * @tagname mdc-menubar
  * @slot default - Contains the menu items and their associated popovers
  */

package/dist/react/menubar/index.js

@@ -3,14 +3,13 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/menubar';
 import { TAG_NAME } from '../../components/menubar/menubar.constants';
 /**
- * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * Menubar is a navigational menu component that provides a vertical fixed list of menu items,
  * with support for nested submenus and keyboard navigation. It serves as a container
  * for menu items and manages their interaction patterns, including:
- * - Keyboard navigation (arrow keys, Home, End)
+ * - Keyboard navigation (Arrow keys, Home, End)
  * - Menu item activation (Enter/Space)
  * - Submenu toggling (Right/Left arrow keys)
  * - Focus management
- * - Support for both horizontal and vertical orientations
  * - Integration with MenuPopover for nested menus
  *
  * A menubar will contain a set of menu items and their associated popovers.
@@ -19,6 +18,10 @@ import { TAG_NAME } from '../../components/menubar/menubar.constants';
  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
  *
+ * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.
+ *
+ * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.
+ *
  * @tagname mdc-menubar
  * @slot default - Contains the menu items and their associated popovers
  */

package/package.json

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

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

@@ -1,4 +0,0 @@
-import type { ValueOf } from '../../utils/types';
-import { ORIENTATION } from './menubar.constants';
-type Orientation = ValueOf<typeof ORIENTATION>;
-export type { Orientation };

package/dist/components/menubar/menubar.types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,10 +0,0 @@
-import { LitElement } from 'lit';
-import type { Orientation } from '../../components/menubar/menubar.types';
-import type { Constructor } from './index.types';
-export declare class MenuMixinInterface {
-    ariaOrientation: Orientation;
-    protected handleKeyDown(event: KeyboardEvent): void;
-    protected handleMouseClick(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

@@ -1,479 +0,0 @@
-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 { property, queryAssignedElements } from 'lit/decorators.js';
-import { ORIENTATION, TAG_NAME as MENUBAR_TAGNAME } from '../../components/menubar/menubar.constants';
-import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../../components/menupopover/menupopover.constants';
-import { TAG_NAME as MENUSECTION_TAGNAME } from '../../components/menusection/menusection.constants';
-import { TAG_NAME as NAVITEMLIST_TAGNAME } from '../../components/navitemlist/navitemlist.constants';
-import { POPOVER_PLACEMENT } from '../../components/popover/popover.constants';
-import { KEYS } from '../keys';
-import { ROLE } from '../roles';
-export const MenuMixin = (superClass) => {
-    class InnerMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /**
-             * Defines the orientation of the menu. This value is reflected to
-             * the `aria-orientation` attribute and can be either `'horizontal'` or `'vertical'`.
-             * @default 'horizontal'
-             */
-            this.ariaOrientation = ORIENTATION.HORIZONTAL;
-        }
-        /** @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 => this.isValidMenuItem(child));
-                }
-                return this.isValidMenuItem(node) ? node : [];
-            })
-                .flat()
-                .filter(node => !!node)
-                .filter(node => !node.hasAttribute('disabled'));
-        }
-        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.
-         * @param value - The value to set.
-         */
-        setMenuBarPopoverValue(value) {
-            const { menu } = this.getParentMenuItemDetails('', this);
-            menu === null || menu === void 0 ? void 0 : menu.setAttribute('data-menu-popover-open', value.toString());
-        }
-        /**
-         * Returns true if the data-menu-popover-open attribute on the menu element is set to 'true', false otherwise.
-         */
-        isMenuPopoverOpen() {
-            const { menu } = this.getParentMenuItemDetails('', this);
-            return (menu === null || menu === void 0 ? void 0 : menu.getAttribute('data-menu-popover-open')) === 'true';
-        }
-        /**
-         * Returns the index of the given target in the menuItems array.
-         * If the target is not a menu item, but a child element of a menu item,
-         * it returns the index of the parent menu item.
-         * @param target - The target element to find the index of.
-         * @returns The index of the target element in the menuItems array.
-         */
-        getCurrentIndex(target) {
-            return this.menuItems.findIndex(node => node === target || node === target.parentElement);
-        }
-        /**
-         * Updates the placement of the popover based on the aria-orientation property.
-         */
-        updatePopoverPlacementBasedOnOrientation() {
-            if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
-                this.menuPopoverItems.forEach(node => {
-                    node.setAttribute('placement', POPOVER_PLACEMENT.BOTTOM_START);
-                });
-            }
-            else {
-                this.menuPopoverItems.forEach(node => {
-                    node.setAttribute('placement', POPOVER_PLACEMENT.RIGHT_START);
-                });
-            }
-        }
-        /**
-         * Updates the tabindex of the current index to -1 and the tabindex of the new index to 0,
-         * effectively setting the active element. This is used when navigating the menu via keyboard.
-         * @param menuItems - The list of menu items.
-         * @param currentIndex - The current index of the focused menu item.
-         * @param newIndex - The index of the new active element in the list.
-         */
-        updateTabIndexAndFocusNewIndex(menuItems, currentIndex, newIndex) {
-            var _a, _b, _c, _d;
-            if (newIndex < 0 || currentIndex < 0) {
-                return;
-            }
-            if (currentIndex === newIndex) {
-                (_a = menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            (_b = menuItems[currentIndex]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1');
-            (_c = menuItems[newIndex]) === null || _c === void 0 ? void 0 : _c.setAttribute('tabindex', '0');
-            (_d = menuItems[newIndex]) === null || _d === void 0 ? void 0 : _d.focus();
-        }
-        /**
-         * Checks if the given tag name is a valid menu tag name.
-         * @param tagName - The tag name to check.
-         * @returns True if the tag name is a valid menu, false otherwise.
-         */
-        isValidMenu(tagName) {
-            return (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME || this.isValidNavItemList(tagName);
-        }
-        /**
-         * Checks if the given tag name is a valid navitemlist tag name.
-         * @param tagName - The tag name to check.
-         * @returns True if the tag name is a valid navitemlist, false otherwise.
-         */
-        isValidNavItemList(tagName) {
-            return (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === NAVITEMLIST_TAGNAME;
-        }
-        /**
-         * Checks if the given tag name is a valid menu popover tag name.
-         * @param tagName - The tag name to check.
-         * @returns True if the tag name is a valid menu popover, false otherwise.
-         */
-        isValidPopover(tagName) {
-            return (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUPOPOVER_TAGNAME;
-        }
-        /**
-         * Opens the popover at the given index if it exists.
-         * @param index - The index of the menu item to open the popover for.
-         * @returns True if the popover was opened, false if not.
-         */
-        openPopover(index) {
-            var _a, _b;
-            if (this.isValidPopover((_b = (_a = this.menuItems[index]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.tagName)) {
-                const currentMenuId = this.menuItems[index].getAttribute('id');
-                const result = this.menuPopoverItems.findIndex(node => node.getAttribute('triggerid') === currentMenuId);
-                if (result !== -1) {
-                    if (!this.menuPopoverItems[result].hasAttribute('visible')) {
-                        this.menuPopoverItems[result].toggleAttribute('visible');
-                    }
-                    this.setMenuBarPopoverValue(true);
-                    return true;
-                }
-            }
-            return false;
-        }
-        /**
-         * Navigates to the previous menu item and updates the tabindex of the current index
-         * to -1 and the tabindex of the new index to 0.
-         * @param currentIndex - The current index of the focused menu item.
-         * @param firstMenuIndex - The index of the first menu item.
-         * @param lastMenuIndex - The index of the last menu item.
-         * @param ariaOrientation - The orientation of the menu.
-         */
-        navigateToPrevMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, ariaOrientation) {
-            const newIndex = currentIndex === firstMenuIndex ? lastMenuIndex : currentIndex - 1;
-            this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, newIndex);
-            // - if the isMenuPopoverOpen is true and orientation is horizontal, then we will open the popover.
-            if (this.isMenuPopoverOpen() && ariaOrientation === ORIENTATION.HORIZONTAL) {
-                this.openPopover(newIndex);
-            }
-        }
-        /**
-         * Navigates to the next menu item and updates the tabindex of the current index
-         * to -1 and the tabindex of the new index to 0.
-         * @param currentIndex - The current index of the focused menu item.
-         * @param firstMenuIndex - The index of the first menu item.
-         * @param lastMenuIndex - The index of the last menu item.
-         * @param ariaOrientation - The orientation of the menu.
-         */
-        navigateToNextMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, ariaOrientation) {
-            const newIndex = currentIndex === lastMenuIndex ? firstMenuIndex : currentIndex + 1;
-            this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, newIndex);
-            // - if the isMenuPopoverOpen is true, then we will close all popovers recursively,
-            if (this.isMenuPopoverOpen() && ariaOrientation === ORIENTATION.HORIZONTAL) {
-                this.openPopover(newIndex);
-            }
-        }
-        /**
-         * Returns the parent menu item details for the given menu child id.
-         * It recursively traverses up the DOM tree until it finds a menu or menubar element.
-         * @param menuChildId - The id of the menu child element.
-         * @param menu - The current menu element to start traversing from.
-         * @returns An object containing the parent menu element and the menu child id.
-         */
-        getParentMenuItemDetails(menuChildId, menu) {
-            var _a, _b;
-            if (menu === null) {
-                return { menu: null, menuChildId };
-            }
-            if (menu && this.isValidMenu(menu.tagName)) {
-                return { menu, menuChildId };
-            }
-            return this.getParentMenuItemDetails((_b = (_a = menu === null || menu === void 0 ? void 0 : menu.previousElementSibling) === null || _a === void 0 ? void 0 : _a.getAttribute('id')) !== null && _b !== void 0 ? _b : '', menu === null || menu === void 0 ? void 0 : menu.parentElement);
-        }
-        /**
-         * Recursively hides all the popovers up the DOM tree until it finds a menu or menubar element.
-         * @param menu - The current menu element to start traversing from.
-         */
-        hideAllPopovers(menu) {
-            if (this.isValidMenu(menu === null || menu === void 0 ? void 0 : menu.tagName)) {
-                return;
-            }
-            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);
-            }
-        }
-        /**
-         * Recursively navigates up the DOM tree until it finds the previous menu item
-         * and updates the tabindex of the current index to -1 and the tabindex of the new index to 0.
-         * Also opens the popover of the previous menu item.
-         * @param currentIndex - The current index of the focused menu item.
-         */
-        navigateToPrevParentMenuItem(currentIndex, key) {
-            var _a, _b, _c, _d, _e;
-            const parentMenuItem = (_a = this.menuItems[currentIndex].parentElement) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
-            const parentMenuItemsChildren = Array.from(((_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.children) || []).filter(node => this.isValidMenuItem(node));
-            const parentMenuItemIndex = parentMenuItemsChildren.findIndex(node => node === parentMenuItem);
-            let newIndex = parentMenuItemIndex;
-            if (key === KEYS.ARROW_LEFT && this.isValidMenu((_c = this.parentElement) === null || _c === void 0 ? void 0 : _c.tagName)) {
-                newIndex = parentMenuItemIndex - 1;
-            }
-            this.updateTabIndexAndFocusNewIndex(parentMenuItemsChildren, parentMenuItemIndex, newIndex);
-            (_e = (_d = parentMenuItemsChildren[parentMenuItemIndex - 1]) === null || _d === void 0 ? void 0 : _d.nextElementSibling) === null || _e === void 0 ? void 0 : _e.toggleAttribute('visible');
-        }
-        /**
-         * Closes the current menu popover and navigates to the previous parent menu item.
-         * @param currentIndex - The current index of the focused menu item.
-         */
-        closePopoverAndNavigateToPrevParentMenuItem(currentIndex, key) {
-            // - close popover first
-            this.toggleAttribute('visible');
-            // - get parent menu item details and update the tab index to parent menu item.
-            this.navigateToPrevParentMenuItem(currentIndex, key);
-        }
-        /**
-         * Gets the parent menu contents of the given current menu item.
-         * It recursively traverses up the DOM tree until it finds the parent menu element
-         * and gets the parent menu item details and the children of the parent menu item.
-         * @param currentMenuItem - The current menu item to start traversing from.
-         * @returns An object containing the parent menu item details and the children of the parent menu item.
-         */
-        getParentMenuContents(currentMenuItem) {
-            var _a;
-            const parentMenuItemDetails = this.getParentMenuItemDetails('', currentMenuItem);
-            const parentMenuItemsChildren = Array.from(((_a = parentMenuItemDetails.menu) === null || _a === void 0 ? void 0 : _a.children) || []).filter(node => this.isValidMenuItem(node));
-            return { parentMenuItemDetails, parentMenuItemsChildren };
-        }
-        /**
-         * Opens the popover of the next children menu item if there are children.
-         * If there are no children, then it closes all popovers recursively and
-         * navigates to the next menu item from the menu bar.
-         * If the parent menu item does not have any children, then we will go to the next menu item.
-         * @param currentIndex - The current index of the focused menu item.
-         */
-        openPopoverAndNavigateToNextChildrenMenuItem(currentIndex) {
-            var _a, _b;
-            if (this.openPopover(currentIndex)) {
-                return;
-            }
-            // - If there are no popovers to the right, then we will close all popovers recursively,
-            // and go the next menu item from the menu bar
-            this.hideAllPopovers(this.menuItems[currentIndex]);
-            if (this.isValidMenu(this.tagName))
-                return;
-            // - get the top parent menu items using recursion.
-            const { parentMenuItemDetails, parentMenuItemsChildren } = this.getParentMenuContents(this.menuItems[currentIndex]);
-            if (parentMenuItemsChildren.length === 0 || (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId) === '') {
-                this.navigateToNextMenuItem(currentIndex, 0, this.menuItems.length - 1, this.ariaOrientation);
-                return;
-            }
-            const parentMenuItemIndex = parentMenuItemsChildren.findIndex(node => node.getAttribute('id') === (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId));
-            const newIndex = parentMenuItemIndex === -1 ? currentIndex + 1 : parentMenuItemIndex + 1;
-            this.updateTabIndexAndFocusNewIndex(parentMenuItemsChildren, parentMenuItemIndex, newIndex);
-            (_b = (_a = parentMenuItemsChildren[newIndex]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.toggleAttribute('visible');
-        }
-        /**
-         * 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.
-         */
-        isValidMenuItem(menuItem) {
-            const validRoles = [ROLE.MENUITEM, ROLE.MENUITEMCHECKBOX, ROLE.MENUITEMRADIO];
-            const role = menuItem.getAttribute('role');
-            return (role !== null &&
-                validRoles.includes(role));
-        }
-        /**
-         * Resets all list 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 navigating the list via keyboard.
-         *
-         * @param newIndex - The index of the new active element in the list.
-         */
-        resetTabIndexAndSetActiveTabIndex(menuItems) {
-            menuItems.forEach((node, index) => {
-                const newTabindex = index === 0 ? '0' : '-1';
-                node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
-            });
-        }
-        /**
-         * Returns the key based on the direction of the document.
-         * If the document is in RTL mode and the key is ARROW_LEFT or ARROW_RIGHT,
-         * it will swap them to maintain the correct navigation direction.
-         * @param originalKey - The original key pressed.
-         * @returns The key based on the direction of the document.
-         */
-        getKeyBasedOnDirection(originalKey) {
-            var _a;
-            let key = originalKey;
-            const isRtl = ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl' ||
-                window.getComputedStyle(this).direction === 'rtl';
-            if (isRtl && (key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT)) {
-                if (key === KEYS.ARROW_LEFT) {
-                    key = KEYS.ARROW_RIGHT;
-                }
-                else {
-                    key = KEYS.ARROW_LEFT;
-                }
-            }
-            return key;
-        }
-        /**
-         * Handles the keydown event on the menu bar.
-         * The keys are as follows:
-         * - HOME: Sets focus to the first menu item.
-         * - END: Sets focus to the last menu item.
-         * - ARROW_LEFT:
-         *   - If orientation is horizontal, then it navigates to the previous menu item.
-         *   - If orientation is vertical, then it closes the popover of the current menu item and
-         *     navigates to the previous parent menu item.
-         * - ARROW_RIGHT:
-         *   - If orientation is horizontal, then it navigates to the next menu item.
-         *   - If orientation is vertical, then it opens the popover of the current menu item and
-         *     navigates to the next children menu item.
-         * - ARROW_UP:
-         *   - If orientation is horizontal, then it opens the popover of the current menu item.
-         *   - If orientation is vertical, then it navigates to the previous menu item.
-         * - ARROW_DOWN:
-         *   - If orientation is horizontal, then it opens the popover of the current menu item.
-         *   - If orientation is vertical, then it navigates to the next menu item.
-         * - SPACE:
-         * - ENTER:
-         *   - If the next element sibling is a menu popover, then it opens the popover of the current
-         *     menu item and navigates to the next children menu item.
-         *   - If the target element is a menu item, then it closes all popovers recursively and
-         *     navigates to the previous parent menu item.
-         * - ESCAPE:
-         *   - If a popover is already open then we close it and navigate to the parent menu item.
-         *   - If the current menuitem is a child of menubar, then we will set the value of isMenuPopoverOpen to false.,
-         * @param event - The keyboard event.
-         */
-        handleKeyDown(event) {
-            var _a, _b;
-            const firstMenuIndex = 0;
-            const lastMenuIndex = this.menuItems.length - 1;
-            const currentIndex = this.getCurrentIndex(event.target);
-            if (currentIndex === -1)
-                return;
-            const key = this.getKeyBasedOnDirection(event.key);
-            switch (key) {
-                case KEYS.HOME:
-                    this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, firstMenuIndex);
-                    break;
-                case KEYS.END:
-                    this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, lastMenuIndex);
-                    break;
-                case KEYS.ARROW_LEFT: {
-                    if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
-                        this.navigateToPrevMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, this.ariaOrientation);
-                    }
-                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
-                        this.closePopoverAndNavigateToPrevParentMenuItem(currentIndex, event.key);
-                    }
-                    break;
-                }
-                case KEYS.ARROW_RIGHT: {
-                    if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
-                        this.navigateToNextMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, this.ariaOrientation);
-                    }
-                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
-                        this.openPopoverAndNavigateToNextChildrenMenuItem(currentIndex);
-                    }
-                    break;
-                }
-                case KEYS.ARROW_UP: {
-                    if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
-                        this.openPopover(currentIndex);
-                    }
-                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
-                        this.navigateToPrevMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, this.ariaOrientation);
-                    }
-                    event.preventDefault();
-                    break;
-                }
-                case KEYS.ARROW_DOWN: {
-                    if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
-                        this.openPopover(currentIndex);
-                    }
-                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
-                        this.navigateToNextMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, this.ariaOrientation);
-                    }
-                    event.preventDefault();
-                    break;
-                }
-                case KEYS.SPACE:
-                case KEYS.ENTER: {
-                    if (this.isValidPopover((_b = (_a = this.menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.tagName)) {
-                        this.openPopoverAndNavigateToNextChildrenMenuItem(currentIndex);
-                    }
-                    else if (this.isValidMenuItem(event.target)) {
-                        this.setMenuBarPopoverValue(false);
-                    }
-                    break;
-                }
-                case KEYS.ESCAPE: {
-                    this.setMenuBarPopoverValue(false);
-                    break;
-                }
-                default:
-                    break;
-            }
-        }
-        /**
-         * Closes all popovers except the current one.
-         * @param currentIndex - The index of the current menu item.
-         */
-        closeAllPopoversExceptCurrent(currentIndex) {
-            this.menuPopoverItems
-                .filter(node => node !== this.menuItems[currentIndex])
-                .filter(node => node.hasAttribute('visible'))
-                .forEach(node => node.toggleAttribute('visible'));
-        }
-        /**
-         * Handles the mouse click event on the menu items.
-         * - If the menuitem has children, then it opens the popover of the next children menu item.
-         * - If the menuitem does not have children, then it closes all popovers recursively.
-         * @param event - The mouse click event.
-         */
-        handleMouseClick(event) {
-            var _a;
-            const target = event.target;
-            const currentIndex = this.getCurrentIndex(target);
-            if (currentIndex === -1)
-                return;
-            if (this.isValidPopover((_a = target === null || target === void 0 ? void 0 : target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.tagName)) {
-                this.closeAllPopoversExceptCurrent(currentIndex);
-                this.openPopoverAndNavigateToNextChildrenMenuItem(currentIndex);
-            }
-            else if (this.isValidMenuItem(target)) {
-                target.parentElement.hidePopover();
-            }
-        }
-    }
-    __decorate([
-        property({ type: String, reflect: true, attribute: 'aria-orientation' }),
-        __metadata("design:type", String)
-    ], InnerMixinClass.prototype, "ariaOrientation", void 0);
-    __decorate([
-        queryAssignedElements({ selector: `${MENUPOPOVER_TAGNAME}:not([disabled])` }),
-        __metadata("design:type", Array)
-    ], InnerMixinClass.prototype, "menuPopoverItems", void 0);
-    // Cast return type to your mixin's interface intersected with the superClass type
-    return InnerMixinClass;
-};