refactor(ui5-list, ui5-tree, ui5-upload-collection): rename mode to selectionMode

packages/fiori/src/ShellBarPopover.hbs

@@ -4,7 +4,7 @@
 	@ui5-before-open={{_menuPopoverBeforeOpen}}
 	@ui5-after-close={{_menuPopoverAfterClose}}
 >
-	<ui5-list separators="None" mode="SingleSelect" @ui5-selection-change={{_menuItemPress}}>
+	<ui5-list separators="None" selection-mode="Single" @ui5-selection-change={{_menuItemPress}}>
 		{{#each _menuPopoverItems}}
 			{{ this }}
 		{{/each}}

packages/fiori/src/UploadCollection.hbs

@@ -7,7 +7,7 @@
 	<div class="{{classes.content}}">
 		<ui5-list
 			accessible-name="{{accessibleName}}"
-			mode="{{mode}}"
+			selection-mode="{{selectionMode}}"
 			@ui5-selection-change="{{_onSelectionChange}}"
 		>
 			{{!-- forward slot header to inner list slot header --}}

packages/fiori/src/UploadCollection.ts

@@ -10,7 +10,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
-import ListMode from "@ui5/webcomponents/dist/types/ListMode.js";
+import ListSelectionMode from "@ui5/webcomponents/dist/types/ListSelectionMode.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
 import IllustratedMessage from "./IllustratedMessage.js";
 import "./illustrations/Tent.js";
@@ -102,7 +102,7 @@ type UploadCollectionItemDeleteEventDetail = {
 
 /**
  * Fired when selection is changed by user interaction
- * in `SingleSelect` and `MultiSelect` modes.
+ * in `Single` and `Multiple` modes.
  * @param {Array} selectedItems An array of the selected items.
  * @public
  */
@@ -116,15 +116,15 @@ type UploadCollectionItemDeleteEventDetail = {
 })
 class UploadCollection extends UI5Element {
 	/**
-	 * Defines the mode of the `ui5-upload-collection`.
+	 * Defines the selection mode of the `ui5-upload-collection`.
 	 *
 	 * **Note:**
-	 * Mode "Delete" has no effect. The delete button is controlled by the `hideDeleteButton` property of UploadCollectionItem
+	 * Selection mode "Delete" has no effect. The delete button is controlled by the `hideDeleteButton` property of UploadCollectionItem
 	 * @default "None"
 	 * @public
 	 */
-	@property({ type: ListMode, defaultValue: ListMode.None })
-	mode!: `${ListMode}`;
+	@property({ type: ListSelectionMode, defaultValue: ListSelectionMode.None })
+	selectionMode!: `${ListSelectionMode}`;
 
 	/**
 	 * Allows you to set your own text for the 'No data' description.

packages/fiori/src/ViewSettingsDialog.hbs

@@ -54,7 +54,7 @@
 			{{#if isModeSort}}
 				<div class="ui5-vsd-sort">
 					<ui5-list
-						mode="SingleSelectBegin"
+						selection-mode="SingleStart"
 						@ui5-item-click="{{_onSortOrderChange}}"
 						sort-order
 						accessible-name-ref="{{_id}}-label">
@@ -66,7 +66,7 @@
 						{{/each}}
 					</ui5-list>
 					<ui5-list
-						mode="SingleSelectBegin"
+						selection-mode="SingleStart"
 						@ui5-item-click={{_onSortByChange}}
 						sort-by>
 						<ui5-li-groupheader>{{_sortByLabel}}</ui5-li-groupheader>
@@ -83,7 +83,7 @@
 				{{#if _filterStepTwo}}
 					<ui5-list
 						accessible-name-ref="{{_id}}-label"
-						mode="MultiSelect"
+						selection-mode="Multiple"
 						@ui5-item-click="{{_handleFilterValueItemClick}}"
 					>
 						{{#each _currentSettings.filters}}

packages/fiori/test/pages/F6TestPage.html

@@ -124,7 +124,7 @@
 
 	<br><br>
 
-	<ui5-list header-text="API: ListItem type='Active/Inactive/Detail'" mode="SingleSelect">
+	<ui5-list header-text="API: ListItem type='Active/Inactive/Detail'" selection-mode="Single">
 		<ui5-li id="list-item">Active item - press</ui5-li>
 		<ui5-li>Active item - press</ui5-li>
 		<ui5-li selected type="Inactive">Inactive item</ui5-li>
@@ -156,7 +156,7 @@
 
 			<!-- start column -->
 			<div class="col" slot="startColumn">
-				<ui5-list id="col1list" header-text="Products (13)" mode="SingleSelect">
+				<ui5-list id="col1list" header-text="Products (13)" selection-mode="Single">
 					<ui5-li id="fcl-li" description=HT-2001 icon='slim-arrow-right' icon-end additional-text="47.00 EUR">10 inch Portable DVD</ui5-li>
 					<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="249.00 EUR">7 inch WidescreenPortable DVD Player w MP3</ui5-li>
 					<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end additional-text="947.00 EUR">Astro Laptop 1516</ui5-li>

packages/fiori/test/pages/FCL.html

@@ -510,7 +510,7 @@
 			</ui5-shellbar>
 
 			<br><br>
-			<ui5-list id="col1list" header-text="Products (13)" mode="SingleSelect">
+			<ui5-list id="col1list" header-text="Products (13)" selection-mode="Single">
 				<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="47.00 EUR">10 inch Portable DVD
 				</ui5-li>
 				<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="249.00 EUR">7 inch Widescreen

packages/fiori/test/pages/UploadCollection.html

@@ -17,13 +17,13 @@
 </head>
 <body class="uploadcollection1auto">
 	<div class="header">
-		<ui5-label>UC Mode:</ui5-label>
+		<ui5-label>UC Selection Mode:</ui5-label>
 		<ui5-select id="changeMode">
 			<ui5-option>None</ui5-option>
-			<ui5-option>SingleSelect</ui5-option>
-			<ui5-option>SingleSelectBegin</ui5-option>
-			<ui5-option>SingleSelectEnd</ui5-option>
-			<ui5-option>MultiSelect</ui5-option>
+			<ui5-option>Single</ui5-option>
+			<ui5-option>SingleStart</ui5-option>
+			<ui5-option>SingleEnd</ui5-option>
+			<ui5-option>Multiple</ui5-option>
 			<ui5-option>Delete</ui5-option>
 		</ui5-select>
 		<ui5-label>UCI Type:</ui5-label>

packages/fiori/test/pages/uploadCollectionScript.js

@@ -47,7 +47,7 @@
 	}
 
 	document.getElementById("changeMode").addEventListener("ui5-change", function(event) {
-		uploadCollection.mode = event.detail.selectedOption.textContent;
+		uploadCollection.selectionMode = event.detail.selectedOption.textContent;
 	});
 
 	document.getElementById("changeType").addEventListener("ui5-change", function(event) {

packages/fiori/test/specs/UploadCollection.spec.js

@@ -90,11 +90,11 @@ describe("UploadCollection", () => {
 		});
 
 
-		it("in 'MultiSelect' mode there should be a checkbox", async () => {
+		it("in 'Multiple' selectionMode there should be a checkbox", async () => {
 			// change the UCI type to "Detail"
 			const select = await browser.$("#changeMode");
 			await select.click(); // open select
-			await select.keys("m"); // for "MultiSelect"
+			await select.keys("m"); // for "Multiple"
 			await browser.keys("Enter");
 
 			const firstItem = await browser.$("#firstItem");
@@ -108,20 +108,20 @@ describe("UploadCollection", () => {
 			await browser.keys("Enter")
 		});
 
-		it("in 'SingleSelectBegin' mode there should be a radio button", async () => {
+		it("in 'SingleStart' mode there should be a radio button", async () => {
 			// change the UCI type to "Detail"
 			const select = await browser.$("#changeMode");
 			await select.click(); // open select
-			await select.keys("ArrowDown"); // for "SingleSelect"
-			await select.keys("ArrowDown"); // for "SingleSelectBegin"
+			await select.keys("ArrowDown"); // for "Single"
+			await select.keys("ArrowDown"); // for "SingleStart"
 			await browser.keys("Enter");
 
 			const firstItem = await browser.$("#firstItem");
 
 			assert.ok(await firstItem.shadow$(".ui5-li-singlesel-radiobtn").isDisplayed(), "radio button is visible");
 			assert.notOk(await firstItem.shadow$(".ui5-li-multisel-cb").isDisplayed(), "checkbox is not visible");
 
-			// revert the UCI  mode "None"
+			// revert the UCI  selectionMode "None"
 			await select.click(); // open select
 			await select.keys("n");
 			await browser.keys("Enter")
@@ -160,23 +160,23 @@ describe("UploadCollection", () => {
 			await browser.keys("Enter")
 		});
 
-		it("upload collection should fire 'item-delete' in Delete mode", async () => {
+		it("upload collection should fire 'item-delete' in Delete selectionMode", async () => {
 			const uploadCollection = await browser.$("#uploadCollection");
 			const firstItem = await browser.$("#firstItem");
 
-			await uploadCollection.setAttribute("mode", "Delete");
+			await uploadCollection.setAttribute("selectionMode", "Delete");
 
 			const deleteBtn = await firstItem.shadow$(".ui5-upload-collection-deletebtn");
 			await deleteBtn.click();
 
 			assert.strictEqual((await uploadCollection.getProperty("items")).length, 4, "item should be deleted when 'item-delete' event is fired");
 		});
 
-		it("upload collection should fire 'item-delete' regardless of the mode", async () => {
+		it("upload collection should fire 'item-delete' regardless of the selectionMode", async () => {
 			const uploadCollection = await browser.$("#uploadCollection");
 			const item = await browser.$("#latestReportsPdf");
 
-			await uploadCollection.setAttribute("mode", "None");
+			await uploadCollection.setAttribute("selectionMode", "None");
 
 			const deleteBtn = await item.shadow$(".ui5-upload-collection-deletebtn");
 			await deleteBtn.click();

packages/main/src/BreadcrumbsPopover.hbs

@@ -6,7 +6,7 @@
 	horizontal-align="Start"
 	_hide-header
 	@keydown="{{_onkeydown}}">
-	<ui5-list mode="SingleSelect"
+	<ui5-list selection-mode="Single"
 		separators="None"
 		@ui5-selection-change="{{_onOverflowListItemSelect}}">
 

packages/main/src/ComboBoxPopover.hbs

@@ -42,7 +42,7 @@
 				</ui5-input>
 			</div>
 		</div>
-		
+
 		{{#if hasValueStateText}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -66,7 +66,7 @@
 		@ui5-item-click={{_selectItem}}
 		@ui5-item-focused={{_onItemFocus}}
 		@mousedown={{_itemMousedown}}
-		mode="SingleSelect"
+		selection-mode="Single"
 	>
 		{{#each _filteredItems}}
 			{{#if isGroupItem}}

packages/main/src/InputPopover.hbs

@@ -93,7 +93,7 @@
 {{/inline}}
 
 {{#*inline "suggestionsList"}}
-	<ui5-list separators="{{suggestionSeparators}}" @mousedown="{{onItemMouseDown}}" mode="SingleSelect">
+	<ui5-list separators="{{suggestionSeparators}}" @mousedown="{{onItemMouseDown}}" selection-mode="Single">
 		{{#each suggestionObjects}}
 			{{#if groupItem}}
 				<ui5-li-groupheader data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-groupheader>