@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/Menu.js

@@ -6,13 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var Menu_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { isLeft, isRight, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isPhone, isTablet, isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
 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";
@@ -21,44 +22,44 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Button from "./Button.js";
 import List from "./List.js";
+import MenuListItem from "./MenuListItem.js";
 import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
 import BusyIndicator from "./BusyIndicator.js";
-import staticAreaMenuTemplate from "./generated/templates/MenuTemplate.lit.js";
+import "./types/PopoverPlacement.js";
+import menuTemplate 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";
+import menuCss from "./generated/themes/Menu.css.js";
 const MENU_OPEN_DELAY = 300;
 const MENU_CLOSE_DELAY = 400;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * <code>ui5-menu</code> component represents a hierarchical menu structure.
+ * `ui5-menu` component represents a hierarchical menu structure.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * <code>ui5-menu</code> contains <code>ui5-menu-item</code> components.
+ * `ui5-menu` contains `ui5-menu-item` components.
  * An arbitrary hierarchy structure can be represented by recursively nesting menu items.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * The <code>ui5-menu</code> provides advanced keyboard handling.
+ * The `ui5-menu` provides advanced keyboard handling.
  * The user can use the following keyboard shortcuts in order to navigate trough the tree:
- * <ul>
- * <li><code>Arrow Up</code> / <code>Arrow Down</code> - Navigates up and down the menu items that are currently visible.</li>
- * <li><code>Arrow Right</code>, <code>Space</code> or <code>Enter</code> - Opens a sub-menu if there are menu items nested
- * in the currently clicked menu item.</li>
- * <li><code>Arrow Left</code> or <code>Escape</code> - Closes the currently opened sub-menu.</li>
- * </ul>
- * Note: if the text ditrection is set to Right-to-left (RTL), <code>Arrow Right</code> and <code>Arrow Left</code> functionality is swapped.
- * <br>
  *
- * <h3>ES6 Module Import</h3>
+ * - `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.
+ * - `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested
+ * in the currently clicked menu item.
+ * - `Arrow Left` or `Escape` - Closes the currently opened sub-menu.
  *
- * <code>import "@ui5/webcomponents/dist/Menu.js";</code>
+ * Note: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.
  *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Menu.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.3.0
@@ -77,8 +78,8 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     get isRtl() {
         return this.effectiveDir === "rtl";
     }
-    get placementType() {
-        const placement = this.isRtl ? "Left" : "Right";
+    get placement() {
+        const placement = this.isRtl ? "Start" : "End";
         return this._isSubMenu ? placement : "Bottom";
     }
     get verticalAlign() {
@@ -94,13 +95,13 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         return isPhone();
     }
     get isSubMenuOpened() {
-        return !!this._parentMenuItem;
+        return this._parentMenuItem && this._popover?.open;
     }
     get menuHeaderTextPhone() {
         return this._parentMenuItem ? this._parentMenuItem.text : this.headerText;
     }
     onBeforeRendering() {
-        !isPhone() && this._prepareCurrentItems(this.items);
+        this._prepareCurrentItems(this.items);
         const itemsWithChildren = this.itemsWithChildren;
         const itemsWithIcon = this.itemsWithIcon;
         this._currentItems.forEach(item => {
@@ -108,14 +109,14 @@ let Menu = Menu_1 = class Menu extends UI5Element {
             item.item._siblingsWithIcon = itemsWithIcon;
             const subMenu = item.item._subMenu;
             const menuItem = item.item;
-            if (subMenu && subMenu.busy) {
+            if (subMenu && subMenu.loading) {
                 subMenu.innerHTML = "";
                 const fragment = this._clonedItemsFragment(menuItem);
                 subMenu.appendChild(fragment);
             }
             if (subMenu) {
-                subMenu.busy = item.item.busy;
-                subMenu.busyDelay = item.item.busyDelay;
+                subMenu.loading = item.item.loading;
+                subMenu.loadingDelay = item.item.loadingDelay;
             }
         });
     }
@@ -125,7 +126,7 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         }
         if (this.open) {
             const opener = this.getOpener();
-            if (opener) {
+            if (opener && !this.isSubMenuOpened) {
                 this.showAt(opener);
             }
         }
@@ -135,45 +136,36 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     /**
      * Shows the Menu near the opener element.
-     *
      * @param opener the element that the popover is shown at
      * @public
      */
     async showAt(opener) {
-        if (isPhone()) {
-            this._prepareCurrentItems(this.items);
-            this._parentItemsStack = [];
-        }
         if (!this._isSubMenu) {
             this._parentMenuItem = undefined;
+            this._opener = undefined;
         }
+        const loadingWithoutItems = !this._parentMenuItem?.items.length && this._parentMenuItem?.loading;
         const popover = await this._createPopover();
-        popover.initialFocus = "";
-        for (let index = 0; index < this._currentItems.length; index++) {
-            if (!this._currentItems[index].item.disabled) {
-                popover.initialFocus = `${this._id}-menu-item-${index}`;
-                break;
-            }
-        }
-        popover.showAt(opener);
+        popover.initialFocus = `${this._id}-menu-item-0`;
+        popover.preventInitialFocus = !!loadingWithoutItems;
+        popover.opener = opener;
+        popover.open = true;
     }
     /**
      * Closes the Menu.
-     *
      * @public
      */
     close() {
         if (this._popover) {
-            if (isPhone()) {
-                this._parentItemsStack = [];
-            }
-            this._popover.close();
-            this._popover.resetFocus();
+            this._popover.preventFocusRestore = true;
+            this._popover.open = false;
         }
     }
     async _createPopover() {
-        const staticAreaItemDomRef = await this.getStaticAreaItemDomRef();
-        this._popover = staticAreaItemDomRef.querySelector("[ui5-responsive-popover]");
+        if (!this._popover) {
+            await renderFinished();
+            this._popover = this.shadowRoot.querySelector("[ui5-responsive-popover]");
+        }
         return this._popover;
     }
     getOpener() {
@@ -181,13 +173,11 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         return this.opener instanceof HTMLElement ? this.opener : rootNode?.getElementById?.(this.opener);
     }
     _navigateBack() {
-        const parentMenuItem = this._parentItemsStack.pop();
-        this.focus();
-        if (parentMenuItem) {
-            const parentMenuItemParent = parentMenuItem.parentElement;
-            this._prepareCurrentItems(parentMenuItemParent.items);
-            this._parentMenuItem = this._parentItemsStack.length ? this._parentItemsStack[this._parentItemsStack.length - 1] : undefined;
-        }
+        this._closeItemSubMenu(this._parentMenuItem, true);
+    }
+    _closeAll() {
+        const mainMenu = this._findMainMenu(this);
+        mainMenu?.close();
     }
     _prepareCurrentItems(items) {
         this._currentItems = items.map((item, index) => {
@@ -198,17 +188,21 @@ let Menu = Menu_1 = class Menu extends UI5Element {
             };
         });
     }
-    _createSubMenu(item, openerId) {
+    _createSubMenu(item, opener) {
+        if (item._subMenu) {
+            return;
+        }
         const ctor = this.constructor;
         const subMenu = document.createElement(ctor.getMetadata().getTag());
         subMenu._isSubMenu = true;
-        subMenu.setAttribute("id", `submenu-${openerId}`);
+        subMenu.setAttribute("id", `submenu-${opener.id}`);
         subMenu._parentMenuItem = item;
-        subMenu.busy = item.busy;
-        subMenu.busyDelay = item.busyDelay;
+        subMenu._opener = opener;
+        subMenu.loading = item.loading;
+        subMenu.loadingDelay = item.loadingDelay;
         const fragment = this._clonedItemsFragment(item);
         subMenu.appendChild(fragment);
-        this.staticAreaItem.shadowRoot.querySelector(".ui5-menu-submenus").appendChild(subMenu);
+        this.shadowRoot.querySelector(".ui5-menu-submenus").appendChild(subMenu);
         item._subMenu = subMenu;
     }
     _clonedItemsFragment(item) {
@@ -219,93 +213,89 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         }
         return fragment;
     }
-    _openItemSubMenu(item, opener, actionId) {
+    _openItemSubMenu(item, opener) {
         const mainMenu = this._findMainMenu(item);
-        mainMenu.fireEvent("before-open", {
+        mainMenu?.fireEvent("before-open", {
             item,
         }, false, false);
-        item._subMenu.showAt(opener);
+        item._subMenu.opener = opener;
+        item._subMenu.open = true;
         item._preventSubMenuClose = true;
         this._openedSubMenuItem = item;
-        this._subMenuOpenerId = actionId;
+        this._subMenuOpenerId = opener.id;
     }
-    _closeItemSubMenu(item, forceClose = false) {
+    _closeItemSubMenu(item, forceClose = false, keyboard = false) {
         if (item) {
             if (forceClose) {
                 item._preventSubMenuClose = false;
-                this._closeSubMenuPopover(item._subMenu, true);
+                this._closeSubMenuPopover(item._subMenu, forceClose, keyboard);
             }
             else {
                 setTimeout(() => this._closeSubMenuPopover(item._subMenu), 0);
             }
         }
     }
-    _closeSubMenuPopover(subMenu, forceClose = false) {
+    _closeSubMenuPopover(subMenu, forceClose = false, keyboard = false) {
         if (subMenu) {
             const parentItem = subMenu._parentMenuItem;
             if (forceClose || !parentItem._preventSubMenuClose) {
-                subMenu.close();
-                subMenu.remove();
-                parentItem._subMenu = undefined;
+                subMenu.open = false;
+                if (keyboard) {
+                    subMenu._opener?.focus();
+                }
                 this._openedSubMenuItem = undefined;
                 this._subMenuOpenerId = "";
             }
         }
     }
-    _prepareSubMenuDesktopTablet(item, opener, actionId) {
-        if (actionId !== this._subMenuOpenerId || (item && item.hasSubmenu)) {
+    _prepareSubMenu(item, opener) {
+        if (opener.id !== this._subMenuOpenerId || (item && item.hasSubmenu)) {
             // close opened sub-menu if there is any opened
             this._closeItemSubMenu(this._openedSubMenuItem, true);
         }
         if (item && item.hasSubmenu) {
             // create new sub-menu
-            this._createSubMenu(item, actionId);
-            this._openItemSubMenu(item, opener, actionId);
+            this._createSubMenu(item, opener);
+            this._openItemSubMenu(item, opener);
         }
         if (this._parentMenuItem) {
             this._parentMenuItem._preventSubMenuClose = true;
         }
     }
-    _prepareSubMenuPhone(item) {
-        this._prepareCurrentItems(item.items);
-        this._parentMenuItem = item;
-        this._parentItemsStack.push(item);
+    _onfocusin(e) {
+        const target = e.target;
+        const menuListItem = target.hasAttribute("ui5-menu-li")
+            ? target
+            : target.getRootNode().host;
+        const item = menuListItem.associatedItem;
+        const mainMenu = this._findMainMenu(item);
+        mainMenu?.fireEvent("item-focus", { ref: menuListItem, item });
     }
-    _startOpenTimeout(item, opener, hoverId) {
-        // If theres already a timeout, clears it
-        this._clearTimeout();
+    _startOpenTimeout(item, opener) {
+        clearTimeout(this._timeout);
         // Sets the new timeout
         this._timeout = setTimeout(() => {
-            this._prepareSubMenuDesktopTablet(item, opener, hoverId);
+            this._prepareSubMenu(item, opener);
         }, MENU_OPEN_DELAY);
     }
     _startCloseTimeout(item) {
-        // If theres already a timeout, clears it
-        this._clearTimeout();
+        clearTimeout(this._timeout);
         // 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
             const opener = e.target;
             const item = opener.associatedItem;
-            const hoverId = opener.getAttribute("id");
             opener.focus();
-            // If there is a pending close operation, cancel it
-            this._clearTimeout();
             // Opens submenu with 300ms delay
-            this._startOpenTimeout(item, opener, hoverId);
+            this._startOpenTimeout(item, opener);
         }
     }
-    _busyMouseOver() {
+    _loadingMouseOver() {
         if (this._parentMenuItem) {
             this._parentMenuItem._preventSubMenuClose = true;
         }
@@ -314,8 +304,7 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         if (isDesktop()) {
             const opener = e.target;
             const item = opener.associatedItem;
-            // If there is a pending open operation, cancel it
-            this._clearTimeout();
+            clearTimeout(this._timeout);
             // Close submenu with 400ms delay
             if (item && item.hasSubmenu && item._subMenu) {
                 // try to close the sub-menu
@@ -325,39 +314,34 @@ let Menu = Menu_1 = class Menu extends UI5Element {
         }
     }
     _itemKeyDown(e) {
-        const isMenuClose = this.isRtl ? isRight(e) : isLeft(e);
-        const isMenuOpen = this.isRtl ? isLeft(e) : isRight(e);
+        const shouldCloseMenu = this.isRtl ? isRight(e) : isLeft(e);
+        const shouldOpenMenu = this.isRtl ? isLeft(e) : isRight(e);
         if (isEnter(e)) {
             e.preventDefault();
         }
-        if (isMenuOpen) {
+        if (shouldOpenMenu) {
             const opener = e.target;
             const item = opener.associatedItem;
-            const hoverId = opener.getAttribute("id");
-            item.hasSubmenu && this._prepareSubMenuDesktopTablet(item, opener, hoverId);
+            item.hasSubmenu && this._prepareSubMenu(item, opener);
         }
-        else if (isMenuClose && this._isSubMenu && this._parentMenuItem) {
+        else if (shouldCloseMenu && this._isSubMenu && this._parentMenuItem) {
             const parentMenuItemParent = this._parentMenuItem.parentElement;
-            parentMenuItemParent._closeItemSubMenu(this._parentMenuItem, true);
+            parentMenuItemParent._closeItemSubMenu(this._parentMenuItem, true, true);
         }
     }
     _itemClick(e) {
         const opener = e.detail.item;
         const item = opener.associatedItem;
-        const actionId = opener.getAttribute("id");
         if (!item.hasSubmenu) {
             // click on an item that doesn't have sub-items fires an "item-click" event
             if (!this._isSubMenu) {
-                if (isPhone()) {
-                    this._parentMenuItem = undefined;
-                }
                 // fire event if the click is on top-level menu item
                 const prevented = !this.fireEvent("item-click", {
                     "item": item,
                     "text": item.text,
                 }, true, false);
                 if (!prevented) {
-                    this._popover.close();
+                    this._popover.open = false;
                 }
             }
             else {
@@ -375,25 +359,24 @@ let Menu = Menu_1 = class Menu extends UI5Element {
                         parentMenu = openerMenuItem.parentElement;
                         openerMenuItem = parentMenu._parentMenuItem;
                     } while (parentMenu._parentMenuItem);
-                    mainMenu._popover.close();
+                    mainMenu._popover.preventFocusRestore = false;
+                    mainMenu._popover.open = false;
                 }
             }
         }
-        else if (isPhone()) {
-            // prepares and opens sub-menu on phone
-            this._prepareSubMenuPhone(item);
-        }
-        else if (isTablet()) {
-            // prepares and opens sub-menu on tablet
-            this._prepareSubMenuDesktopTablet(item, opener, actionId);
+        else {
+            this._prepareSubMenu(item, opener);
         }
     }
-    _findMainMenu(item) {
-        let parentMenu = item.parentElement;
-        while (parentMenu._parentMenuItem) {
-            parentMenu = parentMenu._parentMenuItem.parentElement;
+    _findMainMenu(element) {
+        let menu = this._isMenu(element) ? element : element.parentElement;
+        while (menu && menu._parentMenuItem) {
+            menu = menu._parentMenuItem.parentElement;
         }
-        return parentMenu;
+        return menu;
+    }
+    _isMenu(element) {
+        return element.hasAttribute("ui5-menu");
     }
     _beforePopoverOpen(e) {
         const prevented = !this.fireEvent("before-open", {}, true, false);
@@ -404,7 +387,7 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     _afterPopoverOpen() {
         this.open = true;
-        this.fireEvent("after-open", {}, false, false);
+        this.fireEvent("open", {}, false, false);
     }
     _beforePopoverClose(e) {
         const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, false);
@@ -420,7 +403,7 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     _afterPopoverClose() {
         this.open = false;
-        this.fireEvent("after-close", {}, false, false);
+        this.fireEvent("close", {}, false, false);
     }
 };
 __decorate([
@@ -431,10 +414,10 @@ __decorate([
 ], Menu.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean })
-], Menu.prototype, "busy", void 0);
+], Menu.prototype, "loading", void 0);
 __decorate([
     property({ validator: Integer, defaultValue: 1000 })
-], Menu.prototype, "busyDelay", void 0);
+], Menu.prototype, "loadingDelay", void 0);
 __decorate([
     property({ validator: DOMReference, defaultValue: "" })
 ], Menu.prototype, "opener", void 0);
@@ -447,15 +430,15 @@ __decorate([
 __decorate([
     property({ type: Object, multiple: true })
 ], Menu.prototype, "_currentItems", void 0);
-__decorate([
-    property({ type: Object, multiple: true })
-], Menu.prototype, "_parentItemsStack", void 0);
 __decorate([
     property({ type: Object, defaultValue: undefined })
 ], Menu.prototype, "_popover", void 0);
 __decorate([
     property({ type: Object, defaultValue: undefined })
 ], Menu.prototype, "_parentMenuItem", void 0);
+__decorate([
+    property({ type: Object, defaultValue: undefined })
+], Menu.prototype, "_opener", void 0);
 __decorate([
     property({ type: Object, defaultValue: undefined })
 ], Menu.prototype, "_openedSubMenuItem", void 0);
@@ -466,22 +449,22 @@ Menu = Menu_1 = __decorate([
     customElement({
         tag: "ui5-menu",
         renderer: litRender,
-        staticAreaStyles: staticAreaMenuCss,
-        staticAreaTemplate: staticAreaMenuTemplate,
+        styles: menuCss,
+        template: menuTemplate,
         dependencies: [
             ResponsivePopover,
             Button,
             List,
             StandardListItem,
+            MenuListItem,
             Icon,
             BusyIndicator,
         ],
     })
     /**
      * 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.
      *
+     * **Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.
      * @allowPreventDefault
      * @param { HTMLElement } item The currently clicked menu item.
      * @param { string } text The text of the currently clicked menu item.
@@ -505,20 +488,20 @@ 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.
+     * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.**
      *
+     * **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.
      * @public
      * @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.
+     * @param { HTMLElement } item The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening.
      */
     ,
     event("before-open", {
         detail: {
             /**
              * @public
+             * @since 1.14.0
              */
             item: {
                 type: HTMLElement,
@@ -526,19 +509,17 @@ Menu = Menu_1 = __decorate([
         },
     })
     /**
-     * Fired after the menu is opened. <b>This event does not bubble.</b>
-     *
+     * Fired after the menu is opened. **This event does not bubble.**
      * @public
      * @since 1.10.0
      */
     ,
-    event("after-open")
+    event("open")
     /**
-     * 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>
-     *
+     * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.**
      * @public
      * @allowPreventDefault
-     * @param {boolean} escPressed Indicates that <code>ESC</code> key has triggered the event.
+     * @param {boolean} escPressed Indicates that `ESC` key has triggered the event.
      * @since 1.10.0
      */
     ,
@@ -553,13 +534,37 @@ Menu = Menu_1 = __decorate([
         },
     })
     /**
-     * Fired after the menu is closed. <b>This event does not bubble.</b>
-     *
+     * Fired after the menu is closed. **This event does not bubble.**
      * @public
      * @since 1.10.0
      */
     ,
-    event("after-close")
+    event("close")
+    /**
+     * Fired when a menu item receives focus.
+     *
+     * @public
+     * @param { HTMLElement } ref The currently focused element representing a <code>ui5-menu-item</code>.
+     * @param { HTMLElement } item The <code>ui5-menu-item</code> represented by the focused element.
+     * @since 1.23.1
+     */
+    ,
+    event("item-focus", {
+        detail: {
+            /**
+             * @public
+             */
+            ref: {
+                type: HTMLElement,
+            },
+            /**
+             * @public
+             */
+            item: {
+                type: HTMLElement,
+            },
+        },
+    })
 ], Menu);
 Menu.define();
 export default Menu;