@sapui5/sap.ushell 1.143.3 → 1.144.0

package/src/main/js/sap/ushell/components/shell/Settings/userLanguageRegion/UserLanguageRegionEntry.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 
 sap.ui.define([
     "sap/base/Log",

package/src/main/js/sap/ushell/components/shell/ShellBar/Component.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 
 sap.ui.define([
     "sap/ui/core/Element",

package/src/main/js/sap/ushell/components/shell/ShellBar/controller/ShellBar.controller.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 sap.ui.define([
     "sap/ui/Device",
     "sap/ui/core/Element",
@@ -197,15 +197,6 @@ sap.ui.define([
             return sItemIdUpperCase === "USERACTIONSMENUHEADERBUTTON";
         },
 
-        hasProducts: function (aHeadEndItems) {
-            return aHeadEndItems.some((sItemId) => sItemId.toUpperCase() === "PRODUCTSWITCHBTN");
-        },
-
-        onProductSwitchClick: function () {
-            // delegate the click to the actual button, with this it can also be replaced with a custom control
-            return this._delegateHeadEndItemClick("PRODUCTSWITCHBTN");
-        },
-
         prepareShellAppTitle: function () {
             const oShellBarSpacer = new ShellBarSpacer({
                 id: "shellBarSpacer"

package/src/main/js/sap/ushell/components/shell/ShellBar/manifest.json

@@ -3,7 +3,7 @@
     "sap.app": {
         "id": "sap.ushell.components.shell.ShellBar",
         "applicationVersion": {
-            "version": "1.143.3"
+            "version": "1.144.0"
         },
         "type": "component",
         "ach": "CA-FLP-FE-COR",

package/src/main/js/sap/ushell/components/shell/ShellBar/view/ShellBar.view.xml

@@ -26,11 +26,7 @@
         searchButtonClick=".onSearchButtonClick"
         showNotifications="{shellModel>/header/notifications/visible}"
         notificationsCount="{= %{configModel>/notificationsCount} > 0 ? %{configModel>/notificationsCount} : ''}"
-        showProductSwitch="{
-            path: 'shellModel>/header/headEndItems',
-            formatter: '.hasProducts'
-        }"
-        productSwitchClick=".onProductSwitchClick"
+        showProductSwitch="{shellModel>/header/productSwitch/visible}"
         profileClick=".onProfileClick"
         startButton="{
             path: 'shellModel>/header/headItems',
@@ -71,7 +67,7 @@
             <!-- Create dummy search input for ESearch when ShellBar is enabled for the old ESH. -->
             <!-- Make it busy to indicate that the search is not yet ready to be used. -->
             <!-- If the Slot is empty, the Icon is missing; If the Slot content is invisible, the Icon is also missing.-->
-             <thirdparty:ShellBarSearch id="shellBarSearch" visible="{= ${shellConfig>/searchAvailable} &amp;&amp; ${config>/searchUseWebComponents}}" >
+             <thirdparty:ShellBarSearch id="shellBarSearch" visible="false" >
                 <thirdparty:customData>
                     <core:CustomData
                         key="help-id"

package/src/main/js/sap/ushell/components/shell/SideNavigation/Component.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 sap.ui.define([
     "sap/m/library",
     "sap/m/VBox",
@@ -42,6 +42,7 @@ sap.ui.define([
             this._oSideNavigationComponentContainer = new ComponentContainer({
                 id: this.createId("SideNavigationComponentContainer"),
                 height: "100%",
+                width: "100%",
                 component: this
             });
             this._oDockedMainLayout = new VBox({
@@ -52,40 +53,41 @@ sap.ui.define([
             });
             Container.getRendererInternal().setSideNavigation(this._oDockedMainLayout);
 
-            this._addHamburgerButton();
-
             const oViewConfiguration = new JSONModel({
                 // We need to initialize with a non-empty key to avoid flickering of the selection.
                 selectedKey: "NONE",
                 enableSideNavigation: true,
                 expanded: true,
-                renderMode: this.sSideNavigationMode
+                renderMode: this.sSideNavigationMode,
+                fullWidthMode: false,
+                visible: true,
+                sideNavigationWidth: ""
             });
-            Config.on("/core/sideNavigation/mode").do(this._handleRenderModeChange.bind(this));
-
-            Device.resize.attachHandler(this._handleRenderModeChange.bind(this));
+            this.aDoables = [];
+            this.aDoables.push(Config.on("/core/sideNavigation/mode").do(this._handleRenderModeChange.bind(this)));
+            Device.resize.attachHandler(this._handleRenderModeChange, this);
 
             this.setModel(oViewConfiguration, "viewConfiguration");
-            this._handleRenderModeChange(true);
             this.setModel(ShellModel.getModel(), "shellModel");
+            this._handleRenderModeChange(true);
+
+            this._addHamburgerButton();
         },
 
         _handleRenderModeChange: function (bModeChange) {
-            const oModel = this.getModel("viewConfiguration");
-            let sValue = Config.last("/core/sideNavigation/mode");
+            const oViewConfigModel = this.getModel("viewConfiguration");
+            const sRenderMode = Config.last("/core/sideNavigation/mode");
 
-            if (Device.media.getCurrentRange(Device.media.RANGESETS.SAP_STANDARD).name === "Phone") {
-                sValue = "Popover";
-                oModel.setProperty("/expanded", true);
-            }
-            bModeChange = bModeChange ?? (this.sSideNavigationMode !== sValue);
-            this.sSideNavigationMode = sValue;
-            oModel.setProperty("/renderMode", sValue);
+            bModeChange = bModeChange ?? (this.sSideNavigationMode !== sRenderMode);
+            this.sSideNavigationMode = sRenderMode;
+            oViewConfigModel.setProperty("/renderMode", sRenderMode);
+
+            this._applyScreenSizeOnRenderMode();
 
             if (bModeChange) {
                 this.rootControlLoaded().then(() => {
-                    EventHub.emit("sideNavigationModeChanged", sValue);
-                    if (sValue === "Docked") {
+                    EventHub.emit("sideNavigationModeChanged", sRenderMode);
+                    if (sRenderMode === "Docked") {
                         this._oDockedMainLayout.addItem(this._oSideNavigationComponentContainer);
                         this.popoverClose();
                     } else {
@@ -97,6 +99,43 @@ sap.ui.define([
             }
         },
 
+        _applyScreenSizeOnRenderMode: function () {
+            const oRenderer = Container.getRendererInternal();
+            const oShellModel = ShellModel.getModel();
+            const oViewConfigModel = this.getModel("viewConfiguration");
+            const oDeviceMediaSize = Device.media.getCurrentRange(Device.media.RANGESETS.SAP_STANDARD);
+
+            const bIsSizeS = oDeviceMediaSize.name === "Phone";
+            const bIsSizeM = oDeviceMediaSize.name === "Tablet";
+            const bDockedMode = oViewConfigModel.getProperty("/renderMode") === "Docked";
+            const bPopoverMode = oViewConfigModel.getProperty("/renderMode") === "Popover";
+            const bAdditionalSideContentIsVisible = oShellModel.getProperty("/sidePane/visible") || oShellModel.getProperty("/toolArea/visible");
+            const bIsInFullWidthMode = oViewConfigModel.getProperty("/fullWidthMode");
+            const bShouldApplyFullWidthMode = bDockedMode && (bIsSizeS || (bIsSizeM && bAdditionalSideContentIsVisible));
+
+            oRenderer.setSideNavigationFullWidth(bShouldApplyFullWidthMode);
+            oViewConfigModel.setProperty("/fullWidthMode", bShouldApplyFullWidthMode);
+
+            if (bPopoverMode) {
+                oViewConfigModel.setProperty("/sideNavigationWidth", "20rem");
+                return;
+            }
+            // Docked mode
+
+            if (bShouldApplyFullWidthMode) {
+                if (!bIsInFullWidthMode) {
+                    // for initial closing on load of the side navigation in full width mode and when entering full width mode on runtime
+                    oViewConfigModel.setProperty("/expanded", false);
+                }
+                oViewConfigModel.setProperty("/sideNavigationWidth", "100%");
+                oViewConfigModel.setProperty("/visible", oViewConfigModel.getProperty("/expanded"));
+            } else {
+                const sWidth = oViewConfigModel.getProperty("/expanded") ? "16rem" : "4rem";
+                oViewConfigModel.setProperty("/sideNavigationWidth", sWidth);
+                oViewConfigModel.setProperty("/visible", true);
+            }
+        },
+
         /**
          * Adds (attach) the hamburger button to the shell bar.
          * Shows the button on the home page and for all apps.
@@ -122,10 +161,17 @@ sap.ui.define([
          */
         toggleSideNavigationExpansion: function (bExpanded) {
             const oViewConfigModel = this.getModel("viewConfiguration");
+            const bFullWidthMode = oViewConfigModel.getProperty("/fullWidthMode");
             if (bExpanded === undefined) {
                 bExpanded = !oViewConfigModel.getProperty("/expanded");
             }
             oViewConfigModel.setProperty("/expanded", !!bExpanded);
+            if (bFullWidthMode) {
+                oViewConfigModel.setProperty("/visible", !!bExpanded);
+            } else {
+                const sWidth = bExpanded ? "16rem" : "4rem";
+                oViewConfigModel.setProperty("/sideNavigationWidth", sWidth);
+            }
         },
 
         /**
@@ -226,7 +272,7 @@ sap.ui.define([
         */
         _hamburgerButtonFactory: async function () {
             const ExtensionService = await Container.getServiceAsync("FrameBoundExtension");
-            const oHeaderItem = await ExtensionService.createHeaderItem({
+            this._oHeaderItem = await ExtensionService.createHeaderItem({
                 id: "sideMenuExpandCollapseBtn",
                 ariaHaspopup: "dialog",
                 icon: "sap-icon://menu2",
@@ -236,10 +282,10 @@ sap.ui.define([
             }, {
                 position: "begin"
             });
-            const oHeaderItemControl = await oHeaderItem.getControl();
+            const oHeaderItemControl = await this._oHeaderItem.getControl();
             oHeaderItemControl.setModel(this.getModel("i18n"), "i18n");
             oHeaderItemControl.setModel(this.getModel("viewConfiguration"), "viewConfiguration");
-            return oHeaderItem;
+            return this._oHeaderItem;
         },
 
         /**
@@ -250,6 +296,12 @@ sap.ui.define([
          * @since 1.135.0
          */
         exit: function () {
+            this._oHeaderItem?.destroy();
+
+            this.aDoables.forEach((oDoable) => {
+                oDoable.off();
+            });
+            Device.resize.detachHandler(this._handleRenderModeChange, this);
             // The component needs to be removed first because destroying the ComponentContainer triggers also calls the destroy
             // method of the component. This could cause an infinite loop.
             this._oSideNavigationComponentContainer?.setComponent(undefined);

package/src/main/js/sap/ushell/components/shell/SideNavigation/controller/SideNavigation.controller.js

@@ -1,21 +1,25 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 sap.ui.define([
     "sap/base/Log",
     "sap/ui/core/EventBus",
     "sap/ui/core/mvc/Controller",
+    "sap/ui/Device",
     "sap/ushell/components/shell/SideNavigation/interface/ListProviderAPI",
     "sap/ushell/Config",
     "sap/ushell/Container",
     "sap/ushell/EventHub",
+    "sap/ushell/state/ShellModel",
     "sap/ushell/utils"
 ], (
     Log,
     EventBus,
     Controller,
+    Device,
     ListProviderAPI,
     Config,
     Container,
     EventHub,
+    ShellModel,
     ushellUtils
 ) => {
     "use strict";
@@ -50,12 +54,14 @@ sap.ui.define([
          * @since 1.132.0
          */
         onInit: function () {
-            const oUpdateNavigationListOnConfigChange = Config.on("/core/sideNavigation/navigationListProvider").do((oConfig) => {
+            const oUpdateNavigationListOnConfigChange = Config.on("/core/sideNavigation/navigationListProvider").do(async (oConfig) => {
+                await this._cleanupNavigationListProvider(this.pNavigationListProvider);
                 this.pNavigationListProvider = this._initNavigationListProvider("/core/sideNavigation/navigationListProvider");
                 this.selectIndexAfterRouteChange();
             });
-            const oUpdateFixedNavigationListOnConfigChange = Config.on("/core/sideNavigation/fixedNavigationListProvider").do((oConfig) => {
-                this._initNavigationListProvider("/core/sideNavigation/fixedNavigationListProvider", "fixedItem");
+            const oUpdateFixedNavigationListOnConfigChange = Config.on("/core/sideNavigation/fixedNavigationListProvider").do(async (oConfig) => {
+                await this._cleanupNavigationListProvider(this.pFixedNavigationListProvider);
+                this.pFixedNavigationListProvider = this._initNavigationListProvider("/core/sideNavigation/fixedNavigationListProvider", "fixedItem");
             });
 
             this._aDoables.push(oUpdateNavigationListOnConfigChange);
@@ -67,7 +73,8 @@ sap.ui.define([
             this.oContainerRouter.getRoute("openFLPPage").attachMatched(this.selectIndexAfterRouteChange, this);
             this.oContainerRouter.getRoute("openWorkPage").attachMatched(this.selectIndexAfterRouteChange, this);
 
-            this.oEnableMenuBarNavigationListener = EventHub.on("enableMenuBarNavigation").do((bEnableSideNavigation) => this.onEnableSideNavigation(bEnableSideNavigation));
+            const oEnableMenuBarNavigationListener = EventHub.on("enableMenuBarNavigation").do((bEnableSideNavigation) => this.onEnableSideNavigation(bEnableSideNavigation));
+            this._aDoables.push(oEnableMenuBarNavigationListener);
             EventBus.getInstance().subscribe("sap.ushell", "appOpened", this.selectIndexAfterRouteChange, this);
         },
 
@@ -126,7 +133,12 @@ sap.ui.define([
         * @since 1.132.0
         */
         onEnableSideNavigation: function (bEnableSideNavigation) {
-            this.getView().getModel("viewConfiguration").setProperty("/enableSideNavigation", bEnableSideNavigation);
+            const oViewConfigModel = this._getModel("viewConfiguration");
+            if (oViewConfigModel.getProperty("/fullWidthMode")) {
+                oViewConfigModel.setProperty("/expanded", false);
+                oViewConfigModel.setProperty("/visible", false);
+            }
+            oViewConfigModel.setProperty("/enableSideNavigation", bEnableSideNavigation);
         },
 
         /**
@@ -157,6 +169,43 @@ sap.ui.define([
             }, 0);
         },
 
+        _getModel: function (sModelName) {
+            return this.getView().getModel(sModelName);
+        },
+
+        /**
+         * Event handler for navigation item selection.
+         * Collapses the side navigation on phone devices in docked mode after an item is selected.
+         *
+         * @param {sap.ui.base.Event} oEvent The item select event
+         * @private
+         * @since 1.144.0
+         */
+        onNavigationItemSelect: function (oEvent) {
+            const oViewConfigModel = this._getModel("viewConfiguration");
+            if (oViewConfigModel.getProperty("/fullWidthMode")) {
+                oViewConfigModel.setProperty("/expanded", false);
+                oViewConfigModel.setProperty("/visible", false);
+            }
+        },
+
+        /**
+         * Cleans up the NavigationListProvider instance.
+         * @param {Promise<sap.ushell.modules.NavigationMenu.ListProvider>|undefined} [pNavigationListProvider] The navigation list provider promise.
+         * @returns {Promise} Resolves once cleanup is done.
+         *
+         * @since 1.144.0
+         * @private
+         */
+        _cleanupNavigationListProvider: async function (pNavigationListProvider) {
+            if (pNavigationListProvider) {
+                const oNavigationListProvider = await pNavigationListProvider;
+                if (oNavigationListProvider && typeof oNavigationListProvider.exit === "function") {
+                    await oNavigationListProvider.exit();
+                }
+            }
+        },
+
         /**
          * UI5 lifecycle method which is called upon controller destruction.
          * It detaches the router events, and config listeners, and EventHub listeners, and EventBus subscriptions.
@@ -165,13 +214,19 @@ sap.ui.define([
          * @since 1.132.0
          */
         onExit: function () {
-            this.oEnableMenuBarNavigationListener.off();
             EventBus.getInstance().unsubscribe("sap.ushell", "appOpened", this.selectIndexAfterRouteChange, this);
-            this._aDoables.forEach((oConfigListener) => {
-                oConfigListener.off();
+            this._aDoables.forEach((oDoable) => {
+                oDoable.off();
             });
             this._aDoables = [];
 
+            Promise.all([
+                this._cleanupNavigationListProvider(this.pNavigationListProvider),
+                this._cleanupNavigationListProvider(this.pFixedNavigationListProvider)
+            ]).catch((oError) => {
+                Log.error("Error during SideNavigation controller exit while cleaning up navigation list providers", oError);
+            });
+
             // clean up the router matched event listeners
             const oRouter = Container.getRendererInternal().getRouter();
 

package/src/main/js/sap/ushell/components/shell/SideNavigation/fragment/AllSpaces.fragment.xml

@@ -4,13 +4,21 @@
     core:require="{
         mLibrary: 'sap/m/library'
     }">
-    <VBox width="{= %{viewConfiguration>/renderMode} === 'Popover' ? '20rem' : ''}" renderType="{= mLibrary.FlexRendertype.Div}" id="allSpacesSideMenu">
+    <VBox
+        renderType="{= mLibrary.FlexRendertype.Div}"
+        id="allSpacesSideMenu"
+        backgroundDesign="Solid"
+    >
         <Toolbar style="Clear">
             <Button type="Back" press="onPressNavigateBackToSideNav" />
         </Toolbar>
         <ScrollContainer width="100%" height="100%" vertical="true">
             <core:ComponentContainer
                 id="NavigationBarMenuComponentContainer"
+                name="sap.ushell.components.shell.NavigationBarMenu"
+                settings="{
+                    'componentData': {'renderType': 'Menu'}
+                }"
                 manifest="true"
                 async="true"
                 propagateModel="true"

package/src/main/js/sap/ushell/components/shell/SideNavigation/interface/ListProviderAPI.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 
 /**
  * @file This is the concrete ListProviderAPI implementation for this SideNavigation Component

package/src/main/js/sap/ushell/components/shell/SideNavigation/interface/NavContainer.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 
 /**
  * @file This is the concrete NavContainer API implementation for this SideNavigation Component.

package/src/main/js/sap/ushell/components/shell/SideNavigation/manifest.json

@@ -3,7 +3,7 @@
     "sap.app": {
         "id": "sap.ushell.components.shell.SideNavigation",
         "applicationVersion": {
-            "version": "1.143.3"
+            "version": "1.144.0"
         },
         "i18n": {
             "bundleUrl": "./resources/resources.properties",
@@ -42,13 +42,6 @@
             "viewName": "sap.ushell.components.shell.SideNavigation.view.Main",
             "type": "XML"
         },
-        "resources": {
-            "css": [
-                {
-                    "uri": "css/style.css"
-                }
-            ]
-        },
         "models": {
             "i18n": {
                 "type": "sap.ui.model.resource.ResourceModel",

package/src/main/js/sap/ushell/components/shell/SideNavigation/modules/AllSpaces.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 
 sap.ui.define([
     "sap/tnt/NavigationListItem",
@@ -47,13 +47,8 @@ sap.ui.define([
                     name: "sap.ushell.components.shell.SideNavigation.fragment.AllSpaces",
                     controller: this
                 });
-                const pComponentLoaded = Component.create({
-                    name: "sap.ushell.components.shell.NavigationBarMenu", componentData: { renderType: "Menu" }
-                });
 
-                this.#pFragmentLoaded = Promise.all([pFragmentLoaded, pComponentLoaded]).then(async (aResults) => {
-                    const [oAllSpacesFragment, oComponent] = [...aResults];
-                    Fragment.byId("AllSpaces", "NavigationBarMenuComponentContainer").setComponent(oComponent);
+                this.#pFragmentLoaded = pFragmentLoaded.then(async (oAllSpacesFragment) => {
                     oSideNavAPI.getNavContainerFacade().add(oAllSpacesFragment);
                     const oMenuService = await Container.getServiceAsync("Menu");
                     const oSpacesModel = await oMenuService.getMenuModel();
@@ -97,6 +92,18 @@ sap.ui.define([
         onPressNavigateBackToSideNav () {
             this.oSideNavAPI.getNavContainerFacade().toRoot();
         }
+
+        /**
+         * Cleans up the instance.
+         *
+         * @since 1.144.0
+         * @private
+         */
+        async destroy () {
+            const oFragment = await this.#pFragmentLoaded;
+            oFragment.destroy();
+            this.oRootItem.destroy();
+        }
     }
     return AllSpaces;
 }, false);

package/src/main/js/sap/ushell/components/shell/SideNavigation/modules/AppFinder.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 
 sap.ui.define([
     "sap/tnt/NavigationListItem",
@@ -42,6 +42,16 @@ sap.ui.define([
         async getRootItem () {
             return this.oRootItem;
         }
+
+        /**
+         * Cleans up the instance.
+         *
+         * @since 1.144.0
+         * @private
+         */
+        async destroy () {
+            this.oRootItem.destroy();
+        }
     }
 
     return AppFinder;

package/src/main/js/sap/ushell/components/shell/SideNavigation/modules/Favorites.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2026 SAP SE, All Rights Reserved
 
 sap.ui.define([
     "sap/m/GenericTile",
@@ -75,6 +75,12 @@ sap.ui.define([
          */
         #oI18nModel;
 
+        /**
+         * The favorites JSON model.
+         * @type {sap.ui.model.json.JSONModel}
+         */
+        #oFavoritesModel;
+
         /**
          * Creates a new menu entry "Favorites" with the sections and apps from the MyHome page for the SideNavigation.
          *
@@ -184,14 +190,13 @@ sap.ui.define([
             }
 
             const oPagesModel = oPagesService.getModel();
-            const oFavoritesModel = new JSONModel([]);
+            this.#oFavoritesModel = new JSONModel([]);
             oPagesModel.attachEvent("dataChange", () => {
-                this.#updateFavoritesModel(oFavoritesModel, sMyHomePageId);
+                this.#updateFavoritesModel(this.#oFavoritesModel, sMyHomePageId);
             });
 
-            this.#oRootItem.setModel(oFavoritesModel, "favorites");
-            await this.#updateFavoritesModel(oFavoritesModel, sMyHomePageId);
-
+            this.#oRootItem.setModel(this.#oFavoritesModel, "favorites");
+            await this.#updateFavoritesModel(this.#oFavoritesModel, sMyHomePageId);
             resolve(this.#oRootItem);
         }
 
@@ -374,6 +379,20 @@ sap.ui.define([
                 press: this.onItemPressed.bind(this)
             });
         }
+
+        /**
+         * Cleans up the instance.
+         *
+         * @since 1.144.0
+         * @private
+         */
+        async destroy () {
+            await this.pItemReady;
+
+            this.#oRootItem.destroy();
+            this.#oI18nModel.destroy();
+            this.#oFavoritesModel?.destroy();
+        }
     }
 
     return Favorites;