feat(ui5-table): behavior property added for selections

- RowSelector: In this default mode, rows can only be selected using the row selector column.
- RowOnly: Rows can only be selected by clicking directly on the row, as the row selector column
  is hidden.

Fixes: #10893

Author: aborjinik

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

@@ -59,8 +59,9 @@ function mountTestpage(selectionMode: string) {
 	);
 
 	cy.get("#table0").children("ui5-table-header-row").first().as("headerRow");
-	cy.get("#table0").children("ui5-table-row").get("[row-key=\"0\"]").as("row0");
-	cy.get("#table0").children("ui5-table-row").get("[row-key=\"4\"]").as("row4");
+	[0, 1, 2, 4].forEach(key => {
+		cy.get(`#table0`).children(`ui5-table-row[row-key="${key}"]`).as(`row${key}`);
+	});
 }
 
 describe("Mode - None", () => {
@@ -115,7 +116,12 @@ const testConfig = {
 				"block_1": "0",
 				"block_2": "3",
 			},
-		},
+			"ROWONLY": {
+				"click": "0",
+				"space": "1",
+				"enter": "2"
+			}
+		}
 	},
 	"Multiple": {
 		"config": {
@@ -154,6 +160,11 @@ const testConfig = {
 				"initial": "0",
 				"block_1": "0 1",
 				"block_2": "0 1 3 4"
+			},
+			"ROWONLY": {
+				"click": "0",
+				"space": "0 1",
+				"enter": "0 1 2"
 			}
 		}
 	}
@@ -292,6 +303,49 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 			checkSelectionChangeSpy(callCount);
 		});
 	});
