chore(ui5-toolbar): toolbar item wrapper introduced

packages/main/cypress/specs/Toolbar.cy.tsx

@@ -4,7 +4,7 @@ import ToolbarSelect from "../../src/ToolbarSelect.js";
 import ToolbarSelectOption from "../../src/ToolbarSelectOption.js";
 import ToolbarSeparator from "../../src/ToolbarSeparator.js";
 import ToolbarSpacer from "../../src/ToolbarSpacer.js";
-import type ToolbarItem from "../../src/ToolbarItem.js";
+import ToolbarItem from "../../src/ToolbarItem.js";
 import add from "@ui5/webcomponents-icons/dist/add.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import employee from "@ui5/webcomponents-icons/dist/employee.js";
@@ -575,6 +575,7 @@ describe("ToolbarButton", () => {
 		cy.get("@toolbar").then($toolbar => {
 			const toolbar = $toolbar[0] as Toolbar;
 			const addButton = document.getElementById("add-btn") as ToolbarButton;
+
 			expect(toolbar.itemsToOverflow.includes(addButton)).to.be.true;
 
 			const initialOverflowCount = toolbar.itemsToOverflow.length;
@@ -664,3 +665,140 @@ describe("ToolbarButton", () => {
 			.should("contain.text", "Decline Item");
 	});
 });
+
+describe("Toolbar Item", () => {
+    it("Should render ui5-toolbar-item with correct properties and not suppress events", () => {
+        // Mount the Toolbar with a ui5-toolbar-item wrapping a web component
+        cy.mount(
+            <Toolbar>
+                <ToolbarItem prevent-overflow-closing overflow-priority="AlwaysOverflow">
+                    <Button id="innerButton" icon="employee">User Menu</Button>
+                </ToolbarItem>
+            </Toolbar>
+        );
+
+        // Verify the ui5-toolbar-item has the correct properties
+        cy.get("ui5-toolbar-item").should((item) => {
+			expect(item).to.have.attr("prevent-overflow-closing");
+			expect(item).to.have.attr("overflow-priority", "AlwaysOverflow");
+		  });
+
+        // Verify the inner component (ui5-button) is rendered
+        cy.get("ui5-toolbar-item")
+            .find("ui5-button").should((button) => {
+				expect(button).to.exist;
+				expect(button).to.contain.text("User Menu");
+			  });
+
+
+        // Attach a click event to the inner button
+        cy.get("ui5-button#innerButton")
+            .then(button => {
+                button.get(0).addEventListener("click", cy.stub().as("buttonClicked"));
+            });
+
+		cy.get('ui5-toolbar') // Select the toolbar
+			.shadow() // Access the shadow DOM of the toolbar
+			.find('.ui5-tb-overflow-btn') // Find the overflow button inside the shadow DOM
+			.realClick();
+
+		cy.get("ui5-toolbar")
+			.shadow()
+			.find("[ui5-popover]")
+			.as("popover")
+
+		cy.get("@popover")
+			.should("have.prop", "open", true);
+
+        // Trigger a click event on the inner button
+        cy.get("ui5-button#innerButton").realClick();
+
+        // Verify the click event was triggered
+        cy.get("@buttonClicked").should("have.been.calledOnce");
+    });
+
+    it("Should respect prevent-overflow-closing property", () => {
+		// Mount the Toolbar with constrained width to force overflow
+		cy.mount(
+			<div style={{ width: "200px" }}>
+				<Toolbar>
+					<ToolbarItem overflow-priority="AlwaysOverflow" prevent-overflow-closing>
+						<Button id="preventCloseButton" icon="employee">Prevent Close</Button>
+					</ToolbarItem>
+					<ToolbarItem overflow-priority="AlwaysOverflow">
+						<Button id="normalButton" icon="add">Normal Button</Button>
+					</ToolbarItem>
+				</Toolbar>
+			</div>
+		);
+
+		// Wait for overflow processing
+		cy.wait(500);
+
+		// Click the overflow button to open the popover
+		cy.get("ui5-toolbar")
+			.shadow()
+			.find(".ui5-tb-overflow-btn")
+			.click();
+
+		// Verify the popover is open
+		cy.get("ui5-toolbar")
+			.shadow()
+			.find(".ui5-overflow-popover")
+			.should("have.prop", "open", true);
+
+		// Click on the item with prevent-overflow-closing
+		cy.get("ui5-toolbar-item[prevent-overflow-closing]")
+			.find("ui5-button")
+			.click();
+
+		// Verify the popover remains open
+		cy.get("ui5-toolbar")
+			.shadow()
+			.find(".ui5-overflow-popover")
+			.should("have.prop", "open", true);
+
+		// Optional: Test that normal items still close the popover
+		cy.get("ui5-toolbar-item:not([prevent-overflow-closing])")
+			.find("ui5-button")
+			.click();
+
+		// Verify the popover closes
+		cy.get("ui5-toolbar")
+			.shadow()
+			.find(".ui5-overflow-popover")
+			.should("have.prop", "open", false);
+	});
+
+    it("Should respect overflow-priority property", () => {
+        // Mount the Toolbar with multiple ui5-toolbar-items
+        cy.mount(
+            <Toolbar>
+                <ToolbarItem overflow-priority="AlwaysOverflow">
+                    <Button id="highPriorityButton" icon="employee">High Priority</Button>
+                </ToolbarItem>
+                <ToolbarItem overflow-priority="NeverOverflow">
+                    <Button id="lowPriorityButton" icon="employee">Low Priority</Button>
+                </ToolbarItem>
+            </Toolbar>
+        );
+
+        // Verify the overflow-priority property is respected
+        cy.get("ui5-toolbar-item[overflow-priority='AlwaysOverflow']")
+            .should("exist")
+            .should("have.attr", "overflow-priority", "AlwaysOverflow");
+
+        cy.get("ui5-toolbar-item[overflow-priority='NeverOverflow']")
+            .should("exist")
+            .should("have.attr", "overflow-priority", "NeverOverflow");
+
+        // Simulate overflow behavior and ensure high-priority item remains visible
+        cy.viewport(300, 1080); // Simulate a smaller viewport
+        cy.get("ui5-toolbar-item[overflow-priority='NeverOverflow']")
+            .should("be.visible");
+
+        // Ensure low-priority item is hidden or moved to overflow
+        cy.get("ui5-toolbar-item[overflow-priority='AlwaysOverflow']")
+            .should("not.be.visible");
+    });
+})

packages/main/src/Breadcrumbs.ts

@@ -24,6 +24,7 @@ import BreadcrumbsDesign from "./types/BreadcrumbsDesign.js";
 import "./BreadcrumbsItem.js";
 import type BreadcrumbsItem from "./BreadcrumbsItem.js";
 import type BreadcrumbsSeparator from "./types/BreadcrumbsSeparator.js";
+import type { IOverflowToolbarItem } from "./ToolbarItem.js";
 
 import {
 	BREADCRUMB_ITEM_POS,
@@ -84,6 +85,7 @@ type FocusAdaptor = ITabbable & {
  * - [End] - Navigates to the last item.
  * @constructor
  * @extends UI5Element
+ * @implements {IOverflowToolbarItem}
  * @public
  * @since 1.0.0-rc.15
  */
@@ -109,7 +111,7 @@ type FocusAdaptor = ITabbable & {
 	bubbles: true,
 	cancelable: true,
 })
-class Breadcrumbs extends UI5Element {
+class Breadcrumbs extends UI5Element implements IOverflowToolbarItem {
 	eventDetails!: {
 		"item-click": BreadcrumbsItemClickEventDetail,
 	}
@@ -642,6 +644,9 @@ class Breadcrumbs extends UI5Element {
 	get _cancelButtonText() {
 		return Breadcrumbs.i18nBundle.getText(BREADCRUMBS_CANCEL_BUTTON);
 	}
+	get _selfOverflowed() {
+		return true;
+	}
 }
 
 Breadcrumbs.define();

packages/main/src/Toolbar.ts

@@ -5,7 +5,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -300,14 +299,30 @@ class Toolbar extends UI5Element {
 
 	async onAfterRendering() {
 		await renderFinished();
-
 		this.storeItemsWidth();
 		this.processOverflowLayout();
 		this.items.forEach(item => {
-			item.isOverflowed = this.overflowItems.map(overflowItem => overflowItem).indexOf(item) !== -1;
+			this.addItemsAdditionalProperties(item);
 		});
 	}
 
+	addItemsAdditionalProperties(item: ToolbarItem) {
+		item.isOverflowed = this.overflowItems.indexOf(item) !== -1;
+		const itemWrapper = this.shadowRoot!.querySelector(`#${item._individualSlot}`) as HTMLElement;
+		if (item._selfOverflowed && !item.isOverflowed && itemWrapper) {
+			// We need to set the max-width to the self-overflow element in order ot prevent it from taking all the available space,
+			// since, unlike the other items, it is allowed to grow and shrink
+			// We need to set the max-width to none and its position to absolute to allow the item to grow and measure its width,
+			// then when set, the max-width will be cached and we will set its highest value to not cut it when the Toolbar shrinks it
+			// on rendering and then we resize it manually.
+			itemWrapper.style.maxWidth = `none`;
+			itemWrapper?.classList.add("ui5-tb-self-overflow-grow");
+			item._maxWidth = Math.max(this.getItemWidth(item), item._maxWidth);
+			itemWrapper.style.maxWidth = `${item._maxWidth}px`;
+			itemWrapper?.classList.remove("ui5-tb-self-overflow-grow");
+		}
+	}
+
 	/**
 	 * Returns if the overflow popup is open.
 	 * @public
@@ -460,16 +475,13 @@ class Toolbar extends UI5Element {
 		this.popoverOpen = false;
 	}
 
-	onBeforeClose(e: UI5CustomEvent<Popover, "before-close">) {
-		e.preventDefault();
-	}
-
 	onOverflowPopoverOpened() {
 		this.popoverOpen = true;
 	}
 
 	onResize() {
 		this.closeOverflow();
+		this.storeItemsWidth();
 		this.processOverflowLayout();
 	}
 

packages/main/src/ToolbarButton.ts

@@ -170,6 +170,8 @@ class ToolbarButton extends ToolbarItem {
 	@property()
 	width?: string;
 
+	_kind = "ToolbarButton";
+
 	get styles() {
 		return {
 			width: this.width,