feat: ui5-tree (new component) (#1580)

Author: vladitasev

docs/Public Module Imports.md

@@ -69,6 +69,8 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
 | Title                    | `ui5-title`          | `import "@ui5/webcomponents/dist/Title.js";`               |
 | Toast                    | `ui5-toast`          | `import "@ui5/webcomponents/dist/Toast.js";`               |
 | Toggle Button            | `ui5-togglebutton`   | `import "@ui5/webcomponents/dist/ToggleButton.js";`        |
+| Tree                     | `ui5-tree`           | `import "@ui5/webcomponents/dist/Tree.js";`                |
+| Tree Item                | `ui5-tree-item`      | comes with `ui5-tree`                                      |
 
 ### 2. Assets
 

packages/main/bundle.esm.js

@@ -61,8 +61,7 @@ import TimePicker from "./dist/TimePicker.js";
 import Title from "./dist/Title.js";
 import Toast from "./dist/Toast.js";
 import ToggleButton from "./dist/ToggleButton.js";
-
-
+import Tree from "./dist/Tree.js";
 
 import List from "./dist/List.js";
 import StandardListItem from "./dist/StandardListItem.js";

packages/main/src/List.hbs

@@ -16,7 +16,7 @@
 
 	<div id="{{_id}}-before" tabindex="0" class="ui5-list-focusarea"></div>
 
-	<ul id="{{_id}}-listUl" class="ui5-list-ul" aria-multiselectable="{{isMultiSelect}}" aria-labelledby="{{ariaLabelledBy}}" role="listbox">
+	<ul id="{{_id}}-listUl" class="ui5-list-ul" aria-multiselectable="{{isMultiSelect}}" aria-labelledby="{{ariaLabelledBy}}" role="{{_role}}">
 		<slot></slot>
 
 		{{#if showNoDataText}}
@@ -41,4 +41,4 @@
 	{{/if}}
 
 	<div id="{{_id}}-after" tabindex="0" class="ui5-list-focusarea"></div>
-</div>
+</div>

packages/main/src/List.js

@@ -26,7 +26,7 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
-		 * Defines the <code>ui5-li</code> header.
+		 * Defines the <code>ui5-list</code> header.
 		 * <br><br>
 		 * <b>Note:</b> When <code>header</code> is set, the
 		 * <code>headerText</code> property is ignored.
@@ -93,8 +93,8 @@ const metadata = {
 		/**
 		 * Defines the mode of the <code>ui5-list</code>.
 		 * <br><br>
-		 * <b>Note:</b> Avalaible options are <code>None</code>, <code>SingleSelect</code>,
-		 * <code>MultiSelect</code>, and <code>Delete</code>.
+		 * <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>SingleSelectBegin</code>,
+		 * <code>SingleSelectEnd</code>, <code>MultiSelect</code>, and <code>Delete</code>.
 		 *
 		 * @type {ListMode}
 		 * @defaultvalue "None"
@@ -162,6 +162,17 @@ const metadata = {
 		busy: {
 			type: Boolean,
 		},
+
+		/**
+		 * Used to externally manipulate the role of the list
+		 *
+		 * @private
+		 */
+		_role: {
+			type: String,
+			defaultValue: "listbox",
+			noAttribute: true,
+		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
 
@@ -227,7 +238,7 @@ const metadata = {
 
 		/**
 		 * Fired when selection is changed by user interaction
-		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
+		 * in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.
 		 *
 		 * @event
 		 * @param {Array} selectedItems An array of the selected items.
@@ -624,6 +635,10 @@ class List extends UI5Element {
 		}
 	}
 
+	focusItem(item) {
+		item.focus();
+	}
+
 	setForwardingFocus(forwardingFocus) {
 		this._forwardingFocus = forwardingFocus;
 	}

packages/main/src/ListItem.hbs

@@ -12,8 +12,12 @@
 	@touchend="{{_ontouchend}}"
 	@click="{{_onclick}}"
 	aria-selected="{{ariaSelected}}"
-	role="option"
+	role="{{_accInfo.role}}"
+	aria-expanded="{{_accInfo.ariaExpanded}}"
+	aria-level="{{_accInfo.ariaLevel}}"
 >
+		{{> listItemPreContent}}
+
 		{{#if placeSelectionElementBefore}}
 			{{> selectionElement}}
 		{{/if}}
@@ -40,7 +44,7 @@
 		{{/if}}
 </li>
 
-
+{{#*inline "listItemPreContent"}}{{/inline}}
 {{#*inline "listItemContent"}}{{/inline}}
 {{#*inline "imageBegin"}}{{/inline}}
 {{#*inline "iconBegin"}}{{/inline}}

packages/main/src/ListItem.js

@@ -283,6 +283,14 @@ class ListItem extends ListItemBase {
 		return this.i18nBundle.getText(DELETE);
 	}
 
+	get _accInfo() {
+		return {
+			role: "option",
+			ariaExpanded: undefined,
+			ariaLevel: undefined,
+		};
+	}
+
 	static async onDefine() {
 		await Promise.all([
 			fetchI18nBundle("@ui5/webcomponents"),

packages/main/src/Tree.hbs

@@ -0,0 +1,29 @@
+<ui5-list
+    .mode="{{mode}}"
+    .headerText="{{headerText}}"
+    .footerText="{{footerText}}"
+    .noDataText="{{noDataText}}"
+    ._role="{{_role}}"
+    @ui5-itemClick="{{_onListItemClick}}"
+    @ui5-itemDelete="{{_onListItemDelete}}"
+    @ui5-selectionChange="{{_onListSelectionChange}}"
+>
+    <slot name="header" slot="header"></slot>
+    {{#each _listItems}}
+        <ui5-li-tree
+            ._id="{{this.treeItem._id}}"
+            type="Active"
+            level="{{this.level}}"
+            icon="{{this.treeItem.icon}}"
+            .treeItem="{{this.treeItem}}"
+            .expanded="{{this.treeItem.expanded}}"
+            .selected="{{this.treeItem.selected}}"
+            .showToggleButton="{{this.treeItem.requiresToggleButton}}"
+            @ui5-toggle="{{../_onListItemToggle}}"
+            @ui5-stepIn="{{../_onListItemStepIn}}"
+            @ui5-stepOut="{{../_onListItemStepOut}}"
+        >
+            {{this.treeItem.text}}
+        </ui5-li-tree>
+    {{/each}}
+</ui5-list>