feat(ui5-breadcrumbs-item): introduce click event

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

@@ -91,7 +91,15 @@ describe("Breadcrumbs - getFocusDomRef Method", () => {
 				const item = $el[1];
 
 				const breadcrumbsAnchor = breadcrumbs.getFocusDomRef();
-				const itemAnchor = item.getFocusDomRef().shadowRoot.querySelector("a");
+				const itemFocusDomRef = item.getFocusDomRef();
+				const itemAnchor = itemFocusDomRef?.shadowRoot?.querySelector("a");
+
+				expect(breadcrumbsAnchor).to.exist;
+				expect(itemAnchor).to.exist;
+
+				if (!breadcrumbsAnchor || !itemAnchor) {
+					return;
+				}
 
 				expect(breadcrumbsAnchor.textContent).to.equal(itemAnchor.textContent);
 			});
@@ -121,7 +129,15 @@ describe("Breadcrumbs - getFocusDomRef Method", () => {
 				const item = $el[1];
 
 				const breadcrumbsAnchor = breadcrumbs.getFocusDomRef();
-				const itemAnchor = item.getFocusDomRef().shadowRoot.querySelector("a");
+				const itemFocusDomRef = item.getFocusDomRef();
+				const itemAnchor = itemFocusDomRef?.shadowRoot?.querySelector("a");
+
+				expect(breadcrumbsAnchor).to.exist;
+				expect(itemAnchor).to.exist;
+
+				if (!breadcrumbsAnchor || !itemAnchor) {
+					return;
+				}
 
 				expect(breadcrumbsAnchor.textContent).to.equal(itemAnchor.textContent);
 			});
@@ -143,6 +159,11 @@ describe("Breadcrumbs general interaction", () => {
 			const domRef = breadcrumbItemElement.getDomRef();
 
 			expect(domRef).to.exist;
+
+			if (!domRef) {
+				return;
+			}
+
 			expect(domRef.nodeType).to.equal(Node.ELEMENT_NODE);
 		});
 	});
@@ -910,37 +931,47 @@ describe("Breadcrumbs general interaction", () => {
 			</>
 		);
 
-		// assert that last link in the narrow Breadcrumbs is truncated
+		// Assert actual text truncation by checking ellipsis overflow metrics.
 		cy.get("#breadcrumbs2")
 			.shadow()
-			.find("li:last-child")
-			.then(($lastLink) => {
-				const linkRect = $lastLink[0].getBoundingClientRect();
-				const maxExpectedWidth = 300;
-
-				expect(linkRect.width, "link wrapper should be shrinkable and less than parent width")
-					.to.be.lessThan(maxExpectedWidth);
-		});
+			.find(".ui5-breadcrumbs-current-location [ui5-label]")
+			.shadow()
+			.find(".ui5-label-text-wrapper")
+			.should(($textWrapper) => {
+				const wrapper = $textWrapper[0] as HTMLElement;
+				expect(wrapper.scrollWidth, "text should overflow the available width")
+					.to.be.greaterThan(wrapper.clientWidth);
+			});
 
 		// assert that height of both Breadcrumbs (one that fits and one that truncates)
 		// is the same
 		cy.get("#breadcrumbs1")
 			.then(($breadcrumbs1) => {
 				const breadcrumbs1DOMRef = ($breadcrumbs1[0] as Breadcrumbs).getDomRef();
-				const breadcrumbs1Rect = breadcrumbs1DOMRef.getBoundingClientRect();
-				const breadcrumbs1Height = breadcrumbs1Rect.height;
+				expect(breadcrumbs1DOMRef).to.exist;
 
+				if (!breadcrumbs1DOMRef) {
+					return 0;
+				}
 
+				return breadcrumbs1DOMRef.getBoundingClientRect().height;
+			})
+			.then((breadcrumbs1Height) => {
 				cy.get("#breadcrumbs2")
-					.then(($breadcrumbs2) => {
+					.should(($breadcrumbs2) => {
 						const breadcrumbs2DOMRef = ($breadcrumbs2[0] as Breadcrumbs).getDomRef();
-						const breadcrumbs2Rect = breadcrumbs2DOMRef.getBoundingClientRect();
-						const breadcrumbs2Height = breadcrumbs2Rect.height;
+						expect(breadcrumbs2DOMRef).to.exist;
+
+						if (!breadcrumbs2DOMRef) {
+							return;
+						}
+
+						const breadcrumbs2Height = breadcrumbs2DOMRef.getBoundingClientRect().height;
 
 						expect(breadcrumbs2Height, "link height should remain the same")
-							.to.be.equal(breadcrumbs1Height);
-				});
-		});
+							.to.be.closeTo(breadcrumbs1Height, 1);
+					});
+			});
 	});
 });
 
