@sapui5/sap.ushell 1.139.0 → 1.140.0

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

@@ -1,13 +1,105 @@
-sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/parameters-bundle.css2', 'sap/ushell/thirdparty/i18n-defaults', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/ListItemBase', 'sap/ushell/thirdparty/Icons'], (function (exports, webcomponentsBase, eventStrict, parametersBundle_css, i18nDefaults, toLowercaseEnumValue, ListItemBase, Icons) { 'use strict';
+sap.ui.define(['require', 'exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/parameters-bundle.css2', 'sap/ushell/thirdparty/parameters-bundle.css', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/ListItemBase', 'sap/ushell/thirdparty/i18n-defaults2', 'sap/ushell/thirdparty/WrappingType', 'sap/ushell/thirdparty/Icons'], (function (require, exports, webcomponentsBase, eventStrict, parametersBundle_css, parametersBundle_css$1, toLowercaseEnumValue, ListItemBase, i18nDefaults, WrappingType, Icons) { 'use strict';
 
-    let t=null,n=false;const o=new Set,a$1=new Set,r$1=e=>{!e.dataTransfer||!(e.target instanceof HTMLElement)||a$1.has(e.target)||(t=e.target);},d=()=>{t=null;},l=()=>{t=null;},s=e=>{t=e;},m=()=>t,g=()=>{(document.body.addEventListener("dragstart",r$1),document.body.addEventListener("dragend",d),document.body.addEventListener("drop",l));},i=e=>{o.add(e),g();},E$1=e=>{o.delete(e),o.size===0&&n;},u=e=>(a$1.add(e),s),v=e=>{a$1.delete(e);},p={subscribe:i,unsubscribe:E$1,addSelfManagedArea:u,removeSelfManagedArea:v,getDraggedElement:m};
+    function i(t,o,n,m,r={}){const a=webcomponentsBase.I.getDraggedElement(),e={targetReference:null,placement:null};if(!a&&!r?.crossDnD)return e;const s=n.placements;return e.targetReference=t.target,s.some(l=>{const c=r.originalEvent?{originalEvent:t}:{};return o.fireDecoratorEvent("move-over",{...c,source:{element:a},destination:{element:m,placement:l}})?false:(t.preventDefault(),e.targetReference=n.element,e.placement=l,true)})||(e.targetReference=null),e}
 
-    var a=(l=>(l.Vertical="Vertical",l.Horizontal="Horizontal",l))(a||{});
+    function m(t,r,o,a,n={}){t.preventDefault();const e=webcomponentsBase.I.getDraggedElement();if(!e&&n?.crossDnD)return;const i=n.originalEvent?{originalEvent:t}:{};r.fireDecoratorEvent("move",{...i,source:{element:e},destination:{element:o,placement:a}}),e?.focus();}
 
     var r=(f=>(f.On="On",f.Before="Before",f.After="After",f))(r||{});
 
+    var a=(l=>(l.Vertical="Vertical",l.Horizontal="Horizontal",l))(a||{});
+
     const A=(e,t,r$1,a)=>{const o=Math.abs(e-t),m=Math.abs(e-r$1),s=Math.abs(e-a),c=Math.min(o,m,s);let l=[];switch(c){case o:l=[r.Before];break;case m:l=[r.On,o<s?r.Before:r.After];break;case s:l=[r.After];break}return l},L=(e,t,r)=>{let a$1=Number.POSITIVE_INFINITY,o=null;for(let f=0;f<e.length;f++){const h=e[f],{left:p,width:w,top:B,height:H}=h.getBoundingClientRect();let u;r===a.Vertical?u=B+H/2:u=p+w/2;const M=Math.abs(t-u);M<a$1&&(a$1=M,o=h);}if(!o)return null;const{width:m,height:s,left:c,right:l,top:b,bottom:d}=o.getBoundingClientRect();let i;return r===a.Vertical?i=A(t,b,b+s/2,d):i=A(t,c,c+m/2,l),{element:o,placements:i}},T=(e,t)=>(t--,t<0?[]:[{element:e[t],placement:r.Before}]),y=(e,t)=>(t++,t>=e.length?[]:[{element:e[t],placement:r.After}]),E={ArrowLeft:T,ArrowUp:T,ArrowRight:y,ArrowDown:y,Home:(e,t)=>e.slice(0,t).map(r$1=>({element:r$1,placement:r.Before})),End:(e,t)=>e.slice(t+1,e.length).reverse().map(r$1=>({element:r$1,placement:r.After}))},k=(e,t,r)=>P(r.key)?E[r.key](e,e.indexOf(t)):[],P=e=>e in E;
 
+    class DragAndDropHandler {
+        constructor(component, config) {
+            this.component = component;
+            this.config = {
+                orientation: a.Vertical,
+                clientCoordinate: "clientY",
+                ...config,
+            };
+        }
+        ondragenter(e) {
+            e.preventDefault();
+        }
+        ondragleave(e) {
+            if (e.relatedTarget instanceof Node && this.component.shadowRoot?.contains(e.relatedTarget)) {
+                return;
+            }
+            const dropIndicator = this.config.getDropIndicator();
+            if (dropIndicator) {
+                dropIndicator.targetReference = null;
+            }
+        }
+        ondragover(e) {
+            if (!this._validateDragOver(e)) {
+                return;
+            }
+            const draggedElement = webcomponentsBase.I.getDraggedElement();
+            const dropIndicator = this.config.getDropIndicator();
+            const closestPosition = this._findClosestPosition(e);
+            if (!closestPosition) {
+                dropIndicator.targetReference = null;
+                return;
+            }
+            const targetElement = this._transformTargetElement(closestPosition.element);
+            if (!this._isValidDragTarget(draggedElement, targetElement)) {
+                dropIndicator.targetReference = null;
+                return;
+            }
+            // Filter placements if needed (e.g., ListItemGroup filtering out MovePlacement.On)
+            const placements = this._filterPlacements(closestPosition.placements, draggedElement, targetElement);
+            const settings = this.config.useOriginalEvent ? { originalEvent: true } : {};
+            const { targetReference, placement } = i(e, this.component, {
+                element: targetElement,
+                placements,
+            }, targetElement, settings);
+            dropIndicator.targetReference = targetReference;
+            dropIndicator.placement = placement;
+        }
+        ondrop(e) {
+            const dropIndicator = this.config.getDropIndicator();
+            if (!dropIndicator?.targetReference || !dropIndicator?.placement) {
+                e.preventDefault();
+                return;
+            }
+            const settings = this.config.useOriginalEvent ? { originalEvent: true } : {};
+            m(e, this.component, dropIndicator.targetReference, dropIndicator.placement, settings);
+            dropIndicator.targetReference = null;
+        }
+        _validateDragOver(e) {
+            if (!(e.target instanceof HTMLElement)) {
+                return false;
+            }
+            const draggedElement = webcomponentsBase.I.getDraggedElement();
+            const dropIndicator = this.config.getDropIndicator();
+            return !!(draggedElement && dropIndicator);
+        }
+        _findClosestPosition(e) {
+            const items = this.config.getItems();
+            const coordinate = this.config.clientCoordinate === "clientX" ? e.clientX : e.clientY;
+            return L(items, coordinate, this.config.orientation);
+        }
+        _transformTargetElement(element) {
+            if (this.config.transformElement) {
+                return this.config.transformElement(element);
+            }
+            return element;
+        }
+        _isValidDragTarget(draggedElement, targetElement) {
+            if (this.config.validateDraggedElement) {
+                return this.config.validateDraggedElement(draggedElement, targetElement);
+            }
+            return true;
+        }
+        _filterPlacements(placements, draggedElement, targetElement) {
+            if (this.config.filterPlacements) {
+                return this.config.filterPlacements(placements, draggedElement, targetElement);
+            }
+            return placements;
+        }
+    }
+
     function DropIndicatorTemplate() {
         return parametersBundle_css.jsx("div", { class: {
                 "ui5-di-rect": this.placement === r.On,
@@ -16,7 +108,7 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
     }
 
     Icons.p("sap/ushell/gen/ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
-    Icons.p("sap/ushell/gen/ui5/webcomponents", "sap_horizon", async () => i18nDefaults.defaultTheme);
+    Icons.p("sap/ushell/gen/ui5/webcomponents", "sap_horizon", async () => parametersBundle_css$1.defaultTheme);
     var DropIndicatorCss = `:host{position:absolute;pointer-events:none;z-index:99}:host([orientation="Vertical"]) .ui5-di-needle{width:.125rem;height:100%;inset-block:0;background:var(--sapContent_DragAndDropActiveColor)}:host([orientation="Vertical"]){margin-left:-.0625rem}:host([orientation="Horizontal"]) .ui5-di-needle{height:.125rem;width:100%;inset-inline:0;background:var(--sapContent_DragAndDropActiveColor)}:host([orientation="Horizontal"]){margin-top:-.0625rem}:host([orientation="Horizontal"][placement="Before"][first]){margin-top:.3125rem}:host([orientation="Horizontal"][placement="After"][last]){margin-top:-.3125rem}:host([orientation="Vertical"]) .ui5-di-needle:before{left:-.1875rem;content:"";position:absolute;width:.25rem;height:.25rem;border-radius:.25rem;border:.125rem solid var(--sapContent_DragAndDropActiveColor);background-color:#fff;pointer-events:none}:host([orientation="Horizontal"]) .ui5-di-needle:before{top:-.1875rem;content:"";position:absolute;width:.25rem;height:.25rem;border-radius:.25rem;border:.125rem solid var(--sapContent_DragAndDropActiveColor);background-color:#fff;pointer-events:none}:host .ui5-di-rect{border:.125rem solid var(--sapContent_DragAndDropActiveColor);position:absolute;inset:0}:host .ui5-di-rect:before{content:" ";position:absolute;inset:0;background:var(--sapContent_DragAndDropActiveColor);opacity:.05}
 `;
 
@@ -166,12 +258,23 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
         return (parametersBundle_css.jsxs("div", { part: "native-li", role: this.effectiveAccRole, tabindex: this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined, class: {
                 "ui5-ghli-root": true,
                 ...this.classes.main,
-            }, "aria-label": this.ariaLabelText, "aria-roledescription": this.groupHeaderText, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, children: [parametersBundle_css.jsx("div", { id: `${this._id}-content`, class: "ui5-li-content", children: parametersBundle_css.jsx("span", { class: "ui5-ghli-title", children: parametersBundle_css.jsx("slot", {}) }) }), this.hasSubItems && parametersBundle_css.jsx("slot", { name: "subItems" })] }));
+            }, "aria-label": this.ariaLabelText, "aria-roledescription": this.groupHeaderText, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, children: [parametersBundle_css.jsx("div", { id: `${this._id}-content`, class: "ui5-li-content", children: renderTitle.call(this) }), this.hasSubItems && parametersBundle_css.jsx("slot", { name: "subItems" })] }));
+    }
+    function renderTitle() {
+        if (this.wrappingType === WrappingType.WrappingType.Normal) {
+            return this.expandableTextTemplate?.call(this, {
+                className: "ui5-ghli-title",
+                text: this._textContent,
+                maxCharacters: this._maxCharacters,
+                part: "title",
+            });
+        }
+        return (parametersBundle_css.jsx("span", { part: "title", class: "ui5-ghli-title", children: parametersBundle_css.jsx("slot", {}) }));
     }
 
     Icons.p("sap/ushell/gen/ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
-    Icons.p("sap/ushell/gen/ui5/webcomponents", "sap_horizon", async () => i18nDefaults.defaultTheme);
-    var ListItemGroupHeaderCss = `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host{height:var(--_ui5-v2-13-0-rc-0_group_header_list_item_height);background:var(--ui5-v2-13-0-rc-0-group-header-listitem-background-color);color:var(--sapList_TableGroupHeaderTextColor)}:host([has-border]){border-bottom:var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor)}:host([actionable]:not([disabled])){cursor:default}.ui5-li-root.ui5-ghli-root{padding-top:.5rem;color:currentColor;font-size:var(--sapFontHeader6Size);font-weight:400;line-height:2rem;margin:0}.ui5-ghli-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-family:var(--sapFontHeaderFamily)}.ui5-li-content{width:100%}
+    Icons.p("sap/ushell/gen/ui5/webcomponents", "sap_horizon", async () => parametersBundle_css$1.defaultTheme);
+    var ListItemGroupHeaderCss = `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host{height:var(--_ui5-v2-14-0-rc-0_group_header_list_item_height);background:var(--ui5-v2-14-0-rc-0-group-header-listitem-background-color);color:var(--sapList_TableGroupHeaderTextColor)}:host([wrapping-type="Normal"]){height:auto}:host([has-border]){border-bottom:var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor)}:host([actionable]:not([disabled])){cursor:default}.ui5-li-root.ui5-ghli-root{padding-top:.5rem;color:currentColor;font-size:var(--sapFontHeader6Size);font-weight:400;line-height:2rem;margin:0}.ui5-ghli-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-family:var(--sapFontHeaderFamily)}.ui5-li-content{width:100%}
 `;
 
     /**
@@ -221,6 +324,16 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
     var ListItemGroupHeader_1;
+    /**
+     * Maximum number of characters to display for small screens (Size S)
+     * @private
+     */
+    const MAX_CHARACTERS_SIZE_S = 100;
+    /**
+     * Maximum number of characters to display for medium and larger screens (Size M and above)
+     * @private
+     */
+    const MAX_CHARACTERS_SIZE_M = 300;
     /**
      * @class
      * The `ui5-li-group-header` is a special list item, used only to separate other list items into logical groups.
@@ -235,6 +348,30 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
         constructor() {
             super(...arguments);
             this.accessibleRole = ListItemAccessibleRole$1.ListItem;
+            /**
+             * Defines if the text of the component should wrap when it's too long.
+             * When set to "Normal", the content (title, description) will be wrapped
+             * using the `ui5-expandable-text` component.<br/>
+             *
+             * The text can wrap up to 100 characters on small screens (size S) and
+             * up to 300 characters on larger screens (size M and above). When text exceeds
+             * these limits, it truncates with an ellipsis followed by a text expansion trigger.
+             *
+             * Available options are:
+             * - `None` (default) - The text will truncate with an ellipsis.
+             * - `Normal` - The text will wrap (without truncation).
+             *
+             * @default "None"
+             * @public
+             * @since 2.15.0
+             */
+            this.wrappingType = "None";
+            /**
+             * Defines the current media query size.
+             * @default "S"
+             * @private
+             */
+            this.mediaRange = "S";
         }
         get effectiveAccRole() {
             return toLowercaseEnumValue.n(this.accessibleRole);
@@ -248,12 +385,47 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
         get groupHeaderText() {
             return ListItemGroupHeader_1.i18nBundle.getText(i18nDefaults.GROUP_HEADER_TEXT);
         }
+        get defaultSlotText() {
+            return this.textContent;
+        }
         get ariaLabelText() {
             return [this.textContent, this.accessibleName].filter(Boolean).join(" ");
         }
         get hasSubItems() {
             return this.subItems.length > 0;
         }
+        onBeforeRendering() {
+            super.onBeforeRendering();
+            // Only load ExpandableText if "Normal" wrapping is used
+            if (this.wrappingType === "Normal") {
+                // If feature is already loaded (preloaded by the user via importing ListItemGroupHeaderExpandableText.js), the template is already available
+                if (ListItemGroupHeader_1.ExpandableTextTemplate) {
+                    this.expandableTextTemplate = ListItemGroupHeader_1.ExpandableTextTemplate;
+                    // If feature is not preloaded, load the template dynamically
+                }
+                else {
+                    new Promise(function (resolve, reject) { require(['sap/ushell/thirdparty/_dynamics/ListItemStandardExpandableTextTemplate'], resolve, reject); }).then(module => {
+                        this.expandableTextTemplate = module.default;
+                    });
+                }
+            }
+        }
+        /**
+         * Determines the maximum characters to display based on the current media range.
+         * - Size S: 100 characters
+         * - Size M and larger: 300 characters
+         * @private
+         */
+        get _maxCharacters() {
+            return this.mediaRange === "S" ? MAX_CHARACTERS_SIZE_S : MAX_CHARACTERS_SIZE_M;
+        }
+        /**
+         * Returns the content text, either from text property or from the default slot
+         * @private
+         */
+        get _textContent() {
+            return this.defaultSlotText || this.groupHeaderText || "";
+        }
     };
     __decorate$1([
         webcomponentsBase.s()
@@ -261,11 +433,20 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
     __decorate$1([
         webcomponentsBase.s()
     ], ListItemGroupHeader.prototype, "accessibleRole", void 0);
+    __decorate$1([
+        webcomponentsBase.s()
+    ], ListItemGroupHeader.prototype, "wrappingType", void 0);
+    __decorate$1([
+        webcomponentsBase.s()
+    ], ListItemGroupHeader.prototype, "mediaRange", void 0);
+    __decorate$1([
+        webcomponentsBase.s({ noAttribute: true })
+    ], ListItemGroupHeader.prototype, "expandableTextTemplate", void 0);
     __decorate$1([
         webcomponentsBase.d()
     ], ListItemGroupHeader.prototype, "subItems", void 0);
     __decorate$1([
-        i18nDefaults.i("sap/ushell/gen/ui5/webcomponents")
+        parametersBundle_css$1.i("sap/ushell/gen/ui5/webcomponents")
     ], ListItemGroupHeader, "i18nBundle", void 0);
     ListItemGroupHeader = ListItemGroupHeader_1 = __decorate$1([
         webcomponentsBase.m({
@@ -280,12 +461,12 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
 
     function ListItemGroupTemplate() {
         return (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [this.hasHeader &&
-                    parametersBundle_css.jsxs(ListItemGroupHeader$1, { focused: this.focused, part: "header", accessibleRole: ListItemAccessibleRole$1.ListItem, children: [this.hasFormattedHeader ? parametersBundle_css.jsx("slot", { name: "header" }) : this.headerText, parametersBundle_css.jsx("div", { role: "list", slot: "subItems", "aria-owns": `${this._id}-content`, "aria-label": this.headerText })] }), parametersBundle_css.jsxs("div", { class: "ui5-group-li-root", onDragEnter: this._ondragenter, onDragOver: this._ondragover, onDrop: this._ondrop, onDragLeave: this._ondragleave, id: `${this._id}-content`, children: [parametersBundle_css.jsx("slot", {}), parametersBundle_css.jsx(DropIndicator$1, { orientation: "Horizontal", ownerReference: this })] })] }));
+                    parametersBundle_css.jsxs(ListItemGroupHeader$1, { wrappingType: this.wrappingType, focused: this.focused, part: "header", accessibleRole: ListItemAccessibleRole$1.ListItem, children: [this.hasFormattedHeader ? parametersBundle_css.jsx("slot", { name: "header" }) : this.headerText, parametersBundle_css.jsx("div", { role: "list", slot: "subItems", "aria-owns": `${this._id}-content`, "aria-label": this.headerText })] }), parametersBundle_css.jsxs("div", { class: "ui5-group-li-root", onDragEnter: this._ondragenter, onDragOver: this._ondragover, onDrop: this._ondrop, onDragLeave: this._ondragleave, id: `${this._id}-content`, children: [parametersBundle_css.jsx("slot", {}), parametersBundle_css.jsx(DropIndicator$1, { orientation: "Horizontal", ownerReference: this })] })] }));
     }
 
     Icons.p("sap/ushell/gen/ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
-    Icons.p("sap/ushell/gen/ui5/webcomponents", "sap_horizon", async () => i18nDefaults.defaultTheme);
-    var ListItemGroupCss = `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host{height:var(--_ui5-v2-13-0-rc-0_group_header_list_item_height);background:var(--ui5-v2-13-0-rc-0-group-header-listitem-background-color);color:var(--sapList_TableGroupHeaderTextColor)}.ui5-group-li-root{width:100%;height:100%;position:relative;box-sizing:border-box;padding:0;margin:0;list-style-type:none}
+    Icons.p("sap/ushell/gen/ui5/webcomponents", "sap_horizon", async () => parametersBundle_css$1.defaultTheme);
+    var ListItemGroupCss = `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host{height:var(--_ui5-v2-14-0-rc-0_group_header_list_item_height);background:var(--ui5-v2-14-0-rc-0-group-header-listitem-background-color);color:var(--sapList_TableGroupHeaderTextColor)}.ui5-group-li-root{width:100%;height:100%;position:relative;box-sizing:border-box;padding:0;margin:0;list-style-type:none}
 `;
 
     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -311,18 +492,43 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
      */
     let ListItemGroup = class ListItemGroup extends webcomponentsBase.b {
         constructor() {
-            super(...arguments);
+            super();
+            /**
+             * Defines if the text of the component should wrap when it's too long.
+             * When set to "Normal", the content (title, description) will be wrapped
+             * using the `ui5-expandable-text` component.<br/>
+             *
+             * The text can wrap up to 100 characters on small screens (size S) and
+             * up to 300 characters on larger screens (size M and above). When text exceeds
+             * these limits, it truncates with an ellipsis followed by a text expansion trigger.
+             *
+             * Available options are:
+             * - `None` (default) - The text will truncate with an ellipsis.
+             * - `Normal` - The text will wrap (without truncation).
+             *
+             * @default "None"
+             * @public
+             * @since 2.15.0
+             */
+            this.wrappingType = "None";
             /**
              * Indicates whether the header is focused
              * @private
              */
             this.focused = false;
+            // Initialize the DragAndDropHandler with the necessary configurations
+            // The handler will manage the drag and drop operations for the list items.
+            this._dragAndDropHandler = new DragAndDropHandler(this, {
+                getItems: () => this.items,
+                getDropIndicator: () => this.dropIndicatorDOM,
+                filterPlacements: this._filterPlacements.bind(this),
+            });
         }
         onEnterDOM() {
-            p.subscribe(this);
+            webcomponentsBase.I.subscribe(this);
         }
         onExitDOM() {
-            p.unsubscribe(this);
+            webcomponentsBase.I.unsubscribe(this);
         }
         get groupHeaderItem() {
             return this.shadowRoot.querySelector("[ui5-li-group-header]");
@@ -340,62 +546,23 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
             return this.shadowRoot.querySelector("[ui5-drop-indicator]");
         }
         _ondragenter(e) {
-            e.preventDefault();
+            this._dragAndDropHandler.ondragenter(e);
         }
         _ondragleave(e) {
-            if (e.relatedTarget instanceof Node && this.shadowRoot.contains(e.relatedTarget)) {
-                return;
-            }
-            this.dropIndicatorDOM.targetReference = null;
+            this._dragAndDropHandler.ondragleave(e);
         }
         _ondragover(e) {
-            const draggedElement = p.getDraggedElement();
-            if (!(e.target instanceof HTMLElement) || !draggedElement) {
-                return;
-            }
-            const closestPosition = L(this.items, e.clientY, a.Vertical);
-            if (!closestPosition) {
-                this.dropIndicatorDOM.targetReference = null;
-                return;
-            }
-            let placements = closestPosition.placements;
-            if (closestPosition.element === draggedElement) {
-                placements = placements.filter(placement => placement !== r.On);
-            }
-            const placementAccepted = placements.some(placement => {
-                const beforeItemMovePrevented = !this.fireDecoratorEvent("move-over", {
-                    source: {
-                        element: draggedElement,
-                    },
-                    destination: {
-                        element: closestPosition.element,
-                        placement,
-                    },
-                });
-                if (beforeItemMovePrevented) {
-                    e.preventDefault();
-                    this.dropIndicatorDOM.targetReference = closestPosition.element;
-                    this.dropIndicatorDOM.placement = placement;
-                    return true;
-                }
-                return false;
-            });
-            if (!placementAccepted) {
-                this.dropIndicatorDOM.targetReference = null;
-            }
+            this._dragAndDropHandler.ondragover(e);
         }
         _ondrop(e) {
-            e.preventDefault();
-            this.fireDecoratorEvent("move", {
-                source: {
-                    element: p.getDraggedElement(),
-                },
-                destination: {
-                    element: this.dropIndicatorDOM.targetReference,
-                    placement: this.dropIndicatorDOM.placement,
-                },
-            });
-            this.dropIndicatorDOM.targetReference = null;
+            this._dragAndDropHandler.ondrop(e);
+        }
+        _filterPlacements(placements, draggedElement, targetElement) {
+            // Filter out MovePlacement.On when dragged element is the same as target
+            if (targetElement === draggedElement) {
+                return placements.filter(placement => placement !== r.On);
+            }
+            return placements;
         }
     };
     __decorate([
@@ -411,6 +578,9 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
             type: HTMLElement,
         })
     ], ListItemGroup.prototype, "items", void 0);
