@ui5/webcomponents 0.0.0-ec448881d → 0.0.0-ee3bbe46b

package/dist/Tokenizer.js

@@ -25,6 +25,10 @@ import {
 	isEndShift,
 	isHomeCtrl,
 	isEndCtrl,
+	isRight,
+	isLeft,
+	isUp,
+	isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -60,7 +64,7 @@ const metadata = {
 	tag: "ui5-tokenizer",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		"default": {
 			propertyName: "tokens",
 			type: HTMLElement,
@@ -71,7 +75,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		showMore: { type: Boolean },
 
 		disabled: { type: Boolean },
@@ -92,7 +96,7 @@ const metadata = {
 		/**
 		 * Indicates the value state of the related input component.
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @private
 		 */
@@ -103,7 +107,7 @@ const metadata = {
 
 		_nMoreCount: { type: Integer },
 	},
-	events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	events: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		"token-delete": {
 			detail: {
 				ref: { type: HTMLElement },
@@ -127,8 +131,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Tokenizer
- * @extends UI5Element
+ * @alias sap.ui.webc.main.Tokenizer
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-tokenizer
  * @usestextcontent
  * @private
@@ -225,18 +229,53 @@ class Tokenizer extends UI5Element {
 	}
 
 	onAfterRendering() {
-		this._scrollEnablement.scrollContainer = this.expanded ? this.contentDom : this;
+		this._scrollEnablement.scrollContainer = (this.expanded || !this.narrowContentDom) ? this.expandedContentDom : this.narrowContentDom;
+
+		if (this.expanded) {
+			this._expandedScrollWidth = this.expandedContentDom.scrollWidth;
+			this.scrollToEnd();
+		}
+
+		if (!this.expanded) {
+			this.scrollToStart();
+		}
 	}
 
 	_delete(event) {
+		if (!event.detail) { // if there are no details, the event is triggered by a click
+			this._tokenClickDelete(event, event.target);
+			return;
+		}
+
 		if (this._selectedTokens.length) {
-			this._selectedTokens.forEach(token => this._tokenDelete(event, token));
+			this._selectedTokens.forEach(token => this._tokenKeyboardDelete(event, token));
 		} else {
-			this._tokenDelete(event);
+			this._tokenKeyboardDelete(event);
+		}
+	}
+
+	_tokenClickDelete(event, token) {
+		const tokens = this._getVisibleTokens();
+		const deletedTokenIndex = token ? tokens.indexOf(token) : tokens.indexOf(event.target); // The index of the token that just got deleted
+		const nextTokenIndex = deletedTokenIndex === tokens.length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1; // The index of the next token that needs to be focused next due to the deletion
+		const nextToken = tokens[nextTokenIndex]; // if the last item was deleted this will be undefined
+
+		this._handleCurrentItemAfterDeletion(nextToken);
+
+		this.fireEvent("token-delete", { ref: token || event.target });
+	}
+
+	_handleCurrentItemAfterDeletion(nextToken) {
+		if (nextToken && !isPhone()) {
+			this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
+
+			setTimeout(() => {
+				nextToken.focus();
+			}, 0);
 		}
 	}
 
-	_tokenDelete(event, token) {
+	_tokenKeyboardDelete(event, token) {
 		let nextTokenIndex; // The index of the next token that needs to be focused next due to the deletion
 
 		const tokens = this._getVisibleTokens();
@@ -259,13 +298,7 @@ class Tokenizer extends UI5Element {
 			nextToken = notSelectedTokens[0];
 		}
 
-		if (nextToken && !isPhone()) {
-			this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
-
-			setTimeout(() => {
-				nextToken.focus();
-			}, 0);
-		}
+		this._handleCurrentItemAfterDeletion(nextToken);
 
 		this.fireEvent("token-delete", { ref: token || event.target });
 	}
@@ -320,6 +353,11 @@ class Tokenizer extends UI5Element {
 
 			return this._toggleTokenSelection(tokens);
 		}
+
+		if (isLeft(event) || isRight(event) || isUp(event) || isDown(event)) {
+			const nextTokenIdx = this._calcNextTokenIndex(this._tokens.find(token => token.focused), tokens, (isRight(event) || isDown(event)));
+			this._scrollToToken(tokens[nextTokenIdx]);
+		}
 	}
 
 	_handleHome(tokens, endKeyPressed) {
@@ -384,6 +422,8 @@ class Tokenizer extends UI5Element {
 		}
 
 		setTimeout(() => tokens[nextIndex].focus(), 0);
+
+		this._scrollToToken(tokens[nextIndex]);
 		this._itemNav.setCurrentItem(tokens[nextIndex]);
 	}
 
@@ -398,6 +438,8 @@ class Tokenizer extends UI5Element {
 		focusedToken.selected = true;
 		tokens[nextIndex].selected = true;
 		setTimeout(() => tokens[nextIndex].focus(), 0);
+
+		this._scrollToToken(tokens[nextIndex]);
 		this._itemNav.setCurrentItem(tokens[nextIndex]);
 	}
 
@@ -406,7 +448,12 @@ class Tokenizer extends UI5Element {
 	}
 
 	_onmousedown(event) {
-		this._itemNav.setCurrentItem(event.target);
+		if (event.target.hasAttribute("ui5-token")) {
+			if (!event.target.toBeDeleted) {
+				this._itemNav.setCurrentItem(event.target);
+				this._scrollToToken(event.target);
+			}
+		}
 	}
 
 	_toggleTokenSelection(tokens) {
@@ -455,7 +502,41 @@ class Tokenizer extends UI5Element {
 	 * @private
 	 */
 	scrollToStart() {
-		this.contentDom.scrollLeft = 0;
+		if (this._scrollEnablement.scrollContainer) {
+			this._scrollEnablement.scrollTo(0, 0);
+		}
+	}
+
+	/**
+	 * Scrolls the container of the tokens to its end when expanded.
+	 * This method is used by MultiInput and MultiComboBox.
+	 * @private
+	 */
+	scrollToEnd() {
+		const expandedTokenizerScrollWidth = this.expandedContentDom && (this.effectiveDir !== "rtl" ? this.expandedContentDom.scrollWidth : -this.expandedContentDom.scrollWidth);
+		if (this._scrollEnablement.scrollContainer) {
+			this._scrollEnablement.scrollTo(expandedTokenizerScrollWidth, 0, 5, 10);
+		}
+	}
+
+	/**
+	 * Scrolls token to the visible area of the container.
+	 * Adds 4 pixels to the scroll position to ensure padding and border visibility on both ends
+	 * @private
+	 */
+	_scrollToToken(token) {
+		if (!this.expandedContentDom) {
+			return;
+		}
+
+		const tokenRect = token.getBoundingClientRect();
+		const tokenContainerRect = this.expandedContentDom.getBoundingClientRect();
+
+		if (tokenRect.left < tokenContainerRect.left) {
+			this._scrollEnablement.scrollTo(this.expandedContentDom.scrollLeft - (tokenContainerRect.left - tokenRect.left + 5), 0);
+		} else if (tokenRect.right > tokenContainerRect.right) {
+			this._scrollEnablement.scrollTo(this.expandedContentDom.scrollLeft + (tokenRect.right - tokenContainerRect.right + 5), 0);
+		}
 	}
 
 	async closeMorePopover() {
@@ -476,6 +557,14 @@ class Tokenizer extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-tokenizer--content");
 	}
 
+	get expandedContentDom() {
+		return this.shadowRoot.querySelector(".ui5-tokenizer-expanded--content");
+	}
+
+	get narrowContentDom() {
+		return this.shadowRoot.querySelector(".ui5-tokenizer-nmore--content");
+	}
+
 	get tokenizerLabel() {
 		return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
 	}
@@ -497,14 +586,14 @@ class Tokenizer extends UI5Element {
 		});
 
 		return this._getTokens().filter(token => {
-			const isRTL = this.effectiveDir === "rtl";
-			const elementEnd = isRTL ? "left" : "right";
 			const parentRect = this.contentDom.getBoundingClientRect();
 			const tokenRect = token.getBoundingClientRect();
-			const tokenEnd = parseInt(tokenRect[elementEnd]);
-			const parentEnd = parseInt(parentRect[elementEnd]);
+			const tokenEnd = parseInt(tokenRect.right);
+			const parentEnd = parseInt(parentRect.right);
+			const tokenStart = parseInt(tokenRect.left);
+			const parentStart = parseInt(parentRect.left);
 
-			token.overflows = isRTL ? ((tokenEnd < parentEnd) && !this.expanded) : ((tokenEnd > parentEnd) && !this.expanded);
+			token.overflows = !this.expanded && ((tokenStart < parentStart) || (tokenEnd > parentEnd));
 
 			return token.overflows;
 		});
@@ -549,7 +638,8 @@ class Tokenizer extends UI5Element {
 			},
 			content: {
 				"ui5-tokenizer--content": true,
-				"ui5-tokenizer-nmore--content": this.showMore,
+				"ui5-tokenizer-expanded--content": !this.showNMore,
+				"ui5-tokenizer-nmore--content": this.showNMore,
 			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,

package/dist/Tree.js

@@ -1,8 +1,9 @@
 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
@@ -16,7 +17,7 @@ import TreeCss from "./generated/themes/Tree.css.js";
  */
 const metadata = {
 	tag: "ui5-tree",
-	properties: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Tree.prototype */ {
 		/**
 		 * Defines the mode of the component. Since the tree uses a <code>ui5-list</code> to display its structure,
 		 * the tree modes are exactly the same as the list modes, and are all applicable.
@@ -34,7 +35,7 @@ const metadata = {
 		 * </ul>
 		 *
 		 * @public
-		 * @type {ListMode}
+		 * @type {sap.ui.webc.main.types.ListMode}
 		 * @defaultValue "None"
 		 */
 		mode: {
@@ -77,6 +78,45 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
+		/**
+		 * Defines the description for the accessible role of the component.
+		 * @protected
+		 * @type {string}
+		 * @defaultvalue undefined
+		 * @since 1.10.0
+		 */
+
+		 accessibleRoleDescription: {
+			type: String,
+			defaultValue: undefined,
+			noAttribute: true,
+		},
+
 		/**
 		 * An array, containing a flat structure of list items to render
 		 *
@@ -108,14 +148,14 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Tree.prototype */ {
 
 		/**
 		 * Defines the items of the component. Tree items may have other tree items as children.
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-tree-item</code> for the intended design.
 		 *
-		 * @type {sap.ui.webcomponents.main.ITreeItem[]}
+		 * @type {sap.ui.webc.main.ITreeItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -139,7 +179,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
+	events: /** @lends sap.ui.webc.main.Tree.prototype */ {
 
 		/**
 		 * Fired when a tree item is expanded or collapsed.
@@ -147,7 +187,7 @@ const metadata = {
 		 * This may be handy for example if you want to dynamically load tree items upon the user expanding a node.
 		 * Even if you prevented the event's default behavior, you can always manually call <code>toggle()</code> on a tree item.
 		 *
-		 * @event sap.ui.webcomponents.main.Tree#item-toggle
+		 * @event sap.ui.webc.main.Tree#item-toggle
 		 * @param {HTMLElement} item the toggled item.
 		 * @allowPreventDefault
 		 * @public
@@ -160,7 +200,7 @@ const metadata = {
 
 		/**
 		 * Fired when the mouse cursor enters the tree item borders.
-		 * @event sap.ui.webcomponents.main.Tree#item-mouseover
+		 * @event sap.ui.webc.main.Tree#item-mouseover
 		 * @param {HTMLElement} item the hovered item.
 		 * @since 1.0.0-rc.16
 		 * @public
@@ -173,7 +213,7 @@ const metadata = {
 
 		/**
 		 * Fired when the mouse cursor leaves the tree item borders.
-		 * @event sap.ui.webcomponents.main.Tree#item-mouseout
+		 * @event sap.ui.webc.main.Tree#item-mouseout
 		 * @param {HTMLElement} item the hovered item.
 		 * @since 1.0.0-rc.16
 		 * @public
@@ -187,7 +227,7 @@ const metadata = {
 		/**
 		 * Fired when a tree item is activated.
 		 *
-		 * @event sap.ui.webcomponents.main.Tree#item-click
+		 * @event sap.ui.webc.main.Tree#item-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} item The clicked item.
 		 * @public
@@ -204,7 +244,7 @@ const metadata = {
 		 * <b>Note:</b> A Delete button is displayed on each item,
 		 * when the component <code>mode</code> property is set to <code>Delete</code>.
 		 *
-		 * @event sap.ui.webcomponents.main.Tree#item-delete
+		 * @event sap.ui.webc.main.Tree#item-delete
 		 * @param {HTMLElement} item the deleted item.
 		 * @public
 		 */
@@ -218,15 +258,17 @@ const metadata = {
 		 * Fired when selection is changed by user interaction
 		 * in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.
 		 *
-		 * @event sap.ui.webcomponents.main.Tree#selection-change
+		 * @event sap.ui.webc.main.Tree#selection-change
 		 * @param {Array} selectedItems An array of the selected items.
 		 * @param {Array} previouslySelectedItems An array of the previously selected items.
+		 * @param {HTMLElement} targetItem The item triggering the event.
 		 * @public
 		 */
 		"selection-change": {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				targetItem: { type: HTMLElement },
 			},
 		},
 	},
@@ -278,8 +320,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Tree
- * @extends UI5Element
+ * @alias sap.ui.webc.main.Tree
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-tree
  * @appenddocs TreeItem
  * @public
@@ -304,15 +346,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() {
@@ -320,32 +361,33 @@ class Tree extends UI5Element {
 	}
 
 	get _role() {
-		return "tree";
+		return this._minimal ? "menubar" : "tree";
+	}
+
+	get _label() {
+		return getEffectiveAriaLabelText(this);
 	}
 
 	_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();
@@ -353,8 +395,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();
@@ -362,26 +403,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 previouslySelectedItems = event.detail.previouslySelectedItems;
+		const selectedItems = event.detail.selectedItems;
+		const targetItem = event.detail.targetItem;
 
 		previouslySelectedItems.forEach(item => {
 			item.selected = false;
@@ -393,6 +438,22 @@ class Tree extends UI5Element {
 		this.fireEvent("selection-change", {
 			previouslySelectedItems,
 			selectedItems,
+			targetItem,
+		});
+	}
+
+	_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;
 		});
 	}
 
@@ -403,14 +464,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);
@@ -418,30 +498,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;