@sapui5/sap.ushell 1.138.0 → 1.139.0

package/src/main/js/sap/ushell/thirdparty/Menu.js

@@ -1,73 +1,15 @@
-sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/webcomponents', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/Icons', 'sap/ushell/thirdparty/i18n-defaults', 'sap/ushell/thirdparty/ListItemTemplate', 'sap/ushell/thirdparty/MenuItem2', 'sap/ushell/thirdparty/ListItemCustom', 'sap/ushell/thirdparty/BusyIndicator', 'sap/ushell/thirdparty/List', 'sap/ushell/thirdparty/Button2', 'sap/ushell/thirdparty/information', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/Icon', 'sap/ushell/thirdparty/Label'], (function (webcomponentsBase, webcomponents, eventStrict, Icons, i18nDefaults, ListItemTemplate, MenuItem, ListItemCustom, BusyIndicator, List, Button, information, toLowercaseEnumValue, Icon, Label) { 'use strict';
-
-    function MenuSeparatorTemplate() {
-        return (i18nDefaults.jsx(ListItemCustom.ListItemCustom, { class: "ui5-menu-separator", _forcedAccessibleRole: "separator", disabled: true }));
-    }
-
-    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => i18nDefaults.defaultThemeBase);
-    Icons.p("@ui5/webcomponents", "sap_horizon", async () => i18nDefaults.defaultTheme);
-    var menuSeparatorCss = `:host{border-top:.0625rem solid var(--sapGroup_ContentBorderColor);min-height:.125rem}.ui5-menu-separator{border:inherit;min-height:inherit;background:inherit;opacity:1}
-`;
-
-    var __decorate$1 = (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;
-    };
-    /**
-     * @class
-     * The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.
-     * @constructor
-     * @extends ListItemBase
-     * @implements {IMenuItem}
-     * @public
-     * @since 2.0.0
-     */
-    let MenuSeparator = class MenuSeparator extends BusyIndicator.ListItemBase {
-        get isSeparator() {
-            return true;
-        }
-        get classes() {
-            return {
-                main: {
-                    "ui5-menu-separator": true,
-                },
-            };
-        }
-        /**
-         * @override
-         */
-        get _focusable() {
-            return false;
-        }
-        /**
-         * @override
-         */
-        get _pressable() {
-            return false;
-        }
-    };
-    MenuSeparator = __decorate$1([
-        webcomponentsBase.m({
-            tag: "ui5-menu-separator",
-            renderer: i18nDefaults.y,
-            styles: [menuSeparatorCss],
-            template: MenuSeparatorTemplate,
-        })
-    ], MenuSeparator);
-    MenuSeparator.define();
+sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/webcomponents', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/Icons', 'sap/ushell/thirdparty/i18n-defaults', 'sap/ushell/thirdparty/ListItemCustom', 'sap/ushell/thirdparty/parameters-bundle.css2', 'sap/ushell/thirdparty/ResponsivePopover', 'sap/ushell/thirdparty/MenuItem2', 'sap/ushell/thirdparty/List', 'sap/ushell/thirdparty/BusyIndicator', 'sap/ushell/thirdparty/Button2', 'sap/ushell/thirdparty/information', 'sap/ushell/thirdparty/ListItemBase', 'sap/ushell/thirdparty/Icon', 'sap/ushell/thirdparty/ValueState', 'sap/ushell/thirdparty/AccessibilityTextsHelper', 'sap/ushell/thirdparty/Label', 'sap/ushell/thirdparty/Title', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/ListItemGroup', 'sap/ushell/thirdparty/willShowContent'], (function (webcomponentsBase, webcomponents, eventStrict, Icons, i18nDefaults, ListItemCustom, parametersBundle_css, ResponsivePopover, MenuItem, List, BusyIndicator, Button, information, ListItemBase, Icon, ValueState, AccessibilityTextsHelper, Label, Title, toLowercaseEnumValue, ListItemGroup, willShowContent) { 'use strict';
 
     function MenuTemplate() {
-        return (i18nDefaults.jsxs(ListItemTemplate.ResponsivePopover, { id: `${this._id}-menu-rp`, class: "ui5-menu-rp", placement: "Bottom", verticalAlign: "Bottom", horizontalAlign: this.horizontalAlign, opener: this.opener, open: this.open, preventInitialFocus: true, hideArrow: true, allowTargetOverlap: true, accessibleName: this.acessibleNameText, onBeforeOpen: this._beforePopoverOpen, onOpen: this._afterPopoverOpen, onBeforeClose: this._beforePopoverClose, onClose: this._afterPopoverClose, children: [this.isPhone &&
-                    i18nDefaults.jsxs("div", { slot: "header", class: "ui5-menu-dialog-header", children: [i18nDefaults.jsx("div", { class: "ui5-menu-dialog-title", children: i18nDefaults.jsx("h1", { children: this.headerText }) }), i18nDefaults.jsx(Button.Button, { icon: information.decline, design: "Transparent", "aria-label": this.labelClose, onClick: this._close })] }), i18nDefaults.jsx("div", { id: `${this._id}-menu-main`, children: this.items.length ?
-                        (i18nDefaults.jsx(List.List, { id: `${this._id}- menu-list`, selectionMode: "None", loading: this.loading, loadingDelay: this.loadingDelay, separators: "None", accessibleRole: "Menu", onItemClick: this._itemClick, onMouseOver: this._itemMouseOver, onKeyDown: this._itemKeyDown, "onui5-close-menu": this._close, "onui5-exit-end-content": this._navigateOutOfEndContent, children: i18nDefaults.jsx("slot", {}) }))
-                        : this.loading && (i18nDefaults.jsx(BusyIndicator.BusyIndicator, { id: `${this._id}-menu-busy-indicator`, delay: this.loadingDelay, class: "ui5-menu-busy-indicator", active: true })) })] }));
+        return (parametersBundle_css.jsxs(ResponsivePopover.ResponsivePopover, { id: `${this._id}-menu-rp`, class: "ui5-menu-rp", placement: "Bottom", verticalAlign: "Bottom", horizontalAlign: this.horizontalAlign, opener: this.opener, open: this.open, preventInitialFocus: true, hideArrow: true, allowTargetOverlap: true, accessibleName: this.acessibleNameText, onBeforeOpen: this._beforePopoverOpen, onOpen: this._afterPopoverOpen, onBeforeClose: this._beforePopoverClose, onClose: this._afterPopoverClose, children: [this.isPhone &&
+                    parametersBundle_css.jsxs("div", { slot: "header", class: "ui5-menu-dialog-header", children: [parametersBundle_css.jsx("div", { class: "ui5-menu-dialog-title", children: parametersBundle_css.jsx("h1", { children: this.headerText }) }), parametersBundle_css.jsx(Button.Button, { icon: information.decline, design: "Transparent", "aria-label": this.labelClose, onClick: this._close })] }), parametersBundle_css.jsx("div", { id: `${this._id}-menu-main`, children: this.items.length ?
+                        (parametersBundle_css.jsx(List.List, { id: `${this._id}- menu-list`, selectionMode: "None", loading: this.loading, loadingDelay: this.loadingDelay, separators: "None", accessibleRole: "Menu", onItemClick: this._itemClick, onMouseOver: this._itemMouseOver, onKeyDown: this._itemKeyDown, "onui5-close-menu": this._close, "onui5-exit-end-content": this._navigateOutOfEndContent, children: parametersBundle_css.jsx("slot", {}) }))
+                        : this.loading && (parametersBundle_css.jsx(BusyIndicator.BusyIndicator, { id: `${this._id}-menu-busy-indicator`, delay: this.loadingDelay, class: "ui5-menu-busy-indicator", active: true })) })] }));
     }
 