+
+	describe(`Behavior - ${mode}`, () => {
+        beforeEach(() => {
+            mountTestpage(testConfigEntry.config.mode);
+
+			cy.get("@row0").invoke("prop", "interactive", true);
+			cy.get("@row1").invoke("prop", "interactive", true);
+			cy.get("@row2").invoke("prop", "interactive", true);
+			cy.get("#selection").invoke("attr", "behavior", "RowWÓnly");
+			cy.get("#table0").invoke("on", "row-click", cy.stub().as("rowClickSpy"));
+			cy.get("#selection").invoke("on", "change", cy.stub().as("selectionChangeSpy"));
+
+			// eslint-disable-next-line cypress/no-unnecessary-waiting
+			cy.wait(50);
+        });
+
+		it("renders neither selection cell nor selection component", () => {
+			cy.get("@headerRow").shadow().find("#selection-cell").should("not.exist");
+			cy.get("@row0").shadow().find("#selection-cell").should("not.exist");
+
+			cy.get("@headerRow").shadow().find("#selection-component").should("not.exist");
+			cy.get("@row0").shadow().find("#selection-component").should("not.exist");
+		});
+
+		it("selects row via click, space or enter", () => {
+			cy.get("@row0").realClick();
+			checkSelection(testConfigEntry.cases.ROWONLY.click);
+			checkSelectionChangeSpy(1);
+
+			cy.get("@row0").realPress("ArrowDown");
+			cy.get("@row1").realPress("Space");
+			checkSelection(testConfigEntry.cases.ROWONLY.space);
+			checkSelectionChangeSpy(2);
+
+			cy.get("@row1").realPress("ArrowDown");
+			cy.get("@row2").realPress("Enter");
+			checkSelection(testConfigEntry.cases.ROWONLY.enter);
+			checkSelectionChangeSpy(3);
+
+			cy.get("@rowClickSpy").should("not.have.callCount");
+		});
+    });
+
 });
 
 describe("TableSelectionMulti", () => {

packages/main/src/Table.ts

@@ -191,6 +191,9 @@ type TableRowActionClickEventDetail = {
 /**
  * Fired when an interactive row is clicked.
  *
+ * **Note:** This event is not fired if the `behavior` property of the selection component is set to `RowOnly`.
+ * In such cases, use the `change` event of the selection component instead.
+ *
  * @param {TableRow} row The row instance
  * @public
  */

packages/main/src/TableRow.ts

@@ -137,13 +137,17 @@ class TableRow extends TableRowBase {
 
 		if (eventOrigin === this && this._isInteractive && isEnter(e)) {
 			this.toggleAttribute("_active", true);
-			this._table?._onRowClick(this);
+			this._onclick();
 		}
 	}
 
 	_onclick() {
-		if (this._isInteractive && this === getActiveElement()) {
-			this._table?._onRowClick(this);
+		if (this === getActiveElement()) {
+			if (this._isSelectable && !this._hasRowSelector) {
+				this._onSelectionChange();
+			} else 	if (this.interactive) {
+				this._table?._onRowClick(this);
+			}
 		}
 	}
 
@@ -162,7 +166,7 @@ class TableRow extends TableRowBase {
 	}
 
 	get _isInteractive() {
-		return this.interactive;
+		return this.interactive || (this._isSelectable && !this._hasRowSelector);
 	}
 
 	get _hasOverflowActions() {

packages/main/src/TableSelectionBase.ts

@@ -5,6 +5,7 @@ import type Table from "./Table.js";
 import type TableRowBase from "./TableRowBase.js";
 import type TableRow from "./TableRow.js";
 import type { ITableFeature } from "./Table.js";
+import TableSelectionBehavior from "./types/TableSelectionBehavior.js";
 
 /**
  * Fired when selection is changed by user interaction.
@@ -44,6 +45,16 @@ abstract class TableSelectionBase extends UI5Element implements ITableFeature {
 	@property()
 	selected?: string;
 
+	/**
+	 * Defines the selection behavior.
+	 *
+	 * @default "RowSelector"
+	 * @public
+	 * @since 2.11
+	 */
+	@property()
+	behavior: `${TableSelectionBehavior}` = "RowSelector";
+
 	readonly identifier = "TableSelection";
 	protected _table?: Table;
 
@@ -80,7 +91,7 @@ abstract class TableSelectionBase extends UI5Element implements ITableFeature {
 	 * Determines whether a row selector (for example, `radiobutton` or `checkbox`) is rendered.
 	 */
 	isRowSelectorRequired(): boolean {
-		return true;
+		return this.behavior === TableSelectionBehavior.RowSelector;
 	}
 
 	/**
@@ -122,13 +133,12 @@ abstract class TableSelectionBase extends UI5Element implements ITableFeature {
 
 	/**
 	 * Invalidates the table and its rows to re-evaluate the selection.
-	 *
-	 * @protected
 	 */
 	protected _invalidateTableAndRows() {
 		if (this._table) {
 			this._table._invalidate++;
 			this._table.rows.forEach(row => row._invalidate++);
+			this._table.headerRow.forEach(row => row._invalidate++);
 		}
 	}
 }

packages/main/src/TableSelectionMulti.ts

@@ -137,12 +137,6 @@ class TableSelectionMulti extends TableSelectionBase {
 		this.selected = [...selectedSet].join(" ");
 	}
 
-	_invalidateTableAndRows() {
-		super._invalidateTableAndRows();
-		const headerRow = this._table?.headerRow[0];
-		headerRow && headerRow._invalidate++;
-	}
-
 	_onkeydown(e: KeyboardEvent) {
 		if (!this._table || !e.shiftKey) {
 			return;

packages/main/src/types/TableSelectionBehavior.ts

@@ -0,0 +1,24 @@
+/**
+ * Selection behavior of the `ui5-table` selection components.
+ *
+ * @public
+ * @since 2.11
+ */
+enum TableSelectionBehavior {
+	/**
+	 * Rows can only be selected using the row selector column.
+	 * @public
+	 */
+	RowSelector = "RowSelector",
+
+	/**
+	 * Rows can only be selected by clicking directly on the row, as the row selector column is hidden.
+	 *
+	 * **Note:** In this mode, the `row-click` event of the `table` component is not fired.
+	 *
+	 * @public
+	 */
+	RowOnly = "RowOnly",
+}
+
+export default TableSelectionBehavior;

packages/main/test/pages/Table.html

@@ -80,7 +80,7 @@
 			table.style.width = selectedItem.textContent;
 		});
 		table.addEventListener("row-click", (e) => {
-			console.log(`${Date.now()}: Row with the row-key ${e.detail.row.row-key} is clicked`);
+			console.log(`${Date.now()}: Row with the row-key ${e.detail.row.rowKey} is clicked`);
 		});
 
 		const growing = document.getElementById("growing");

packages/website/docs/_samples/main/Table/SelectionMulti/main.js

@@ -28,4 +28,9 @@ selectionFeature.addEventListener("change", (e) => {
 		console.log("Recently deselected row-keys", recentlyDeselectedRowKeys);
 		console.log("Recently deselected rows", recentlyDeselectedRows);
 	}
-})
+});
+
+const selectionBehavior = document.getElementById("selectionBehavior");
+selectionBehavior.addEventListener("change", (e) => {
+	selectionFeature.behavior = e.target.text;
+});

packages/website/docs/_samples/main/Table/SelectionMulti/sample.html

@@ -10,6 +10,13 @@
 
 <body style="background-color: var(--sapBackgroundColor)">
     <div class="section">
+		<div style="display: flex; align-items: center;">
+			<ui5-label>Selection Behavior: </ui5-label>
+			<span id="selectionBehavior" role="radiogroup">
+				<ui5-radio-button name="selectionBehavior" text="RowSelector" checked></ui5-radio-button>
+				<ui5-radio-button name="selectionBehavior" text="RowOnly"></ui5-radio-button>
+			</span>
+		</div>
 <!-- playground-fold-end -->
 		<ui5-table id="table">
 			<ui5-table-selection-multi id="selection" slot="features" selected="Row1 Row3"></ui5-table-selection-multi>

packages/website/docs/_samples/main/Table/SelectionSingle/main.js

@@ -10,4 +10,9 @@ const selectionFeature = document.getElementById("selection");
 selectionFeature.addEventListener("change", (e) => {
 	console.log("Selected key", selectionFeature.selected);
 	console.log("Selected row", selectionFeature.getRowByKey(selectionFeature.selected));
-})
+});
+
+const selectionBehavior = document.getElementById("selectionBehavior");
+selectionBehavior.addEventListener("change", (e) => {
+	selectionFeature.behavior = e.target.text;
+});

packages/website/docs/_samples/main/Table/SelectionSingle/sample.html

@@ -10,6 +10,13 @@
 
 <body style="background-color: var(--sapBackgroundColor)">
     <div class="section">
+		<div style="display: flex; align-items: center;">
+			<ui5-label>Selection Behavior: </ui5-label>
+			<span id="selectionBehavior" role="radiogroup">
+				<ui5-radio-button name="selectionBehavior" text="RowSelector" checked></ui5-radio-button>
+				<ui5-radio-button name="selectionBehavior" text="RowOnly"></ui5-radio-button>
+			</span>
+		</div>
 <!-- playground-fold-end -->
 		<ui5-table id="table">
 			<ui5-table-selection-single id="selection" slot="features" selected="Row2"></ui5-table-selection-single>