@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/ListItemBase.d.ts

@@ -7,17 +7,13 @@ import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
  * for the <code>ListItem</code> and <code>GroupHeaderListItem</code> classes.
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ListItemBase
- * @extends sap.ui.webc.base.UI5Element
+ * @extends UI5Element
  * @public
  */
 declare class ListItemBase extends UI5Element implements ITabbable {
     /**
      * Defines the selected state of the <code>ListItem</code>.
-     * @type {boolean}
-     * @name sap.ui.webc.main.ListItemBase.prototype.selected
-     * @defaultvalue false
+     * @default false
      * @public
      */
     selected: boolean;
@@ -31,9 +27,7 @@ declare class ListItemBase extends UI5Element implements ITabbable {
     * Defines whether <code>ui5-li</code> is in disabled state.
     * <br><br>
     * <b>Note:</b> A disabled <code>ui5-li</code> is noninteractive.
-    * @type {boolean}
-    * @name sap.ui.webc.main.ListItemBase.prototype.disabled
-    * @defaultvalue false
+    * @default false
     * @protected
     * @since 1.0.0-rc.12
     */

package/dist/ListItemBase.js

@@ -20,13 +20,12 @@ import styles from "./generated/themes/ListItemBase.css.js";
  * for the <code>ListItem</code> and <code>GroupHeaderListItem</code> classes.
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ListItemBase
- * @extends sap.ui.webc.base.UI5Element
+ * @extends UI5Element
  * @public
  */
 let ListItemBase = class ListItemBase extends UI5Element {
     _onfocusin(e) {
+        this.fireEvent("_request-tabindex-change", e);
         if (e.target !== this.getFocusDomRef()) {
             return;
         }
@@ -116,6 +115,7 @@ ListItemBase = __decorate([
         renderer: litRender,
         styles,
     }),
+    event("_request-tabindex-change"),
     event("_focused"),
     event("_forward-after"),
     event("_forward-before")

package/dist/ListItemBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemBase.js","sourceRoot":"","sources":["../src/ListItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport { isTabNext, isTabPrevious } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\n\n// Styles\nimport styles from \"./generated/themes/ListItemBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation\n * for the <code>ListItem</code> and <code>GroupHeaderListItem</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.ListItemBase\n * @extends sap.ui.webc.base.UI5Element\n * @public\n */\n@customElement({\n\trenderer: litRender,\n\tstyles,\n})\n@event(\"_focused\")\n@event(\"_forward-after\")\n@event(\"_forward-before\")\nclass ListItemBase extends UI5Element implements ITabbable {\n\t/**\n\t * Defines the selected state of the <code>ListItem</code>.\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.ListItemBase.prototype.selected\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t* Defines if the list item should display its bottom border.\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\thasBorder!: boolean;\n\n\t@property({ defaultValue: \"-1\", noAttribute: true })\n\t_tabIndex!: string;\n\n\t/**\n\t* Defines whether <code>ui5-li</code> is in disabled state.\n\t* <br><br>\n\t* <b>Note:</b> A disabled <code>ui5-li</code> is noninteractive.\n\t* @type {boolean}\n\t* @name sap.ui.webc.main.ListItemBase.prototype.disabled\n\t* @defaultvalue false\n\t* @protected\n\t* @since 1.0.0-rc.12\n\t*/\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Indicates if the element is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t_onfocusin(e: FocusEvent) {\n\t\tif (e.target !== this.getFocusDomRef()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.focused = true;\n\t\tthis.fireEvent(\"_focused\", e);\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isTabNext(e)) {\n\t\t\treturn this._handleTabNext(e);\n\t\t}\n\n\t\tif (isTabPrevious(e)) {\n\t\t\treturn this._handleTabPrevious(e);\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {} // eslint-disable-line\n\n\t_handleTabNext(e: KeyboardEvent) {\n\t\tif (this.shouldForwardTabAfter()) {\n\t\t\tif (!this.fireEvent(\"_forward-after\", {}, true)) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\t_handleTabPrevious(e: KeyboardEvent) {\n\t\tconst target = e.target as HTMLElement;\n\n\t\tif (this.shouldForwardTabBefore(target)) {\n\t\t\tthis.fireEvent(\"_forward-before\");\n\t\t}\n\t}\n\n\t/*\n\t* Determines if th current list item either has no tabbable content or\n\t* [TAB] is performed onto the last tabbale content item.\n\t*/\n\tshouldForwardTabAfter() {\n\t\tconst aContent = getTabbableElements(this.getFocusDomRef()!);\n\n\t\treturn aContent.length === 0 || (aContent[aContent.length - 1] === getActiveElement());\n\t}\n\n\t/*\n\t* Determines if the current list item is target of [SHIFT+TAB].\n\t*/\n\tshouldForwardTabBefore(target: HTMLElement) {\n\t\treturn this.getFocusDomRef() === target;\n\t}\n\n\tget classes(): ClassMap {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-li-root\": true,\n\t\t\t\t\"ui5-li--focusable\": !this.disabled,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _ariaDisabled() {\n\t\treturn this.disabled ? true : undefined;\n\t}\n\n\tget hasConfigurableMode() {\n\t\treturn false;\n\t}\n\n\tget _effectiveTabIndex() {\n\t\tif (this.disabled) {\n\t\t\treturn -1;\n\t\t}\n\t\tif (this.selected) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn this._tabIndex;\n\t}\n}\n\nexport default ListItemBase;\n"]}
+{"version":3,"file":"ListItemBase.js","sourceRoot":"","sources":["../src/ListItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport { isTabNext, isTabPrevious } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\n\n// Styles\nimport styles from \"./generated/themes/ListItemBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation\n * for the <code>ListItem</code> and <code>GroupHeaderListItem</code> classes.\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n\trenderer: litRender,\n\tstyles,\n})\n@event(\"_request-tabindex-change\")\n@event(\"_focused\")\n@event(\"_forward-after\")\n@event(\"_forward-before\")\nclass ListItemBase extends UI5Element implements ITabbable {\n\t/**\n\t * Defines the selected state of the <code>ListItem</code>.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t* Defines if the list item should display its bottom border.\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\thasBorder!: boolean;\n\n\t@property({ defaultValue: \"-1\", noAttribute: true })\n\t_tabIndex!: string;\n\n\t/**\n\t* Defines whether <code>ui5-li</code> is in disabled state.\n\t* <br><br>\n\t* <b>Note:</b> A disabled <code>ui5-li</code> is noninteractive.\n\t* @default false\n\t* @protected\n\t* @since 1.0.0-rc.12\n\t*/\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Indicates if the element is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t_onfocusin(e: FocusEvent) {\n\t\tthis.fireEvent(\"_request-tabindex-change\", e);\n\t\tif (e.target !== this.getFocusDomRef()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.focused = true;\n\t\tthis.fireEvent(\"_focused\", e);\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isTabNext(e)) {\n\t\t\treturn this._handleTabNext(e);\n\t\t}\n\n\t\tif (isTabPrevious(e)) {\n\t\t\treturn this._handleTabPrevious(e);\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {} // eslint-disable-line\n\n\t_handleTabNext(e: KeyboardEvent) {\n\t\tif (this.shouldForwardTabAfter()) {\n\t\t\tif (!this.fireEvent(\"_forward-after\", {}, true)) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\t_handleTabPrevious(e: KeyboardEvent) {\n\t\tconst target = e.target as HTMLElement;\n\n\t\tif (this.shouldForwardTabBefore(target)) {\n\t\t\tthis.fireEvent(\"_forward-before\");\n\t\t}\n\t}\n\n\t/*\n\t* Determines if th current list item either has no tabbable content or\n\t* [TAB] is performed onto the last tabbale content item.\n\t*/\n\tshouldForwardTabAfter() {\n\t\tconst aContent = getTabbableElements(this.getFocusDomRef()!);\n\n\t\treturn aContent.length === 0 || (aContent[aContent.length - 1] === getActiveElement());\n\t}\n\n\t/*\n\t* Determines if the current list item is target of [SHIFT+TAB].\n\t*/\n\tshouldForwardTabBefore(target: HTMLElement) {\n\t\treturn this.getFocusDomRef() === target;\n\t}\n\n\tget classes(): ClassMap {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-li-root\": true,\n\t\t\t\t\"ui5-li--focusable\": !this.disabled,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _ariaDisabled() {\n\t\treturn this.disabled ? true : undefined;\n\t}\n\n\tget hasConfigurableMode() {\n\t\treturn false;\n\t}\n\n\tget _effectiveTabIndex() {\n\t\tif (this.disabled) {\n\t\t\treturn -1;\n\t\t}\n\t\tif (this.selected) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn this._tabIndex;\n\t}\n}\n\nexport default ListItemBase;\n"]}

package/dist/Menu.d.ts

@@ -1,15 +1,30 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import type { ResponsivePopoverBeforeCloseEventDetail } from "./ResponsivePopover.js";
+import StandardListItem from "./StandardListItem.js";
 import type MenuItem from "./MenuItem.js";
-import type { ClickEventDetail } from "./List.js";
+import type { ListItemClickEventDetail } from "./List.js";
 type CurrentItem = {
     item: MenuItem;
     position: number;
     ariaHasPopup: string | undefined;
 };
+type MenuItemClickEventDetail = {
+    item: MenuItem;
+    text: string;
+};
+type MenuBeforeOpenEventDetail = {
+    item?: MenuItem;
+};
+type MenuBeforeCloseEventDetail = {
+    escPressed: boolean;
+};
+type OpenerStandardListItem = StandardListItem & {
+    associatedItem: MenuItem;
+};
 /**
  * @class
  *
@@ -40,11 +55,7 @@ type CurrentItem = {
  * <code>import "@ui5/webcomponents/dist/Menu.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Menu
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-menu
- * @appenddocs sap.ui.webc.main.MenuItem
+ * @extends UI5Element
  * @since 1.3.0
  * @public
  */
@@ -52,28 +63,22 @@ declare class Menu extends UI5Element {
     /**
      * Defines the header text of the menu (displayed on mobile).
      *
-     * @name sap.ui.webc.main.Menu.prototype.headerText
-     * @type {string}
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     headerText: string;
     /**
      * Indicates if the menu is open
      *
-     * @name sap.ui.webc.main.Menu.prototype.open
      * @public
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @since 1.10.0
      */
     open: boolean;
     /**
      * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
      *
-     * @name sap.ui.webc.main.Menu.prototype.busy
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @public
      * @since 1.13.0
      */
@@ -81,9 +86,7 @@ declare class Menu extends UI5Element {
     /**
      * Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover..
      *
-     * @name sap.ui.webc.main.Menu.prototype.busyDelay
-     * @type {sap.ui.webc.base.types.Integer}
-     * @defaultValue 1000
+     * @default 1000
      * @public
      * @since 1.13.0
      */
@@ -91,23 +94,19 @@ declare class Menu extends UI5Element {
     /**
      * Defines the ID or DOM Reference of the element that the menu is shown at
      *
-     * @name sap.ui.webc.main.Menu.prototype.opener
      * @public
-     * @type {sap.ui.webc.base.types.DOMReference}
-     * @defaultvalue ""
+     * @default ""
      * @since 1.10.0
      */
     opener: HTMLElement | string;
     /**
      * Defines if the menu is sub-menu (not first-level).
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @private
      */
     _isSubMenu: boolean;
     /**
      * Stores id of a list item that opened sub-menu.
-     * @type {string}
      * @private
      */
     _subMenuOpenerId: string;
@@ -116,13 +115,11 @@ declare class Menu extends UI5Element {
      * (in case of non-phone devices these are the items of the menu,
      * but for phone devices the items of the currently opened sub-menu
      * will be populated here)
-     * @type {array}
      * @private
      */
     _currentItems: Array<CurrentItem>;
     /**
      * Stores a list of parent menu items for each sub-menu (on phone).
-     * @type {array}
      * @private
      */
     _parentItemsStack: Array<MenuItem>;
@@ -143,19 +140,17 @@ declare class Menu extends UI5Element {
      * <br><br>
      * <b>Note:</b> Use <code>ui5-menu-item</code> for the intended design.
      *
-     * @name sap.ui.webc.main.Menu.prototype.default
-     * @type {sap.ui.webc.main.IMenuItem[]}
-     * @slot items
      * @public
      */
     items: Array<MenuItem>;
     static i18nBundle: I18nBundle;
+    _timeout?: Timeout;
     static onDefine(): Promise<void>;
     get itemsWithChildren(): boolean;
     get itemsWithIcon(): boolean;
     get isRtl(): boolean;
     get placementType(): "Left" | "Right" | "Bottom";
-    get verticalAlign(): "Bottom" | "Top";
+    get verticalAlign(): "Top" | "Bottom";
     get labelBack(): string;
     get labelClose(): string;
     get isPhone(): boolean;
@@ -165,36 +160,41 @@ declare class Menu extends UI5Element {
     onAfterRendering(): void;
     /**
      * Shows the Menu near the opener element.
-     * @param {HTMLElement} opener the element that the popover is shown at
+     *
+     * @param opener the element that the popover is shown at
      * @public
-     * @method
-     * @name sap.ui.webc.main.Menu#showAt
      */
     showAt(opener: HTMLElement): Promise<void>;
     /**
      * Closes the Menu.
+     *
      * @public
-     * @method
-     * @name sap.ui.webc.main.Menu#close
      */
     close(): void;
     _createPopover(): Promise<ResponsivePopover>;
+    getOpener(): HTMLElement | null;
     _navigateBack(): void;
     _prepareCurrentItems(items: Array<MenuItem>): void;
     _createSubMenu(item: MenuItem, openerId: string): void;
+    _clonedItemsFragment(item: MenuItem): DocumentFragment;
     _openItemSubMenu(item: MenuItem, opener: HTMLElement, actionId: string): void;
     _closeItemSubMenu(item: MenuItem, forceClose?: boolean): void;
     _closeSubMenuPopover(subMenu: Menu, forceClose?: boolean): void;
     _prepareSubMenuDesktopTablet(item: MenuItem, opener: HTMLElement, actionId: string): void;
     _prepareSubMenuPhone(item: MenuItem): void;
+    _startOpenTimeout(item: MenuItem, opener: OpenerStandardListItem, hoverId: string): void;
+    _startCloseTimeout(item: MenuItem): void;
+    _clearTimeout(): void;
     _itemMouseOver(e: MouseEvent): void;
     _busyMouseOver(): void;
     _itemMouseOut(e: MouseEvent): void;
     _itemKeyDown(e: KeyboardEvent): void;
-    _itemClick(e: CustomEvent<ClickEventDetail>): void;
+    _itemClick(e: CustomEvent<ListItemClickEventDetail>): void;
+    _findMainMenu(item: MenuItem): Menu;
     _beforePopoverOpen(e: CustomEvent): void;
     _afterPopoverOpen(): void;
     _beforePopoverClose(e: CustomEvent<ResponsivePopoverBeforeCloseEventDetail>): void;
     _afterPopoverClose(): void;
 }
 export default Menu;
+export type { MenuItemClickEventDetail, MenuBeforeCloseEventDetail, MenuBeforeOpenEventDetail, };

package/dist/Menu.js

@@ -16,6 +16,7 @@ import { isPhone, isTablet, isDesktop, } from "@ui5/webcomponents-base/dist/Devi
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import "@ui5/webcomponents-base/dist/types.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Button from "./Button.js";
@@ -27,6 +28,8 @@ import staticAreaMenuTemplate from "./generated/templates/MenuTemplate.lit.js";
 import { MENU_BACK_BUTTON_ARIA_LABEL, MENU_CLOSE_BUTTON_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import staticAreaMenuCss from "./generated/themes/Menu.css.js";
+const MENU_OPEN_DELAY = 300;
+const MENU_CLOSE_DELAY = 400;
 /**
  * @class
  *
@@ -57,11 +60,7 @@ import staticAreaMenuCss from "./generated/themes/Menu.css.js";
  * <code>import "@ui5/webcomponents/dist/Menu.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Menu
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-menu
- * @appenddocs sap.ui.webc.main.MenuItem
+ * @extends UI5Element
  * @since 1.3.0
  * @public
  */
@@ -107,9 +106,16 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         this._currentItems.forEach(item => {
             item.item._siblingsWithChildren = itemsWithChildren;
             item.item._siblingsWithIcon = itemsWithIcon;
-            if (item.item._subMenu) {
-                item.item._subMenu.busy = item.item.busy;
-                item.item._subMenu.busyDelay = item.item.busyDelay;
+            const subMenu = item.item._subMenu;
+            const menuItem = item.item;
+            if (subMenu && subMenu.busy) {
+                subMenu.innerHTML = "";
+                const fragment = this._clonedItemsFragment(menuItem);
+                subMenu.appendChild(fragment);
+            }
+            if (subMenu) {
+                subMenu.busy = item.item.busy;
+                subMenu.busyDelay = item.item.busyDelay;
             }
         });
     }
@@ -118,8 +124,7 @@ let Menu = Menu_1 = class Menu extends UI5Element {
             return;
         }
         if (this.open) {
-            const rootNode = this.getRootNode();
-            const opener = this.opener instanceof HTMLElement ? this.opener : rootNode && rootNode.getElementById(this.opener);
+            const opener = this.getOpener();
             if (opener) {
                 this.showAt(opener);
             }
@@ -130,10 +135,9 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     /**
      * Shows the Menu near the opener element.
-     * @param {HTMLElement} opener the element that the popover is shown at
+     *
+     * @param opener the element that the popover is shown at
      * @public
-     * @method
-     * @name sap.ui.webc.main.Menu#showAt
      */
     async showAt(opener) {
         if (isPhone()) {
@@ -155,9 +159,8 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     /**
      * Closes the Menu.
+     *
      * @public
-     * @method
-     * @name sap.ui.webc.main.Menu#close
      */
     close() {
         if (this._popover) {
@@ -173,6 +176,10 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         this._popover = staticAreaItemDomRef.querySelector("[ui5-responsive-popover]");
         return this._popover;
     }
+    getOpener() {
+        const rootNode = this.getRootNode();
+        return this.opener instanceof HTMLElement ? this.opener : rootNode?.getElementById?.(this.opener);
+    }
     _navigateBack() {
         const parentMenuItem = this._parentItemsStack.pop();
         this.focus();
@@ -194,23 +201,29 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     _createSubMenu(item, openerId) {
         const ctor = this.constructor;
         const subMenu = document.createElement(ctor.getMetadata().getTag());
-        const fragment = document.createDocumentFragment();
         subMenu._isSubMenu = true;
         subMenu.setAttribute("id", `submenu-${openerId}`);
         subMenu._parentMenuItem = item;
         subMenu.busy = item.busy;
         subMenu.busyDelay = item.busyDelay;
-        const subItems = item.children;
-        let clonedItem, idx;
-        for (idx = 0; idx < subItems.length; idx++) {
-            clonedItem = subItems[idx].cloneNode(true);
-            fragment.appendChild(clonedItem);
-        }
+        const fragment = this._clonedItemsFragment(item);
         subMenu.appendChild(fragment);
         this.staticAreaItem.shadowRoot.querySelector(".ui5-menu-submenus").appendChild(subMenu);
         item._subMenu = subMenu;
     }
+    _clonedItemsFragment(item) {
+        const fragment = document.createDocumentFragment();
+        for (let i = 0; i < item.items.length; ++i) {
+            const clonedItem = item.items[i].cloneNode(true);
+            fragment.appendChild(clonedItem);
+        }
+        return fragment;
+    }
     _openItemSubMenu(item, opener, actionId) {
+        const mainMenu = this._findMainMenu(item);
+        mainMenu.fireEvent("before-open", {
+            item,
+        }, false, false);
         item._subMenu.showAt(opener);
         item._preventSubMenuClose = true;
         this._openedSubMenuItem = item;
@@ -258,6 +271,27 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         this._parentMenuItem = item;
         this._parentItemsStack.push(item);
     }
+    _startOpenTimeout(item, opener, hoverId) {
+        // If theres already a timeout, clears it
+        this._clearTimeout();
+        // Sets the new timeout
+        this._timeout = setTimeout(() => {
+            this._prepareSubMenuDesktopTablet(item, opener, hoverId);
+        }, MENU_OPEN_DELAY);
+    }
+    _startCloseTimeout(item) {
+        // If theres already a timeout, clears it
+        this._clearTimeout();
+        // Sets the new timeout
+        this._timeout = setTimeout(() => {
+            this._closeItemSubMenu(item);
+        }, MENU_CLOSE_DELAY);
+    }
+    _clearTimeout() {
+        if (this._timeout) {
+            clearTimeout(this._timeout);
+        }
+    }
     _itemMouseOver(e) {
         if (isDesktop()) {
             // respect mouseover only on desktop
@@ -265,7 +299,10 @@ let Menu = Menu_1 = class Menu extends UI5Element {
             const item = opener.associatedItem;
             const hoverId = opener.getAttribute("id");
             opener.focus();
-            this._prepareSubMenuDesktopTablet(item, opener, hoverId);
+            // If there is a pending close operation, cancel it
+            this._clearTimeout();
+            // Opens submenu with 300ms delay
+            this._startOpenTimeout(item, opener, hoverId);
         }
     }
     _busyMouseOver() {
@@ -275,13 +312,15 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     _itemMouseOut(e) {
         if (isDesktop()) {
-            // respect mouseover only on desktop
             const opener = e.target;
             const item = opener.associatedItem;
+            // If there is a pending open operation, cancel it
+            this._clearTimeout();
+            // Close submenu with 400ms delay
             if (item && item.hasSubmenu && item._subMenu) {
                 // try to close the sub-menu
                 item._preventSubMenuClose = false;
-                this._closeItemSubMenu(item);
+                this._startCloseTimeout(item);
             }
         }
     }
@@ -313,21 +352,31 @@ let Menu = Menu_1 = class Menu extends UI5Element {
                     this._parentMenuItem = undefined;
                 }
                 // fire event if the click is on top-level menu item
-                this.fireEvent("item-click", {
+                const prevented = !this.fireEvent("item-click", {
                     "item": item,
                     "text": item.text,
-                });
-                this._popover.close();
+                }, true, false);
+                if (!prevented) {
+                    this._popover.close();
+                }
             }
             else {
-                // find top-level menu and redirect event to it
-                let parentMenu = item.parentElement;
-                while (parentMenu._parentMenuItem) {
-                    parentMenu._parentMenuItem._preventSubMenuClose = false;
-                    this._closeItemSubMenu(parentMenu._parentMenuItem);
-                    parentMenu = parentMenu._parentMenuItem.parentElement;
+                const mainMenu = this._findMainMenu(item);
+                const prevented = !mainMenu.fireEvent("item-click", {
+                    "item": item,
+                    "text": item.text,
+                }, true, false);
+                if (!prevented) {
+                    let openerMenuItem = item;
+                    let parentMenu = openerMenuItem.parentElement;
+                    do {
+                        openerMenuItem._preventSubMenuClose = false;
+                        this._closeItemSubMenu(openerMenuItem);
+                        parentMenu = openerMenuItem.parentElement;
+                        openerMenuItem = parentMenu._parentMenuItem;
+                    } while (parentMenu._parentMenuItem);
+                    mainMenu._popover.close();
                 }
-                parentMenu._itemClick(e);
             }
         }
         else if (isPhone()) {
@@ -339,6 +388,13 @@ let Menu = Menu_1 = class Menu extends UI5Element {
             this._prepareSubMenuDesktopTablet(item, opener, actionId);
         }
     }
+    _findMainMenu(item) {
+        let parentMenu = item.parentElement;
+        while (parentMenu._parentMenuItem) {
+            parentMenu = parentMenu._parentMenuItem.parentElement;
+        }
+        return parentMenu;
+    }
     _beforePopoverOpen(e) {
         const prevented = !this.fireEvent("before-open", {}, true, false);
         if (prevented) {
@@ -348,7 +404,7 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     _afterPopoverOpen() {
         this.open = true;
-        this.fireEvent("after-open");
+        this.fireEvent("after-open", {}, false, false);
     }
     _beforePopoverClose(e) {
         const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, false);
@@ -364,7 +420,7 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     _afterPopoverClose() {
         this.open = false;
-        this.fireEvent("after-close");
+        this.fireEvent("after-close", {}, false, false);
     }
 };
 __decorate([
@@ -423,18 +479,26 @@ Menu = Menu_1 = __decorate([
     })
     /**
      * Fired when an item is being clicked.
+     * <br />
+     * <b>Note:</b> Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.
      *
-     * @event sap.ui.webc.main.Menu#item-click
-     * @param {object} item The currently clicked menu item.
-     * @param {string} text The text of the currently clicked menu item.
+     * @allowPreventDefault
+     * @param { HTMLElement } item The currently clicked menu item.
+     * @param { string } text The text of the currently clicked menu item.
      * @public
      */
     ,
     event("item-click", {
         detail: {
+            /**
+             * @public
+             */
             item: {
-                type: Object,
+                type: HTMLElement,
             },
+            /**
+             * @public
+             */
             text: {
                 type: String,
             },
@@ -442,19 +506,29 @@ Menu = Menu_1 = __decorate([
     })
     /**
      * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. <b>This event does not bubble.</b>
+     * <br />
+     * <b>Note:</b> Since 1.14.0 the event is also fired before a sub-menu opens.
      *
      * @public
-     * @event sap.ui.webc.main.Menu#before-open
      * @allowPreventDefault
      * @since 1.10.0
+     * @param { HTMLElement } item The <code>ui5-menu-item</code> that triggers opening of the sub-menu or undefined when fired upon root menu opening. <b>Note:</b> available since 1.14.0.
      */
     ,
-    event("before-open")
+    event("before-open", {
+        detail: {
+            /**
+             * @public
+             */
+            item: {
+                type: HTMLElement,
+            },
+        },
+    })
     /**
      * Fired after the menu is opened. <b>This event does not bubble.</b>
      *
      * @public
-     * @event sap.ui.webc.main.Menu#after-open
      * @since 1.10.0
      */
     ,
@@ -463,7 +537,6 @@ Menu = Menu_1 = __decorate([
      * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. <b>This event does not bubble.</b>
      *
      * @public
-     * @event sap.ui.webc.main.Menu#before-close
      * @allowPreventDefault
      * @param {boolean} escPressed Indicates that <code>ESC</code> key has triggered the event.
      * @since 1.10.0
@@ -471,14 +544,18 @@ Menu = Menu_1 = __decorate([
     ,
     event("before-close", {
         detail: {
-            escPressed: { type: Boolean },
+            /**
+             * @public
+             */
+            escPressed: {
+                type: Boolean,
+            },
         },
     })
     /**
      * Fired after the menu is closed. <b>This event does not bubble.</b>
      *
      * @public
-     * @event sap.ui.webc.main.Menu#after-close
      * @since 1.10.0
      */
     ,