-    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => i18nDefaults.defaultThemeBase);
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
     Icons.p("@ui5/webcomponents", "sap_horizon", async () => i18nDefaults.defaultTheme);
-    var menuCss = `:host{line-height:initial}::slotted([ui5-menu-item]){line-height:inherit}.ui5-menu-rp[ui5-responsive-popover]::part(header),.ui5-menu-rp[ui5-responsive-popover]::part(content),.ui5-menu-rp[ui5-responsive-popover]::part(footer){padding:0}.ui5-menu-rp[ui5-responsive-popover]{box-shadow:var(--sapContent_Shadow1);border-radius:var(--_ui5-v2-11-0-rc-3_menu_popover_border_radius)}.ui5-menu-busy-indicator{width:100%}.ui5-menu-dialog-header{display:flex;height:var(--_ui5-v2-11-0-rc-3-responsive_popover_header_height);align-items:center;justify-content:space-between;padding:0px 1rem;width:100%;overflow:hidden}.ui5-menu-dialog-title{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:calc(100% - 6.5rem);padding-right:1rem;font-family:var(--sapFontHeaderFamily)}.ui5-menu-dialog-title>h1{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sapFontHeader5Size)}.ui5-menu-back-button{margin-right:1rem}
+    var menuCss = `:host{line-height:initial}::slotted([ui5-menu-item]){line-height:inherit}.ui5-menu-rp[ui5-responsive-popover]::part(header),.ui5-menu-rp[ui5-responsive-popover]::part(content),.ui5-menu-rp[ui5-responsive-popover]::part(footer){padding:0}.ui5-menu-rp[ui5-responsive-popover]{box-shadow:var(--sapContent_Shadow1);border-radius:var(--_ui5-v2-13-0-rc-0_menu_popover_border_radius)}.ui5-menu-busy-indicator{width:100%}.ui5-menu-dialog-header{display:flex;height:var(--_ui5-v2-13-0-rc-0-responsive_popover_header_height);align-items:center;justify-content:space-between;padding:0px 1rem;width:100%;overflow:hidden}.ui5-menu-dialog-title{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:calc(100% - 6.5rem);padding-right:1rem;font-family:var(--sapFontHeaderFamily)}.ui5-menu-dialog-title>h1{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sapFontHeader5Size)}.ui5-menu-back-button{margin-right:1rem}
 `;
 
     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -108,7 +50,11 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
      * - `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself
      * - `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items
      *
-     * Note: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.
+     * **Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.
+     *
+     * Application developers are responsible for ensuring that interactive elements placed in the `endContent` slot
+     * have the correct accessibility behaviour, including their enabled or disabled states.
+     * The menu does not manage these aspects when the menu item state changes.
      *
      * ### ES6 Module Import
      *
@@ -156,23 +102,65 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             return Menu_1.i18nBundle.getText(i18nDefaults.MENU_CLOSE_BUTTON_ARIA_LABEL);
         }
         get isPhone() {
-            return Icons.d$1();
+            return Icons.d();
         }
         get _popover() {
             return this.shadowRoot.querySelector("[ui5-responsive-popover]");
         }
+        get _list() {
+            return this.shadowRoot.querySelector("[ui5-list]");
+        }
+        /** Returns menu item groups */
+        get _menuItemGroups() {
+            return this.items.filter(MenuItem.isInstanceOfMenuItemGroup);
+        }
+        /** Returns menu items */
         get _menuItems() {
-            return this.items.filter((item) => !item.isSeparator);
+            return this.items.filter(MenuItem.isInstanceOfMenuItem);
+        }
+        /** Returns all menu items (including those in groups */
+        get _allMenuItems() {
+            const items = [];
+            this.items.forEach(item => {
+                if (MenuItem.isInstanceOfMenuItemGroup(item)) {
+                    items.push(...item._menuItems);
+                }
+                else if (!MenuItem.isInstanceOfMenuSeparator(item)) {
+                    items.push(item);
+                }
+            });
+            return items;
+        }
+        /** Returns menu items included in the ItemNavigation */
+        get _navigatableMenuItems() {
+            const items = [];
+            const slottedItems = this.getSlottedNodes("items");
+            slottedItems.forEach(item => {
+                if (MenuItem.isInstanceOfMenuItemGroup(item)) {
+                    const groupItems = item.getSlottedNodes("items");
+                    items.push(...groupItems);
+                }
+                else if (!MenuItem.isInstanceOfMenuSeparator(item)) {
+                    items.push(item);
+                }
+            });
+            return items;
         }
         get acessibleNameText() {
             return Menu_1.i18nBundle.getText(i18nDefaults.MENU_POPOVER_ACCESSIBLE_NAME);
         }
         onBeforeRendering() {
-            const siblingsWithIcon = this._menuItems.some(menuItem => !!menuItem.icon);
-            this._menuItems.forEach(item => {
+            const siblingsWithIcon = this._allMenuItems.some(menuItem => !!menuItem.icon);
+            this._setupItemNavigation();
+            this._allMenuItems.forEach(item => {
                 item._siblingsWithIcon = siblingsWithIcon;
             });
         }
+        _setupItemNavigation() {
+            if (this._list) {
+                this._list._itemNavigation._getItems = () => this._navigatableMenuItems;
+            }
+        }
         _close() {
             this.open = false;
         }
@@ -189,7 +177,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             item.selected = true;
         }
         _itemMouseOver(e) {
-            if (!Icons.f$1()) {
+            if (!Icons.f()) {
                 return;
             }
             const item = e.target;
@@ -201,15 +189,15 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             this._startOpenTimeout(item);
         }
         async focus(focusOptions) {
-            await Icons.f$3();
-            const firstMenuItem = this._menuItems[0];
+            await Icons.f$1();
+            const firstMenuItem = this._allMenuItems[0];
             if (firstMenuItem) {
                 return firstMenuItem.focus(focusOptions);
             }
             return super.focus(focusOptions);
         }
         _closeOtherSubMenus(item) {
-            const menuItems = this._menuItems;
+            const menuItems = this._allMenuItems;
             if (!menuItems.includes(item)) {
                 return;
             }
@@ -233,8 +221,9 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                     "item": item,
                     "text": item.text || "",
                 });
-                if (!prevented && this._popover) {
-                    item.fireDecoratorEvent("close-menu");
+                if (!prevented) {
+                    item._updateCheckedState();
+                    this._popover && item.fireDecoratorEvent("close-menu");
                 }
             }
             else {
@@ -247,7 +236,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             if (!MenuItem.isInstanceOfMenuItem(item)) {
                 return;
             }
-            const menuItemInMenu = this._menuItems.includes(item);
+            const menuItemInMenu = this._allMenuItems.includes(item);
             const isItemNavigation = webcomponentsBase.D(e) || webcomponentsBase.P(e);
             const isItemSelection = webcomponentsBase.b$1(e) || webcomponentsBase.i(e);
             const isEndContentNavigation = webcomponentsBase.c(e) || webcomponentsBase.K(e);
@@ -269,7 +258,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         _navigateOutOfEndContent(e) {
             const item = e.target;
             const shouldNavigateToNextItem = e.detail.shouldNavigateToNextItem;
-            const menuItems = this._menuItems;
+            const menuItems = this._allMenuItems;
             const itemIndex = menuItems.indexOf(item);
             if (itemIndex > -1) {
                 const nextItem = shouldNavigateToNextItem ? menuItems[itemIndex + 1] : menuItems[itemIndex - 1];
@@ -286,7 +275,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             }
         }
         _afterPopoverOpen() {
-            this._menuItems[0]?.focus();
+            this._allMenuItems[0]?.focus();
             this.fireDecoratorEvent("open");
         }
         _beforePopoverClose(e) {
@@ -317,7 +306,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         webcomponentsBase.s({ type: Number })
     ], Menu.prototype, "loadingDelay", void 0);
     __decorate([
-        webcomponentsBase.s({ converter: ListItemTemplate.e })
+        webcomponentsBase.s({ converter: ResponsivePopover.e })
     ], Menu.prototype, "opener", void 0);
     __decorate([
         webcomponentsBase.d({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
@@ -328,7 +317,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
     Menu = Menu_1 = __decorate([
         webcomponentsBase.m({
             tag: "ui5-menu",
-            renderer: i18nDefaults.y,
+            renderer: parametersBundle_css.y,
             styles: menuCss,
             template: MenuTemplate,
         })

package/src/main/js/sap/ushell/thirdparty/MenuItem.js

@@ -1,4 +1,4 @@
-sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/webcomponents', 'sap/ushell/thirdparty/i18n-defaults', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/Icons', 'sap/ushell/thirdparty/MenuItem2', 'sap/ushell/thirdparty/ListItemTemplate', 'sap/ushell/thirdparty/information', 'sap/ushell/thirdparty/Button2', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/Icon', 'sap/ushell/thirdparty/List', 'sap/ushell/thirdparty/BusyIndicator', 'sap/ushell/thirdparty/Label'], (function (exports, webcomponentsBase, webcomponents, i18nDefaults, eventStrict, Icons, MenuItem, ListItemTemplate, information, Button, toLowercaseEnumValue, Icon, List, BusyIndicator, Label) { 'use strict';
+sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/webcomponents', 'sap/ushell/thirdparty/parameters-bundle.css2', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/i18n-defaults', 'sap/ushell/thirdparty/Icons', 'sap/ushell/thirdparty/MenuItem2', 'sap/ushell/thirdparty/ListItemCustom', 'sap/ushell/thirdparty/information', 'sap/ushell/thirdparty/ListItemBase', 'sap/ushell/thirdparty/ResponsivePopover', 'sap/ushell/thirdparty/Title', 'sap/ushell/thirdparty/List', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/ListItemGroup', 'sap/ushell/thirdparty/AccessibilityTextsHelper', 'sap/ushell/thirdparty/BusyIndicator', 'sap/ushell/thirdparty/willShowContent', 'sap/ushell/thirdparty/Label', 'sap/ushell/thirdparty/ValueState', 'sap/ushell/thirdparty/Icon', 'sap/ushell/thirdparty/Button2'], (function (exports, webcomponentsBase, webcomponents, parametersBundle_css, eventStrict, i18nDefaults, Icons, MenuItem, ListItemCustom, information, ListItemBase, ResponsivePopover, Title, List, toLowercaseEnumValue, ListItemGroup, AccessibilityTextsHelper, BusyIndicator, willShowContent, Label, ValueState, Icon, Button) { 'use strict';