@@ -1031,4 +1062,97 @@ describe("Breadcrumbs with item for current page", () => {
 					.should('not.exist');
 			});
 	});
+});
+
+describe("BreadcrumbsItem click event", () => {
+	it("fires click event on item when a visible link is clicked", () => {
+		cy.mount(
+			<Breadcrumbs>
+				<BreadcrumbsItem id="item1" href="#">Link1</BreadcrumbsItem>
+				<BreadcrumbsItem id="item2" href="#">Link2</BreadcrumbsItem>
+				<BreadcrumbsItem>Location</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("ui5-click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("[ui5-breadcrumbs]")
+			.shadow()
+			.find(".ui5-breadcrumbs-link-wrapper ui5-link")
+			.first()
+			.realClick();
+
+		cy.get("@clickStub").should("have.been.calledOnce");
+	});
+
+	it("fires click event on current page item (label) when activated", () => {
+		cy.mount(
+			<Breadcrumbs>
+				<BreadcrumbsItem href="#">Link1</BreadcrumbsItem>
+				<BreadcrumbsItem id="currentItem">Location</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+
+		cy.get("#currentItem").then(($item) => {
+			$item[0].addEventListener("ui5-click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("[ui5-breadcrumbs]")
+			.shadow()
+			.find(".ui5-breadcrumbs-current-location span")
+			.realClick();
+
+		cy.get("@clickStub").should("have.been.calledOnce");
+	});
+
+	it("prevents item-click on breadcrumbs when item click is cancelled", () => {
+		let itemClickFired = false;
+
+		cy.mount(
+			<Breadcrumbs onItemClick={() => { itemClickFired = true; }}>
+				<BreadcrumbsItem id="item1" href="#">Link1</BreadcrumbsItem>
+				<BreadcrumbsItem>Location</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("ui5-click", (e: Event) => { e.preventDefault(); });
+		});
+
+		cy.get("[ui5-breadcrumbs]")
+			.shadow()
+			.find(".ui5-breadcrumbs-link-wrapper ui5-link")
+			.first()
+			.realClick();
+
+		cy.then(() => {
+			expect(itemClickFired).to.be.false;
+		});
+	});
+
+	it("prevents item-click on breadcrumbs when current page item click is cancelled", () => {
+		let itemClickFired = false;
+
+		cy.mount(
+			<Breadcrumbs onItemClick={() => { itemClickFired = true; }}>
+				<BreadcrumbsItem href="#">Link1</BreadcrumbsItem>
+				<BreadcrumbsItem id="currentItem">Location</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+
+		cy.get("#currentItem").then(($item) => {
+			$item[0].addEventListener("ui5-click", (e: Event) => { e.preventDefault(); });
+		});
+
+		cy.get("[ui5-breadcrumbs]")
+			.shadow()
+			.find(".ui5-breadcrumbs-current-location span")
+			.realClick();
+
+		cy.then(() => {
+			expect(itemClickFired).to.be.false;
+		});
+	});
 });

packages/main/src/Breadcrumbs.ts

@@ -387,6 +387,16 @@ class Breadcrumbs extends UI5Element implements IToolbarItemContent {
 				shiftKey,
 			} = e.detail;
 
+		if (!item.fireDecoratorEvent("click", {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		})) {
+			e.preventDefault();
+			return;
+		}
+
 		if (!this.fireDecoratorEvent("item-click", {
 			item,
 			altKey,
@@ -408,6 +418,15 @@ class Breadcrumbs extends UI5Element implements IToolbarItemContent {
 				shiftKey,
 			} = e;
 
+		if (!item.fireDecoratorEvent("click", {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		})) {
+			return;
+		}
+
 		this.fireDecoratorEvent("item-click", {
 			item,
 			altKey,
@@ -422,6 +441,15 @@ class Breadcrumbs extends UI5Element implements IToolbarItemContent {
 			items = this._getItems(),
 			item = items.find(x => `${x._id}-li` === listItem.id)!;
 
+		if (!item.fireDecoratorEvent("click", {
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			shiftKey: false,
+		})) {
+			return;
+		}
+
 		if (this.fireDecoratorEvent("item-click", { item })) {
 			locationOpen(item.href, item.target || "_self", "noopener,noreferrer");
 			this.responsivePopover!.open = false;

packages/main/src/BreadcrumbsItem.ts

@@ -3,9 +3,17 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import eventStrict from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import LinkDesign from "./types/LinkDesign.js";
 
+type BreadcrumbsItemClickEventDetail = {
+	altKey: boolean;
+	ctrlKey: boolean;
+	metaKey: boolean;
+	shiftKey: boolean;
+};
+
 /**
  * @class
  *
@@ -19,7 +27,26 @@ import LinkDesign from "./types/LinkDesign.js";
  * @abstract
  */
 @customElement("ui5-breadcrumbs-item")
+/**
+ * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+ *
+ * **Note:** The event is also fired for the current page location item (the last item), which is not a link by design.
+ *
+ * @param {boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+ * @param {boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+ * @param {boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+ * @param {boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
+ * @public
+ * @since 2.22.0
+ */
+@eventStrict("click", {
+	bubbles: true,
+	cancelable: true,
+})
 class BreadcrumbsItem extends UI5Element {
+	eventDetails!: {
+		"click": BreadcrumbsItemClickEventDetail,
+	}
 	/**
 	 * Defines the link href.
 	 *
@@ -87,3 +114,4 @@ class BreadcrumbsItem extends UI5Element {
 BreadcrumbsItem.define();
 
 export default BreadcrumbsItem;
+export type { BreadcrumbsItemClickEventDetail };

packages/main/test/pages/Breadcrumbs.html

@@ -200,6 +200,25 @@ <h2>Breadcrumbs with hardcoded width: 300px and design="NoCurrentPage"</h2>
 		</ui5-breadcrumbs>
 	</div>
 
+	<h2>BreadcrumbsItem click event</h2>
+	<p>Each item fires its own <code>ui5-click</code> event. The log below shows which item was clicked.</p>
+
+	<ui5-breadcrumbs id="breadcrumbsClickEvent">
+		<ui5-breadcrumbs-item id="clickItem1" href="#">Products</ui5-breadcrumbs-item>
+		<ui5-breadcrumbs-item id="clickItem2" href="#">Laptops</ui5-breadcrumbs-item>
+		<ui5-breadcrumbs-item id="clickItem3">ThinkPad X1</ui5-breadcrumbs-item>
+	</ui5-breadcrumbs>
+
+	<p>Last item click: <span id="itemClickResult">-</span></p>
+
+	<script>
+		document.querySelectorAll("#breadcrumbsClickEvent ui5-breadcrumbs-item").forEach((item) => {
+			item.addEventListener("ui5-click", (e) => {
+				document.getElementById("itemClickResult").textContent = item.innerText.trim();
+			});
+		});
+	</script>
+
 	<script>
 		// HCB button
 		var btn = document.getElementById('myBtn');

packages/website/docs/_components_pages/main/Breadcrumbs/Breadcrumbs.mdx

@@ -6,6 +6,7 @@ import Basic from "../../../_samples/main/Breadcrumbs/Basic/Basic.md";
 import BreadcrumbsStyles from "../../../_samples/main/Breadcrumbs/BreadcrumbsStyles/BreadcrumbsStyles.md";
 import BreadcrumbsOverflow from "../../../_samples/main/Breadcrumbs/BreadcrumbsOverflow/BreadcrumbsOverflow.md";
 import NoCurrentPage from "../../../_samples/main/Breadcrumbs/NoCurrentPage/NoCurrentPage.md";
+import ClickEvent from "../../../_samples/main/Breadcrumbs/ClickEvent/ClickEvent.md";
 
 
 <%COMPONENT_OVERVIEW%>
@@ -31,4 +32,9 @@ Separator between the links can be easily changed.
 ### Current Page Appearance
 The Breadcrumbs supports two visual appearances for the last BreadcrumbsItem - as "current page" (bold and without separator) and as a regular link, followed by separator.
 
-<NoCurrentPage />
+<NoCurrentPage />
+
+### Item Click Event
+Each `ui5-breadcrumbs-item` fires its own `click` event, allowing framework consumers to attach handlers directly on the item.
+
+<ClickEvent />

packages/website/docs/_samples/main/Breadcrumbs/ClickEvent/ClickEvent.md

@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+<Editor html={html} js={js} react={react} />

packages/website/docs/_samples/main/Breadcrumbs/ClickEvent/main.js

@@ -0,0 +1,8 @@
+import "@ui5/webcomponents/dist/Breadcrumbs.js";
+import "@ui5/webcomponents/dist/BreadcrumbsItem.js";
+
+document.querySelectorAll("ui5-breadcrumbs-item").forEach((item) => {
+    item.addEventListener("ui5-click", () => {
+        document.getElementById("result").textContent = item.innerText.trim();
+    });
+});

packages/website/docs/_samples/main/Breadcrumbs/ClickEvent/sample.html

@@ -0,0 +1,27 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+    <ui5-breadcrumbs>
+        <ui5-breadcrumbs-item id="item-products" href="#">Products</ui5-breadcrumbs-item>
+        <ui5-breadcrumbs-item id="item-laptops" href="#">Laptops</ui5-breadcrumbs-item>
+        <ui5-breadcrumbs-item id="item-current">ThinkPad X1</ui5-breadcrumbs-item>
+    </ui5-breadcrumbs>
+
+    <p>Last clicked item: <strong id="result">-</strong></p>
+
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->