+    __decorate([
+        webcomponentsBase.s()
+    ], ListItemGroup.prototype, "wrappingType", void 0);
     __decorate([
         webcomponentsBase.s({ type: Boolean })
     ], ListItemGroup.prototype, "focused", void 0);
@@ -459,14 +629,12 @@ sap.ui.define(['exports', 'sap/ushell/thirdparty/webcomponents-base', 'sap/ushel
     };
     var ListItemGroup$1 = ListItemGroup;
 
+    exports.DragAndDropHandler = DragAndDropHandler;
     exports.DropIndicator = DropIndicator$1;
-    exports.L = L;
     exports.ListItemAccessibleRole = ListItemAccessibleRole$1;
     exports.ListItemGroup = ListItemGroup$1;
     exports.ListItemGroupHeader = ListItemGroupHeader$1;
-    exports.a = a;
     exports.isInstanceOfListItemGroup = isInstanceOfListItemGroup;
     exports.k = k;
-    exports.p = p;
 
 }));

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

@@ -1,4 +1,4 @@
-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';
+sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/webcomponents', 'sap/ushell/thirdparty/event-strict', 'sap/ushell/thirdparty/Icons', 'sap/ushell/thirdparty/parameters-bundle.css', '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/i18n-defaults2', 'sap/ushell/thirdparty/FocusableElements', 'sap/ushell/thirdparty/ListItemBase', 'sap/ushell/thirdparty/ListItemAdditionalText.css', 'sap/ushell/thirdparty/Icon', 'sap/ushell/thirdparty/ValueState', 'sap/ushell/thirdparty/AccessibilityTextsHelper', 'sap/ushell/thirdparty/Label', 'sap/ushell/thirdparty/Title', 'sap/ushell/thirdparty/getEffectiveScrollbarStyle', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/ListItemGroup', 'sap/ushell/thirdparty/WrappingType', 'sap/ushell/thirdparty/willShowContent'], (function (webcomponentsBase, webcomponents, eventStrict, Icons, parametersBundle_css$1, ListItemCustom, parametersBundle_css, ResponsivePopover, MenuItem, List, BusyIndicator, Button, information, i18nDefaults, FocusableElements, ListItemBase, ListItemAdditionalText_css, Icon, ValueState, AccessibilityTextsHelper, Label, Title, getEffectiveScrollbarStyle, toLowercaseEnumValue, ListItemGroup, WrappingType, willShowContent) { 'use strict';
 
     function MenuTemplate() {
         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 &&
@@ -8,8 +8,8 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
     }
 
     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-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}
+    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css$1.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-14-0-rc-0_menu_popover_border_radius)}.ui5-menu-busy-indicator{width:100%}.ui5-menu-dialog-header{display:flex;height:var(--_ui5-v2-14-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) {
@@ -156,6 +156,9 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                 item._siblingsWithIcon = siblingsWithIcon;
             });
         }
