@ui5/webcomponents 1.9.1 → 1.9.2

package/src/List.js

@@ -535,7 +535,7 @@ class List extends UI5Element {
 	}
 
 	get hasData() {
-		return this.getSlottedNodes("items").length !== 0;
+		return this.getItems().length !== 0;
 	}
 
 	get showNoDataText() {
@@ -644,7 +644,7 @@ class List extends UI5Element {
 	}
 
 	prepareListItems() {
-		const slottedItems = this.getSlottedNodes("items");
+		const slottedItems = this.getItems();
 
 		slottedItems.forEach((item, key) => {
 			const isLastChild = key === slottedItems.length - 1;
@@ -746,11 +746,15 @@ class List extends UI5Element {
 	}
 
 	getSelectedItems() {
-		return this.getSlottedNodes("items").filter(item => item.selected);
+		return this.getItems().filter(item => item.selected);
 	}
 
 	getEnabledItems() {
-		return this.getSlottedNodes("items").filter(item => !item.disabled);
+		return this.getItems().filter(item => !item.disabled);
+	}
+
+	getItems() {
+		return this.getSlottedNodes("items");
 	}
 
 	_onkeydown(event) {
@@ -1053,7 +1057,7 @@ class List extends UI5Element {
 	}
 
 	getFirstItem(filter) {
-		const slottedItems = this.getSlottedNodes("items");
+		const slottedItems = this.getItems();
 		let firstItem = null;
 
 		if (!filter) {

package/src/ListItem.hbs

@@ -1,5 +1,6 @@
 <li
 	part="native-li"
+	data-sap-focus-ref
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
 	@focusin="{{_onfocusin}}"
@@ -21,6 +22,9 @@
 	aria-describedby="{{_id}}-invisibleText-describedby"
 	aria-labelledby="{{_accessibleNameRef}}"
 	aria-disabled="{{ariaDisabled}}"
+	aria-selected="{{_accInfo.ariaSelected}}"
+	aria-checked="{{_accInfo.ariaChecked}}"
+	aria-owns="{{_accInfo.ariaOwns}}"
 >
 		{{> listItemPreContent}}
 
@@ -53,6 +57,7 @@
 		<span id="{{_id}}-invisibleText-describedby" class="ui5-hidden-text">{{_accInfo.ariaSelectedText}}</span>
 </li>
 
+
 {{#*inline "listItemPreContent"}}{{/inline}}
 {{#*inline "listItemContent"}}{{/inline}}
 {{#*inline "imageBegin"}}{{/inline}}

package/src/ListItemBase.js

@@ -138,7 +138,7 @@ class ListItemBase extends UI5Element {
 	* [TAB] is performed onto the last tabbale content item.
 	*/
 	shouldForwardTabAfter(target) {
-		const aContent = getTabbableElements(this.getDomRef());
+		const aContent = getTabbableElements(this.getFocusDomRef());
 
 		if (target.getFocusDomRef) {
 			target = target.getFocusDomRef();
@@ -151,7 +151,7 @@ class ListItemBase extends UI5Element {
 	* Determines if the current list item is target of [SHIFT+TAB].
 	*/
 	shouldForwardTabBefore(target) {
-		return this.getDomRef() === target;
+		return this.getFocusDomRef() === target;
 	}
 
 	get classes() {

package/src/TabContainer.js

@@ -32,6 +32,7 @@ import List from "./List.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
 import SemanticColor from "./types/SemanticColor.js";
+import TabContainerBackgroundDesign from "./types/TabContainerBackgroundDesign.js";
 
 // Templates
 import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
@@ -191,7 +192,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible.
+		 * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.
 		 * All other tabs that can 't fit on the screen are available in an overflow tab "More".
 		 *
 		 * <br><br>
@@ -226,6 +227,32 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Sets the background color of the Tab Container's header as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+		 *
+		 * @type {sap.ui.webcomponents.main.types.TabContainerBackgroundDesign.prototype}
+		 * @defaultvalue "Solid"
+		 * @since 1.10.0
+		 * @public
+		 */
+		headerBackgroundDesign: {
+			type: TabContainerBackgroundDesign,
+			defaultValue: TabContainerBackgroundDesign.Solid,
+		},
+
+		/**
+		 * Sets the background color of the Tab Container's content as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
+		 *
+		 * @type {sap.ui.webcomponents.main.types.TabContainerBackgroundDesign.prototype}
+		 * @defaultvalue "Solid"
+		 * @since 1.10.0
+		 * @public
+		 */
+		contentBackgroundDesign: {
+			type: TabContainerBackgroundDesign,
+			defaultValue: TabContainerBackgroundDesign.Solid,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},

package/src/Table.hbs

@@ -33,7 +33,7 @@
 				{{#each visibleColumns}}
 					<slot name="{{this._individualSlot}}"></slot>
 				{{/each}}
-				<th class="ui5-table-header-row-navigated"></th>
+				<th class="ui5-table-header-row-navigated" aria-hidden="true"></th>
 			</tr>
 		</thead>
 

package/src/Table.js

@@ -1068,8 +1068,10 @@ class Table extends UI5Element {
 			this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true;
 		}
 
+		const hiddenColumnsChange = (this._hiddenColumns.length !== hiddenColumns.length) || this._hiddenColumns.some((column, index) => column !== hiddenColumns[index]);
+
 		// invalidate only if hidden columns count has changed
-		if (this._hiddenColumns.length !== hiddenColumns.length) {
+		if (hiddenColumnsChange) {
 			this._hiddenColumns = hiddenColumns;
 			if (hiddenColumns.length) {
 				this.fireEvent("popin-change", {

package/src/TableRow.hbs

@@ -44,7 +44,7 @@
 		{{/each}}
 	{{/if}}
 
-	<td class="ui5-table-row-navigated">
+	<td class="ui5-table-row-navigated" aria-hidden="true">
 		<div class="ui5-table-div-navigated"></div>
 	</td>
 </tr>
@@ -64,7 +64,7 @@
 				</div>
 			</td>
 
-			<td class="ui5-table-row-navigated">
+			<td class="ui5-table-row-navigated" aria-hidden="true">
 				<div class="ui5-table-div-navigated"></div>
 			</td>
 		</tr>

package/src/TextArea.hbs

@@ -1,38 +1,39 @@
 <div
 	class="{{classes.root}}"
-	style="{{styles.main}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
-	{{#if growing}}
-		<div id="{{_id}}-mirror" style="{{styles.mirror}}" class="ui5-textarea-mirror" aria-hidden="true">
-			{{#each _mirrorText}}
-				{{this.text}}
 
-				<br />
-			{{/each}}
-		</div>
-	{{/if}}
 
-	<textarea
-		id="{{_id}}-inner"
-		class="ui5-textarea-inner"
-		placeholder="{{placeholder}}"
-		?disabled="{{disabled}}"
-		?readonly="{{readonly}}"
-		aria-label="{{ariaLabelText}}"
-		aria-describedby="{{ariaDescribedBy}}"
-		aria-invalid="{{ariaInvalid}}"
-		aria-required="{{required}}"
-		maxlength="{{_exceededTextProps.calcedMaxLength}}"
-		.value="{{value}}"
-		@input="{{_oninput}}"
-		@change="{{_onchange}}"
-		@keyup="{{_onkeyup}}"
-		@keydown="{{_onkeydown}}"
-		data-sap-focus-ref
-		part="textarea">
-	</textarea>
+	<div class="ui5-textarea-wrapper">
+		{{#if growing}}
+			<div id="{{_id}}-mirror" class="ui5-textarea-mirror" aria-hidden="true" >
+				{{#each _mirrorText}}
+					{{this.text}}
+					<br />
+				{{/each}}
+			</div>
+		{{/if}}
+		<textarea
+			id="{{_id}}-inner"
+			class="ui5-textarea-inner"
+			placeholder="{{placeholder}}"
+			?disabled="{{disabled}}"
+			?readonly="{{readonly}}"
+			aria-label="{{ariaLabelText}}"
+			aria-describedby="{{ariaDescribedBy}}"
+			aria-invalid="{{ariaInvalid}}"
+			aria-required="{{required}}"
+			maxlength="{{_exceededTextProps.calcedMaxLength}}"
+			.value="{{value}}"
+			@input="{{_oninput}}"
+			@change="{{_onchange}}"
+			@keyup="{{_onkeyup}}"
+			@keydown="{{_onkeydown}}"
+			data-sap-focus-ref
+			part="textarea">
+		</textarea>
+	</div>
 
 	{{> afterTextarea}}
 

package/src/TextArea.js

@@ -181,7 +181,6 @@ const metadata = {
 		/**
 		 * Enables the component to automatically grow and shrink dynamically with its content.
 		 * <br><br>
-		 * <b>Note:</b> If set to <code>true</code>, the CSS <code>height</code> property is ignored.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -411,12 +410,7 @@ class TextArea extends UI5Element {
 		this._mirrorText = this._tokenizeText(this.value);
 
 		this.exceeding = this._exceededTextProps.leftCharactersCount < 0;
-
-		if (this.growingMaxLines) {
-			// this should be complex calc between line height and paddings - TODO: make it stable
-			this._maxHeight = `${this.growingMaxLines * 1.4 * 14 + 9}px`;
-		}
-
+		this._setCSSParams();
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this);
@@ -426,6 +420,14 @@ class TextArea extends UI5Element {
 	}
 
 	onAfterRendering() {
+		const nativeTextArea = this.getInputDomRef();
+
+		if (this.rows === 1) {
+			nativeTextArea.setAttribute("rows", 1);
+		} else {
+			nativeTextArea.removeAttribute("rows");
+		}
+
 		this.toggleValueStateMessage(this.openValueStateMsgPopover);
 		this._firstRendering = false;
 	}
@@ -490,6 +492,11 @@ class TextArea extends UI5Element {
 		}
 	}
 
+	_setCSSParams() {
+		this.style.setProperty("--_textarea_rows", this.rows || "2");
+		this.style.setProperty("--_textarea_growing_max_lines", this.growingMaxLines);
+	}
+
 	toggleValueStateMessage(toggle) {
 		if (toggle) {
 			this.openPopover();
@@ -500,7 +507,7 @@ class TextArea extends UI5Element {
 
 	async openPopover() {
 		this.popover = await this._getPopover();
-		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-inner"));
+		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-root .ui5-textarea-wrapper"));
 	}
 
 	async closePopover() {
@@ -575,21 +582,7 @@ class TextArea extends UI5Element {
 	}
 
 	get styles() {
-		const lineHeight = 1.4 * 16;
-		const mainHeight = (this.rows * lineHeight) + (this.showExceededText ? 32 : 0);
-
 		return {
-			mirror: {
-				"max-height": this._maxHeight,
-			},
-			main: {
-				width: "100%",
-				height: (this.rows && !this.growing) ? `${mainHeight}px` : "100%",
-			},
-			focusDiv: {
-				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
-				"max-height": (this._maxHeight),
-			},
 			valueStateMsgPopover: {
 				"max-width": `${this._width}px`,
 			},

package/src/Tree.hbs

@@ -1,4 +1,4 @@
-<ui5-list
+<ui5-tree-list
     .mode="{{mode}}"
     .headerText="{{headerText}}"
     .footerText="{{footerText}}"
@@ -8,39 +8,14 @@
     @ui5-item-click="{{_onListItemClick}}"
     @ui5-item-delete="{{_onListItemDelete}}"
     @ui5-selection-change="{{_onListSelectionChange}}"
+    @ui5-toggle="{{_onListItemToggle}}"
+    @ui5-step-in="{{_onListItemStepIn}}"
+    @ui5-step-out="{{_onListItemStepOut}}"
+    @mouseover="{{_onListItemMouseOver}}"
+    @mouseout="{{_onListItemMouseOut}}"
     class="ui5-tree-root"
 >
     <slot name="header" slot="header"></slot>
-    {{#each _listItems}}
-        <ui5-li-tree
-            type="Active"
-            level="{{this.level}}"
-            icon="{{this.treeItem.icon}}"
-            ?indeterminate="{{this.treeItem.indeterminate}}"
-            additional-text="{{this.treeItem.additionalText}}"
-            additional-text-state="{{this.treeItem.additionalTextState}}"
-            title="{{this.treeItem.title}}"
-            accessible-name="{{this.treeItem.accessibleName}}"
-            ?_toggle-button-end="{{ ../_toggleButtonEnd}}"
-            ?_minimal="{{../_minimal}}"
-            .treeItem="{{this.treeItem}}"
-            .expanded="{{this.treeItem.expanded}}"
-            .selected="{{this.treeItem.selected}}"
-            .showToggleButton="{{this.treeItem.requiresToggleButton}}"
-            ._posinset="{{this.posinset}}"
-            ._setsize="{{this.size}}"
-            @ui5-toggle="{{../_onListItemToggle}}"
-            @ui5-step-in="{{../_onListItemStepIn}}"
-            @ui5-step-out="{{../_onListItemStepOut}}"
-            @mouseover="{{../_onListItemMouseOver}}"
-            @mouseout="{{../_onListItemMouseOut}}"
-            exportparts="icon, toggle-icon"
-        >
-            {{> treeListItemContent}}
-        </ui5-li-tree>
-    {{/each}}
-</ui5-list>
 
-{{#*inline "treeListItemContent"}}
-	{{this.treeItem.text}}
-{{/inline}}
+    <slot></slot>
+</ui5-tree-list>

package/src/Tree.js

@@ -2,8 +2,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import TreeItem from "./TreeItem.js";
-import List from "./List.js";
-import TreeListItem from "./TreeListItem.js";
+import TreeItemCustom from "./TreeItemCustom.js";
+import TreeList from "./TreeList.js";
 import ListMode from "./types/ListMode.js";
 
 // Template
@@ -332,15 +332,14 @@ class Tree extends UI5Element {
 
 	static get dependencies() {
 		return [
-			List,
-			TreeListItem,
+			TreeList,
 			TreeItem,
+			TreeItemCustom,
 		];
 	}
 
 	onBeforeRendering() {
-		this._listItems = [];
-		buildTree(this, 1, this._listItems);
+		this._prepareTreeItems();
 	}
 
 	get list() {
@@ -356,28 +355,25 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemStepIn(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		if (treeItem.items.length > 0) {
 			const firstChild = treeItem.items[0];
-			const firstChildListItem = this.list.getSlottedNodes("items").find(li => li.treeItem === firstChild);
+			const firstChildListItem = this._getListItemForTreeItem(firstChild);
 			firstChildListItem && this.list.focusItem(firstChildListItem);
 		}
 	}
 
 	_onListItemStepOut(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		if (treeItem.parentElement !== this) {
 			const parent = treeItem.parentElement;
-			const parentListItem = this.list.getSlottedNodes("items").find(li => li.treeItem === parent);
+			const parentListItem = this._getListItemForTreeItem(parent);
 			parentListItem && this.list.focusItem(parentListItem);
 		}
 	}
 
 	_onListItemToggle(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		const defaultPrevented = !this.fireEvent("item-toggle", { item: treeItem }, true);
 		if (!defaultPrevented) {
 			treeItem.toggle();
@@ -385,8 +381,7 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemClick(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 
 		if (!this.fireEvent("item-click", { item: treeItem }, true)) {
 			event.preventDefault();
@@ -394,27 +389,30 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemDelete(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		this.fireEvent("item-delete", { item: treeItem });
 	}
 
 	_onListItemMouseOver(event) {
-		const treeItem = event.target.treeItem;
+		const target = event.target;
 
-		this.fireEvent("item-mouseover", { item: treeItem });
+		if (target.isTreeItem) {
+			this.fireEvent("item-mouseover", { item: target });
+		}
 	}
 
 	_onListItemMouseOut(event) {
-		const treeItem = event.target.treeItem;
+		const target = event.target;
 
-		this.fireEvent("item-mouseout", { item: treeItem });
+		if (target.isTreeItem) {
+			this.fireEvent("item-mouseout", { item: target });
+		}
 	}
 
 	_onListSelectionChange(event) {
-		const previouslySelectedItems = event.detail.previouslySelectedItems.map(item => item.treeItem);
-		const selectedItems = event.detail.selectedItems.map(item => item.treeItem);
-		const targetItem = event.detail.targetItem.treeItem;
+		const previouslySelectedItems = event.detail.previouslySelectedItems;
+		const selectedItems = event.detail.selectedItems;
+		const targetItem = event.detail.targetItem;
 
 		previouslySelectedItems.forEach(item => {
 			item.selected = false;
@@ -430,6 +428,21 @@ class Tree extends UI5Element {
 		});
 	}
 
+	_prepareTreeItems() {
+		// set level to tree items
+		this.walk((item, level, index) => {
+			const parent = item.parentNode;
+			const ariaSetSize = (parent && parent.children.length) || this.items.length;
+
+			item.setAttribute("level", level);
+
+			item._toggleButtonEnd = this._toggleButtonEnd;
+			item._minimal = this._minimal;
+			item._setsize = ariaSetSize;
+			item._posinset = index + 1;
+		});
+	}
+
 	/**
 	 * Returns the corresponding list item for a given tree item
 	 *
@@ -437,14 +450,33 @@ class Tree extends UI5Element {
 	 * @protected
 	 */
 	_getListItemForTreeItem(item) {
-		return this.list.items.find(listItem => listItem.treeItem === item);
+		return this.getItems().find(listItem => listItem === item);
+	}
+
+	/**
+	 * Returns the a flat array of all tree items
+	 * @protected
+	 * @returns {Array}
+	 */
+	getItems() {
+		return this.list.getItems();
+	}
+
+	/**
+	 * Focus a tree item by its index in the flat array of all tree items
+	 * @protected
+	 * @param index
+	 */
+	focusItemByIndex(index) {
+		const item = this.getItems()[index];
+		item && this.list.focusItem(item);
 	}
 
 	/**
 	 * Perform Depth-First-Search walk on the tree and run a callback on each node
 	 *
 	 * @public
-	 * @param {function} callback function to execute on each node of the tree with 2 arguments: the node and the level
+	 * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
 	 */
 	walk(callback) {
 		walkTree(this, 1, callback);
@@ -452,30 +484,14 @@ class Tree extends UI5Element {
 }
 
 const walkTree = (el, level, callback) => {
-	el.items.forEach(item => {
-		callback(item, level);
+	el.items.forEach((item, index) => {
+		callback(item, level, index);
 		if (item.items.length > 0) {
 			walkTree(item, level + 1, callback);
 		}
 	});
 };
 
-const buildTree = (el, level, result) => {
-	el.items.forEach((item, index) => {
-		const listItem = {
-			treeItem: item,
-			size: el.items.length,
-			posinset: index + 1,
-			level,
-		};
-
-		result.push(listItem);
-		if (item.expanded && item.items.length > 0) {
-			buildTree(item, level + 1, result);
-		}
-	});
-};
-
 Tree.define();
 
 export default Tree;

package/src/TreeItem.hbs

@@ -0,0 +1,13 @@
+{{>include "./TreeItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div class="ui5-li-tree-text-wrapper">
+		{{#if _showTitle}}
+			<div part="title" class="ui5-li-title">{{text}}</div>
+		{{/if}}
+
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	</div>
+{{/inline}}