Add MenuItem 'check' public event and remove MenuItemGroup 'check-change' event (#11793)

There were 2 events introduced in PR #10028 - private `item-check` event fired by `MenuItem` when its `checked` property changes, and public `check-change` event fired by `MenuItemGroup` when any of its `MenuItem` components changes it's `checked` property.

This PR removes these two events in favor of single public `check` event, fired by the `MenuItem` when its `checked` property changes. The new situation will be more suitable for handling `MenuItem` `checked` states and updating models in applications that use Menu Item Groups.

Author: NHristov-sap

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

@@ -371,6 +371,36 @@ describe("Menu interaction", () => {
 				.should("have.been.calledOnce");
 		});
 
+		it("Event firing - 'ui5-check' after 'click' on menu item", () => {
+			cy.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu opener="btnOpen">
+						<MenuItemGroup checkMode="Single">
+							<MenuItem text="Item 1"></MenuItem>
+						</MenuItemGroup>
+					</Menu>
+				</>
+			);
+
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
+			cy.get("[ui5-menu]")
+				.then($item => {
+					$item.get(0).addEventListener("ui5-check", cy.stub().as("checked"));
+				});
+
+			cy.get("[ui5-menu]")
+				.ui5MenuOpened();
+
+			cy.get("[ui5-menu-item]")
+				.ui5MenuItemClick();
+
+			cy.get("@checked")
+				.should("have.been.calledOnce");
+		});
+
 		it("Prevent menu closing on item press", () => {
 			cy.mount(
 				<>

packages/main/src/MenuItem.ts

@@ -131,10 +131,10 @@ type MenuItemAccessibilityAttributes = Pick<AccessibilityAttributes, "ariaKeySho
 
 /**
  * Fired when an item is checked or unchecked.
- * @private
+ * @public
  * @since 2.12.0
  */
-@event("item-check", {
+@event("check", {
 	bubbles: true,
 })
 class MenuItem extends ListItem implements IMenuItem {
@@ -144,7 +144,7 @@ class MenuItem extends ListItem implements IMenuItem {
 		"before-close": MenuBeforeCloseEventDetail
 		"close": void
 		"close-menu": void
-		"item-check": void
+		"check": void
 		"exit-end-content": MenuNavigateOutOfEndContentEventDetail
 	}
 
@@ -635,7 +635,7 @@ class MenuItem extends ListItem implements IMenuItem {
 		const newState = !this.checked;
 
 		this.checked = newState;
-		this.fireDecoratorEvent("item-check");
+		this.fireDecoratorEvent("check");
 	}
 }
 

packages/main/src/MenuItemGroup.ts

@@ -2,16 +2,13 @@ import UI5Element 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.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type MenuItem from "./MenuItem.js";
 import { isInstanceOfMenuItem } from "./MenuItem.js";
 import MenuItemGroupTemplate from "./MenuItemGroupTemplate.js";
 import MenuItemGroupCheckMode from "./types/MenuItemGroupCheckMode.js";
 import type { IMenuItem } from "./Menu.js";
 
-type MenuItemGroupCheckChangeEventDetail = { checkedItems: Array<MenuItem>; }
-
 /**
  * @class
  *
@@ -48,19 +45,7 @@ type MenuItemGroupCheckChangeEventDetail = { checkedItems: Array<MenuItem>; }
 	template: MenuItemGroupTemplate,
 })
 
-/**
- * Fired when an item in the group is checked or unchecked.
- * @public
- * @since 2.12.0
- */
-@event("check-change", {
-	bubbles: true,
-})
 class MenuItemGroup extends UI5Element implements IMenuItem {
-	eventDetails!: UI5Element["eventDetails"] & {
-		"check-change": MenuItemGroupCheckChangeEventDetail
-	}
-
 	/**
 	 * Defines the component's check mode.
 	 * @default "None"
@@ -137,10 +122,6 @@ class MenuItemGroup extends UI5Element implements IMenuItem {
 			this._clearCheckedItems();
 			clickedItem.checked = isChecked;
 		}
-
-		this.fireDecoratorEvent("check-change", {
-			checkedItems: this._menuItems.filter((item: MenuItem) => item.checked),
-		});
 	}
 }
 

packages/main/src/MenuItemGroupTemplate.tsx

@@ -4,7 +4,7 @@ export default function MenuItemGroupTemplate(this: MenuItemGroup) {
 	return (
 		<div
 			role="group"
-			onui5-item-check={this._handleItemCheck}
+			onui5-check={this._handleItemCheck}
 		>
 			<slot></slot>
 		</div>

packages/main/test/pages/Menu.html

@@ -356,9 +356,10 @@
 
 		});
 
-		menuGroups.addEventListener("ui5-check-change", function(event) {
+		menuGroups.addEventListener("ui5-check", function(event) {
+			console.warn("Check event fired for item: " + event.target.text);
+			console.warn("Checked state: " + event.target.checked);
 			console.warn(event.target);
-			console.warn("Checked items: " + event.detail.checkedItems.map(item => item.text).join(", "));
 		});
 
 	</script>