+        getFocusDomRef() {
+            return this._list?.getFocusDomRef();
+        }
         _setupItemNavigation() {
             if (this._list) {
                 this._list._itemNavigation._getItems = () => this._navigatableMenuItems;
@@ -223,7 +226,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
                 });
                 if (!prevented) {
                     item._updateCheckedState();
-                    this._popover && item.fireDecoratorEvent("close-menu");
+                    this._popover && !item._shiftPressed && item.fireDecoratorEvent("close-menu");
                 }
             }
             else {
@@ -236,12 +239,8 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             if (!MenuItem.isInstanceOfMenuItem(item)) {
                 return;
             }
-            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);
             const shouldOpenMenu = this.isRtl ? webcomponentsBase.K(e) : webcomponentsBase.c(e);
-            const shouldCloseMenu = menuItemInMenu && !(isItemNavigation || isItemSelection || isEndContentNavigation);
             if (webcomponentsBase.b$1(e) || isTabNextPrevious) {
                 e.preventDefault();
             }
@@ -251,7 +250,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
             if (shouldOpenMenu) {
                 this._openItemSubMenu(item);
             }
-            else if ((shouldCloseMenu || isTabNextPrevious)) {
+            else if (isTabNextPrevious) {
                 this._close();
             }
         }
@@ -312,7 +311,7 @@ sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdpart
         webcomponentsBase.d({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
     ], Menu.prototype, "items", void 0);
     __decorate([
-        i18nDefaults.i("@ui5/webcomponents")
+        parametersBundle_css$1.i("@ui5/webcomponents")
     ], Menu, "i18nBundle", void 0);
     Menu = Menu_1 = __decorate([
         webcomponentsBase.m({

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/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';
+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/parameters-bundle.css', 'sap/ushell/thirdparty/Icons', 'sap/ushell/thirdparty/MenuItem2', 'sap/ushell/thirdparty/ListItemCustom', 'sap/ushell/thirdparty/i18n-defaults2', 'sap/ushell/thirdparty/information', 'sap/ushell/thirdparty/ListItemBase', 'sap/ushell/thirdparty/ResponsivePopover', 'sap/ushell/thirdparty/Title', 'sap/ushell/thirdparty/getEffectiveScrollbarStyle', 'sap/ushell/thirdparty/ValueState', 'sap/ushell/thirdparty/toLowercaseEnumValue', 'sap/ushell/thirdparty/FocusableElements', 'sap/ushell/thirdparty/AccessibilityTextsHelper', 'sap/ushell/thirdparty/Icon', 'sap/ushell/thirdparty/Button2', 'sap/ushell/thirdparty/willShowContent', 'sap/ushell/thirdparty/BusyIndicator', 'sap/ushell/thirdparty/Label', 'sap/ushell/thirdparty/List', 'sap/ushell/thirdparty/ListItemGroup', 'sap/ushell/thirdparty/WrappingType', 'sap/ushell/thirdparty/ListItemAdditionalText.css'], (function (exports, webcomponentsBase, webcomponents, parametersBundle_css, eventStrict, parametersBundle_css$1, Icons, MenuItem, ListItemCustom, i18nDefaults, information, ListItemBase, ResponsivePopover, Title, getEffectiveScrollbarStyle, ValueState, toLowercaseEnumValue, FocusableElements, AccessibilityTextsHelper, Icon, Button, willShowContent, BusyIndicator, Label, List, ListItemGroup, WrappingType, ListItemAdditionalText_css) { 'use strict';