@ui5/webcomponents 2.0.0-rc.3 → 2.0.0-rc.4

package/dist/Menu.d.ts

@@ -4,15 +4,8 @@ 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 PopoverPlacement from "./types/PopoverPlacement.js";
+import MenuItem from "./MenuItem.js";
 import type { ListItemClickEventDetail } from "./List.js";
-type CurrentItem = {
-    item: MenuItem;
-    position: number;
-    ariaHasPopup: string | undefined;
-};
 type MenuItemClickEventDetail = {
     item: MenuItem;
     text: string;
@@ -23,13 +16,6 @@ type MenuBeforeOpenEventDetail = {
 type MenuBeforeCloseEventDetail = {
     escPressed: boolean;
 };
-type MenuItemFocusEventDetail = {
-    ref: HTMLElement;
-    item: MenuItem;
-};
-type OpenerStandardListItem = StandardListItem & {
-    associatedItem: MenuItem;
-};
 /**
  * @class
  *
@@ -91,47 +77,14 @@ declare class Menu extends UI5Element {
      */
     loadingDelay: number;
     /**
-     * Defines the ID or DOM Reference of the element that the menu is shown at
+     * Defines the ID or DOM Reference of the element at which the menu is shown.
+     * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.
+     * You can only set the `opener` attribute to a DOM Reference when using JavaScript.
      * @public
      * @default ""
      * @since 1.10.0
      */
     opener: HTMLElement | string;
-    /**
-     * Defines if the menu is sub-menu (not first-level).
-     * @default false
-     * @private
-     */
-    _isSubMenu: boolean;
-    /**
-     * Stores id of a list item that opened sub-menu.
-     * @private
-     */
-    _subMenuOpenerId: string;
-    /**
-     * Defines the currently available menu items.
-     * (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)
-     * @private
-     */
-    _currentItems: Array<CurrentItem>;
-    /**
-     * Stores the ResponsivePopover instance
-     */
-    _popover?: ResponsivePopover;
-    /**
-     * Stores parent menu item (if there is such).
-     */
-    _parentMenuItem?: MenuItem;
-    /**
-     * Stores parent menu item DOM representation (if there is such).
-     */
-    _opener?: HTMLElement;
-    /**
-     * Stores menu item that have sub-menu opened.
-     */
-    _openedSubMenuItem?: MenuItem;
     /**
      * Defines the items of this component.
      *
@@ -142,54 +95,22 @@ declare class Menu extends UI5Element {
     static i18nBundle: I18nBundle;
     _timeout?: Timeout;
     static onDefine(): Promise<void>;
-    get itemsWithChildren(): boolean;
-    get itemsWithIcon(): boolean;
     get isRtl(): boolean;
-    get placement(): `${PopoverPlacement}`;
-    get verticalAlign(): "Top" | "Bottom";
-    get labelBack(): string;
     get labelClose(): string;
     get isPhone(): boolean;
-    get isSubMenuOpened(): boolean | undefined;
-    get menuHeaderTextPhone(): string;
+    get _popover(): ResponsivePopover;
     onBeforeRendering(): void;
-    onAfterRendering(): void;
-    /**
-     * Shows the Menu near the opener element.
-     * @param opener the element that the popover is shown at
-     * @public
-     */
-    showAt(opener: HTMLElement): Promise<void>;
-    /**
-     * Closes the Menu.
-     * @public
-     */
-    close(): void;
-    _createPopover(): Promise<ResponsivePopover>;
-    getOpener(): HTMLElement | null;
-    _navigateBack(): void;
-    _closeAll(): void;
-    _prepareCurrentItems(items: Array<MenuItem>): void;
-    _createSubMenu(item: MenuItem, opener: HTMLElement): void;
-    _clonedItemsFragment(item: MenuItem): DocumentFragment;
-    _openItemSubMenu(item: MenuItem, opener: HTMLElement): void;
-    _closeItemSubMenu(item: MenuItem, forceClose?: boolean, keyboard?: boolean): void;
-    _closeSubMenuPopover(subMenu: Menu, forceClose?: boolean, keyboard?: boolean): void;
-    _prepareSubMenu(item: MenuItem, opener: HTMLElement): void;
-    _onfocusin(e: FocusEvent): void;
-    _startOpenTimeout(item: MenuItem, opener: OpenerStandardListItem): void;
-    _startCloseTimeout(item: MenuItem): void;
+    _close(): void;
+    _openItemSubMenu(item: MenuItem): void;
+    _closeItemSubMenu(item: MenuItem): void;
     _itemMouseOver(e: MouseEvent): void;
-    _loadingMouseOver(): void;
-    _itemMouseOut(e: MouseEvent): void;
-    _itemKeyDown(e: KeyboardEvent): void;
+    _startOpenTimeout(item: MenuItem): void;
     _itemClick(e: CustomEvent<ListItemClickEventDetail>): void;
-    _findMainMenu(element: MenuItem | Menu): Menu;
-    _isMenu(element: HTMLElement): boolean;
+    _itemKeyDown(e: KeyboardEvent): void;
     _beforePopoverOpen(e: CustomEvent): void;
     _afterPopoverOpen(): void;
     _beforePopoverClose(e: CustomEvent<ResponsivePopoverBeforeCloseEventDetail>): void;
     _afterPopoverClose(): void;
 }
 export default Menu;
-export type { MenuItemClickEventDetail, MenuBeforeCloseEventDetail, MenuBeforeOpenEventDetail, MenuItemFocusEventDetail, };
+export type { MenuItemClickEventDetail, MenuBeforeCloseEventDetail, MenuBeforeOpenEventDetail, };

package/dist/Menu.js

@@ -6,7 +6,6 @@ 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";
@@ -22,17 +21,14 @@ 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 "./types/PopoverPlacement.js";
+import MenuItem from "./MenuItem.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";
+import { MENU_CLOSE_BUTTON_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import menuCss from "./generated/themes/Menu.css.js";
 const MENU_OPEN_DELAY = 300;
-const MENU_CLOSE_DELAY = 400;
 /**
  * @class
  *
@@ -69,310 +65,103 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     static async onDefine() {
         Menu_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
-    get itemsWithChildren() {
-        return !!this._currentItems.filter(item => item.item.items.length).length;
-    }
-    get itemsWithIcon() {
-        return !!this._currentItems.filter(item => item.item.icon !== "").length;
-    }
     get isRtl() {
         return this.effectiveDir === "rtl";
     }
-    get placement() {
-        const placement = this.isRtl ? "Start" : "End";
-        return this._isSubMenu ? placement : "Bottom";
-    }
-    get verticalAlign() {
-        return this._isSubMenu ? "Top" : "Bottom";
-    }
-    get labelBack() {
-        return Menu_1.i18nBundle.getText(MENU_BACK_BUTTON_ARIA_LABEL);
-    }
     get labelClose() {
         return Menu_1.i18nBundle.getText(MENU_CLOSE_BUTTON_ARIA_LABEL);
     }
     get isPhone() {
         return isPhone();
     }
-    get isSubMenuOpened() {
-        return this._parentMenuItem && this._popover?.isOpen();
-    }
-    get menuHeaderTextPhone() {
-        return this._parentMenuItem ? this._parentMenuItem.text : this.headerText;
+    get _popover() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
     }
     onBeforeRendering() {
-        this._prepareCurrentItems(this.items);
-        const itemsWithChildren = this.itemsWithChildren;
-        const itemsWithIcon = this.itemsWithIcon;
-        this._currentItems.forEach(item => {
-            item.item._siblingsWithChildren = itemsWithChildren;
-            item.item._siblingsWithIcon = itemsWithIcon;
-            const subMenu = item.item._subMenu;
-            const menuItem = item.item;
-            if (subMenu && subMenu.loading) {
-                subMenu.innerHTML = "";
-                const fragment = this._clonedItemsFragment(menuItem);
-                subMenu.appendChild(fragment);
-            }
-            if (subMenu) {
-                subMenu.loading = item.item.loading;
-                subMenu.loadingDelay = item.item.loadingDelay;
-            }
+        const siblingsWithIcon = this.items.some(item => !!item.icon);
+        this.items.forEach(item => {
+            item._siblingsWithIcon = siblingsWithIcon;
         });
     }
-    onAfterRendering() {
-        if (!this.opener) {
-            return;
-        }
-        if (this.open) {
-            const opener = this.getOpener();
-            if (opener && !this.isSubMenuOpened) {
-                this.showAt(opener);
-            }
-        }
-        else {
-            this.close();
-        }
-    }
-    /**
-     * Shows the Menu near the opener element.
-     * @param opener the element that the popover is shown at
-     * @public
-     */
-    async showAt(opener) {
-        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 = `${this._id}-menu-item-0`;
-        popover.showAt(opener, loadingWithoutItems);
-    }
-    /**
-     * Closes the Menu.
-     * @public
-     */
-    close() {
-        this._popover?.close(false, false, true);
-    }
-    async _createPopover() {
-        if (!this._popover) {
-            await renderFinished();
-            this._popover = this.shadowRoot.querySelector("[ui5-responsive-popover]");
-        }
-        return this._popover;
-    }
-    getOpener() {
-        const rootNode = this.getRootNode();
-        return this.opener instanceof HTMLElement ? this.opener : rootNode?.getElementById?.(this.opener);
-    }
-    _navigateBack() {
-        this._closeItemSubMenu(this._parentMenuItem, true);
-    }
-    _closeAll() {
-        const mainMenu = this._findMainMenu(this);
-        mainMenu?.close();
-    }
-    _prepareCurrentItems(items) {
-        this._currentItems = items.map((item, index) => {
-            return {
-                item,
-                position: index + 1,
-                ariaHasPopup: item.hasSubmenu ? "menu" : undefined,
-            };
-        });
+    _close() {
+        this.open = false;
     }
-    _createSubMenu(item, opener) {
-        if (item._subMenu) {
+    _openItemSubMenu(item) {
+        clearTimeout(this._timeout);
+        if (!item._popover || item._popover.open) {
             return;
         }
-        const ctor = this.constructor;
-        const subMenu = document.createElement(ctor.getMetadata().getTag());
-        subMenu._isSubMenu = true;
-        subMenu.setAttribute("id", `submenu-${opener.id}`);
-        subMenu._parentMenuItem = item;
-        subMenu._opener = opener;
-        subMenu.loading = item.loading;
-        subMenu.loadingDelay = item.loadingDelay;
-        const fragment = this._clonedItemsFragment(item);
-        subMenu.appendChild(fragment);
-        this.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) {
-        const mainMenu = this._findMainMenu(item);
-        mainMenu?.fireEvent("before-open", {
+        this.fireEvent("before-open", {
             item,
         }, false, false);
-        item._subMenu.showAt(opener);
-        item._preventSubMenuClose = true;
-        this._openedSubMenuItem = item;
-        this._subMenuOpenerId = opener.id;
-    }
-    _closeItemSubMenu(item, forceClose = false, keyboard = false) {
-        if (item) {
-            if (forceClose) {
-                item._preventSubMenuClose = false;
-                this._closeSubMenuPopover(item._subMenu, forceClose, keyboard);
-            }
-            else {
-                setTimeout(() => this._closeSubMenuPopover(item._subMenu), 0);
+        item._popover.opener = item;
+        item._popover.open = true;
+        item.selected = true;
+    }
+    _closeItemSubMenu(item) {
+        if (item && item._popover) {
+            const openedSibling = item.items.find(menuItem => menuItem._popover && menuItem._popover.open);
+            if (openedSibling) {
+                this._closeItemSubMenu(openedSibling);
             }
+            item._popover.open = false;
+            item.selected = false;
         }
     }
-    _closeSubMenuPopover(subMenu, forceClose = false, keyboard = false) {
-        if (subMenu) {
-            const parentItem = subMenu._parentMenuItem;
-            if (forceClose || !parentItem._preventSubMenuClose) {
-                subMenu.close();
-                if (keyboard) {
-                    subMenu._opener?.focus();
-                }
-                this._openedSubMenuItem = undefined;
-                this._subMenuOpenerId = "";
-            }
-        }
-    }
-    _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, opener);
-            this._openItemSubMenu(item, opener);
-        }
-        if (this._parentMenuItem) {
-            this._parentMenuItem._preventSubMenuClose = true;
-        }
-    }
-    _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) {
-        clearTimeout(this._timeout);
-        // Sets the new timeout
-        this._timeout = setTimeout(() => {
-            this._prepareSubMenu(item, opener);
-        }, MENU_OPEN_DELAY);
-    }
-    _startCloseTimeout(item) {
-        clearTimeout(this._timeout);
-        // Sets the new timeout
-        this._timeout = setTimeout(() => {
-            this._closeItemSubMenu(item);
-        }, MENU_CLOSE_DELAY);
-    }
     _itemMouseOver(e) {
         if (isDesktop()) {
             // respect mouseover only on desktop
-            const opener = e.target;
-            const item = opener.associatedItem;
-            opener.focus();
+            const item = e.target;
+            item.focus();
             // Opens submenu with 300ms delay
-            this._startOpenTimeout(item, opener);
+            this._startOpenTimeout(item);
         }
     }
-    _loadingMouseOver() {
-        if (this._parentMenuItem) {
-            this._parentMenuItem._preventSubMenuClose = true;
-        }
+    _startOpenTimeout(item) {
+        clearTimeout(this._timeout);
+        this._timeout = setTimeout(() => {
+            const opener = item.parentElement;
+            const openedSibling = opener && opener.items.find(menuItem => menuItem._popover && menuItem._popover.open);
+            if (openedSibling) {
+                this._closeItemSubMenu(openedSibling);
+            }
+            this._openItemSubMenu(item);
+        }, MENU_OPEN_DELAY);
     }
-    _itemMouseOut(e) {
-        if (isDesktop()) {
-            const opener = e.target;
-            const item = opener.associatedItem;
-            clearTimeout(this._timeout);
-            // Close submenu with 400ms delay
-            if (item && item.hasSubmenu && item._subMenu) {
-                // try to close the sub-menu
-                item._preventSubMenuClose = false;
-                this._startCloseTimeout(item);
+    _itemClick(e) {
+        const item = e.detail.item;
+        if (!item._popover) {
+            const prevented = !this.fireEvent("item-click", {
+                "item": item,
+                "text": item.text,
+            }, true, false);
+            if (!prevented && this._popover) {
+                item.fireEvent("close-menu", {});
             }
         }
+        else {
+            this._openItemSubMenu(item);
+        }
     }
     _itemKeyDown(e) {
         const shouldCloseMenu = this.isRtl ? isRight(e) : isLeft(e);
         const shouldOpenMenu = this.isRtl ? isLeft(e) : isRight(e);
+        const item = e.target;
+        const parentElement = item.parentElement;
         if (isEnter(e)) {
             e.preventDefault();
         }
         if (shouldOpenMenu) {
-            const opener = e.target;
-            const item = opener.associatedItem;
-            item.hasSubmenu && this._prepareSubMenu(item, opener);
+            this._openItemSubMenu(item);
         }
-        else if (shouldCloseMenu && this._isSubMenu && this._parentMenuItem) {
-            const parentMenuItemParent = this._parentMenuItem.parentElement;
-            parentMenuItemParent._closeItemSubMenu(this._parentMenuItem, true, true);
+        else if (shouldCloseMenu && parentElement.hasAttribute("ui5-menu-item") && parentElement._popover) {
+            parentElement._popover.open = false;
+            parentElement.selected = false;
+            parentElement._popover.opener?.focus();
         }
     }
-    _itemClick(e) {
-        const opener = e.detail.item;
-        const item = opener.associatedItem;
-        if (!item.hasSubmenu) {
-            // click on an item that doesn't have sub-items fires an "item-click" event
-            if (!this._isSubMenu) {
-                // 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();
-                }
-            }
-            else {
-                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();
-                }
-            }
-        }
-        else {
-            this._prepareSubMenu(item, opener);
-        }
-    }
-    _findMainMenu(element) {
-        let menu = this._isMenu(element) ? element : element.parentElement;
-        while (menu && menu._parentMenuItem) {
-            menu = menu._parentMenuItem.parentElement;
-        }
-        return menu;
-    }
-    _isMenu(element) {
-        return element.hasAttribute("ui5-menu");
-    }
     _beforePopoverOpen(e) {
-        const prevented = !this.fireEvent("before-open", {}, true, false);
+        const prevented = !this.fireEvent("before-open", {}, true, true);
         if (prevented) {
             this.open = false;
             e.preventDefault();
@@ -380,23 +169,19 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     }
     _afterPopoverOpen() {
         this.open = true;
-        this.fireEvent("open", {}, false, false);
+        this.items[0]?.focus();
+        this.fireEvent("open", {}, false, true);
     }
     _beforePopoverClose(e) {
-        const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, false);
+        const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, true);
         if (prevented) {
             this.open = true;
             e.preventDefault();
-            return;
-        }
-        if (this._openedSubMenuItem) {
-            this._openedSubMenuItem._preventSubMenuClose = false;
-            this._closeItemSubMenu(this._openedSubMenuItem);
         }
     }
     _afterPopoverClose() {
         this.open = false;
-        this.fireEvent("close", {}, false, false);
+        this.fireEvent("close", {}, false, true);
     }
 };
 __decorate([
@@ -414,27 +199,6 @@ __decorate([
 __decorate([
     property({ validator: DOMReference, defaultValue: "" })
 ], Menu.prototype, "opener", void 0);
-__decorate([
-    property({ type: Boolean, noAttribute: true })
-], Menu.prototype, "_isSubMenu", void 0);
-__decorate([
-    property()
-], Menu.prototype, "_subMenuOpenerId", void 0);
-__decorate([
-    property({ type: Object, multiple: true })
-], Menu.prototype, "_currentItems", 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);
 __decorate([
     slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 ], Menu.prototype, "items", void 0);
@@ -448,8 +212,7 @@ Menu = Menu_1 = __decorate([
             ResponsivePopover,
             Button,
             List,
-            StandardListItem,
-            MenuListItem,
+            MenuItem,
             Icon,
             BusyIndicator,
         ],
@@ -533,31 +296,6 @@ Menu = Menu_1 = __decorate([
      */
     ,
     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;