@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-918b4fbe7

package/src/Tree.js

@@ -1,5 +1,6 @@
 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";
@@ -18,7 +19,7 @@ const metadata = {
 	tag: "ui5-tree",
 	properties: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
 		/**
-		 * Defines the mode of the <code>ui5-tree</code>. Since the tree uses a <code>ui5-list</code> to display its structure,
+		 * 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.
 		 *
 		 * <br><br>
@@ -34,7 +35,7 @@ const metadata = {
 		 * </ul>
 		 *
 		 * @public
-		 * @type {ListMode}
+		 * @type {sap.ui.webcomponents.main.types.ListMode}
 		 * @defaultValue "None"
 		 */
 		mode: {
@@ -43,7 +44,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the text that is displayed when the <code>ui5-tree</code> contains no items.
+		 * Defines the text that is displayed when the component contains no items.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -54,7 +55,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-tree</code> header text.
+		 * Defines the component header text.
 		 * <br><br>
 		 * <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.
 		 *
@@ -67,7 +68,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-tree</code> footer text.
+		 * Defines the component footer text.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -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
 		 *
@@ -111,7 +151,7 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
 
 		/**
-		 * Defines the items of the <code>ui5-tree</code>. Tree items may have other tree items as children.
+		 * 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.
 		 *
@@ -126,7 +166,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-tree</code> header.
+		 * Defines the component header.
 		 * <br><br>
 		 * <b>Note:</b> When the <code>header</code> slot is set, the
 		 * <code>headerText</code> property is ignored.
@@ -158,10 +198,37 @@ const metadata = {
 			},
 		},
 
+		/**
+		 * Fired when the mouse cursor enters the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseover
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseover": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
+		/**
+		 * Fired when the mouse cursor leaves the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseout
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseout": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
 		/**
 		 * Fired when a tree item is activated.
 		 *
 		 * @event sap.ui.webcomponents.main.Tree#item-click
+		 * @allowPreventDefault
 		 * @param {HTMLElement} item The clicked item.
 		 * @public
 		 */
@@ -175,7 +242,7 @@ const metadata = {
 		 * Fired when the Delete button of any tree item is pressed.
 		 * <br><br>
 		 * <b>Note:</b> A Delete button is displayed on each item,
-		 * when the <code>ui5-tree</code> <code>mode</code> property is set to <code>Delete</code>.
+		 * when the component <code>mode</code> property is set to <code>Delete</code>.
 		 *
 		 * @event sap.ui.webcomponents.main.Tree#item-delete
 		 * @param {HTMLElement} item the deleted item.
@@ -194,12 +261,14 @@ const metadata = {
 		 * @event sap.ui.webcomponents.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 },
 			},
 		},
 	},
@@ -252,7 +321,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Tree
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tree
  * @appenddocs TreeItem
  * @public
@@ -293,7 +362,11 @@ class Tree extends UI5Element {
 	}
 
 	get _role() {
-		return "tree";
+		return this._minimal ? "menubar" : "tree";
+	}
+
+	get _label() {
+		return getEffectiveAriaLabelText(this);
 	}
 
 	_onListItemStepIn(event) {
@@ -328,7 +401,10 @@ class Tree extends UI5Element {
 	_onListItemClick(event) {
 		const listItem = event.detail.item;
 		const treeItem = listItem.treeItem;
-		this.fireEvent("item-click", { item: treeItem });
+
+		if (!this.fireEvent("item-click", { item: treeItem }, true)) {
+			event.preventDefault();
+		}
 	}
 
 	_onListItemDelete(event) {
@@ -337,9 +413,22 @@ class Tree extends UI5Element {
 		this.fireEvent("item-delete", { item: treeItem });
 	}
 
+	_onListItemMouseOver(event) {
+		const treeItem = event.target.treeItem;
+
+		this.fireEvent("item-mouseover", { item: treeItem });
+	}
+
+	_onListItemMouseOut(event) {
+		const treeItem = event.target.treeItem;
+
+		this.fireEvent("item-mouseout", { item: treeItem });
+	}
+
 	_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;
 
 		previouslySelectedItems.forEach(item => {
 			item.selected = false;
@@ -351,6 +440,7 @@ class Tree extends UI5Element {
 		this.fireEvent("selection-change", {
 			previouslySelectedItems,
 			selectedItems,
+			targetItem,
 		});
 	}
 

package/src/TreeItem.js

@@ -1,6 +1,10 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
+import ListItemType from "./types/ListItemType.js";
+
+import HasPopup from "./types/HasPopup.js";
+
 /**
  * @public
  */
@@ -12,7 +16,7 @@ const metadata = {
 		 * Defines the text of the tree item.
 		 *
 		 * @public
-		 * @type {String}
+		 * @type {string}
 		 * @defaultValue ""
 		 */
 		text: {
@@ -29,6 +33,27 @@ const metadata = {
 		expanded: {
 			type: Boolean,
 		},
+		/**
+		* Defines whether the selection of a tree node is displayed as partially selected.
+		* <br><br>
+		* <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user
+		* interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code>
+		* and <code>selected</code> properties:
+		* <ul>
+		* <li> If a tree node has both <code>selected</code> and <code>indeterminate</code> set to <code>true</code>, it is displayed as partially selected.
+		* <li> If a tree node has <code>selected</code> set to <code>true</code> and <code>indeterminate</code> set to <code>false</code>, it is displayed as selected.
+		* <li> If a tree node has <code>selected</code> set to <code>false</code>, it is displayed as not selected regardless of the value of the <code>indeterminate</code> property.
+		* </ul>
+		* <br>
+		* <b>Note:</b> This property takes effect only when the <code>ui5-tree</code> is in <code>MultiSelect</code> mode.
+		* @type {boolean}
+		* @defaultvalue false
+		* @public
+		* @since 1.1.0
+		*/
+		indeterminate: {
+			type: Boolean,
+		},
 
 		/**
 		 * Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
@@ -61,7 +86,7 @@ const metadata = {
 		 * If set, an icon will be displayed before the text, representing the tree item.
 		 *
 		 * @public
-		 * @type {String}
+		 * @type {string}
 		 * @defaultValue ""
 		 */
 		icon: {
@@ -69,34 +94,110 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>info</code>, displayed in the end of the tree item.
+		 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
 		 * @type {string}
 		 * @public
-		 * @since 1.0.0-rc.12
+		 * @since 1.0.0-rc.15
 		 */
-		info: {
+		additionalText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the state of the <code>info</code>.
+		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
-		 * @type {ValueState}
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
-		 * @since 1.0.0-rc.12
+		 * @since 1.0.0-rc.15
 		 */
-		infoState: {
+		additionalTextState: {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
+
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		title: {
+			type: String,
+		},
+
+		/**
+
+		 * Defines the visual indication and behavior of the list items.
+		 * Available options are <code>Active</code> (by default), <code>Inactive</code>, <code>Detail</code> and <code>Navigation</code>.
+		 * <br><br>
+		 * <b>Note:</b> When set to <code>Active</code> or <code>Navigation</code>, the item will provide visual response upon press and hover,
+		 * while with type <code>Inactive</code> and <code>Detail</code> - will not.
+		 *
+		 * @type {sap.ui.webcomponents.main.types.ListItemType}
+		 * @defaultvalue "Active"
+		 * @public
+		*/
+		type: {
+			type: ListItemType,
+			defaultValue: ListItemType.Active,
+		},
+
+		/**
+		 * The navigated state of the list item.
+		 * If set to <code>true</code>, a navigation indicator is displayed at the end of the list item.
+		 *
+		 * @public
+		 * @type {boolean}
+		 * @since 1.10.0
+		 */
+		 navigated: {
+			type: Boolean,
+		},
+
+		/**
+		 * 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,
+		},
+
+		/**
+		 * Defines the availability and type of interactive popup element that can be triggered by the component on which the property is set.
+		 * @type {sap.ui.webcomponents.main.types.HasPopup}
+		 * @since 1.10.0
+		 * @private
+		 */
+		ariaHaspopup: {
+			type: HasPopup,
+			noAttribute: true,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {
 
 		/**
-		 * Defines the items of this <code>ui5-tree-item</code>.
+		 * Defines the items of this component.
 		 *
 		 * @type {sap.ui.webcomponents.main.ITreeItem[]}
 		 * @slot items
@@ -128,7 +229,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TreeItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tree-item
  * @public
  * @implements sap.ui.webcomponents.main.ITreeItem
@@ -143,6 +244,10 @@ class TreeItem extends UI5Element {
 		return this.hasChildren || this.items.length > 0;
 	}
 
+	get typeNavigation() {
+		return this.type === ListItemType.Navigation;
+	}
+
 	/**
 	 * Call this method to manually switch the <code>expanded</code> state of a tree item.
 	 * @public

package/src/TreeListItem.hbs

@@ -3,10 +3,11 @@
 {{#*inline "listItemPreContent"}}
 	<div
 		class="ui5-li-tree-toggle-box"
-		style="padding-left: {{effectiveLevel}}rem; padding-left: calc(var(--_ui5-tree-indent-step) * {{effectiveLevel}});"
+		style="{{styles.preContent}}"
 	>
 		{{#if _showToggleButtonBeginning}}
 			<ui5-icon
+				part="toggle-icon"
 				class="ui5-li-tree-toggle-icon"
 				name="{{_toggleIconName}}"
 				show-tooltip
@@ -23,8 +24,8 @@
 			<div part="title" class="ui5-li-title"><slot></slot></div>
 		{{/if}}
 
-		{{#if info}}
-			<span part="info" class="ui5-li-tree-info">{{info}}</span>
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
 		{{/if}}
 	</div>
 {{/inline}}
@@ -40,6 +41,7 @@
 {{#*inline "iconEnd"}}
 	{{#if _showToggleButtonEnd}}
 		<ui5-icon
+			part="toggle-icon"
 			class="ui5-li-tree-toggle-icon"
 			name="{{_toggleIconName}}"
 			@click="{{_toggleClick}}"

package/src/TreeListItem.js

@@ -1,6 +1,6 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
@@ -10,7 +10,6 @@ import {
 	TREE_ITEM_ARIA_LABEL,
 	TREE_ITEM_EXPAND_NODE,
 	TREE_ITEM_COLLAPSE_NODE,
-	LIST_ITEM_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -19,6 +18,8 @@ import TreeListItemTemplate from "./generated/templates/TreeListItemTemplate.lit
 // Styles
 import treeListItemCss from "./generated/themes/TreeListItem.css.js";
 
+import HasPopup from "./types/HasPopup.js";
+
 /**
  * @public
  */
@@ -30,7 +31,7 @@ const metadata = {
 		/**
 		 * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @public
 		 * @defaultValue 1
 		 */
@@ -43,7 +44,7 @@ const metadata = {
 		 * If set, an icon will be displayed before the text of the tree list item.
 		 *
 		 * @public
-		 * @type {String}
+		 * @type {string}
 		 * @defaultValue ""
 		 */
 		icon: {
@@ -73,29 +74,49 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>info</code>, displayed in the end of the tree item.
+		 * @private
+		 * @since 1.1.0
+		 */
+		indeterminate: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
 		 * @type {string}
 		 * @public
-		 * @since 1.0.0-rc.12
+		 * @since 1.0.0-rc.15
 		 */
-		info: {
+		additionalText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the state of the <code>info</code>.
+		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
-		 * @type {ValueState}
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
-		 * @since 1.0.0-rc.12
+		 * @since 1.0.0-rc.15
 		 */
-		infoState: {
+		additionalTextState: {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
 
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.8.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Defines whether the toggle button is shown at the end, rather than at the beginning of the item
 		 *
@@ -136,10 +157,34 @@ const metadata = {
 			noAttribute: true,
 		},
 
+		/**
+		 * 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,
+		},
+
+		/**
+		 * Defines the availability and type of interactive popup element that can be triggered by the component on which the property is set.
+		 * @type {sap.ui.webcomponents.main.types.HasPopup}
+		 * @since 1.10.0
+		 * @private
+		 */
+		ariaHaspopup: {
+			type: HasPopup,
+			noAttribute: true,
+		},
+
 	},
 	slots: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-li-tree</code>.
+		 * Defines the text of the component.
 		 * <br><br>
 		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
@@ -207,14 +252,14 @@ const metadata = {
  * The <code>ui5-li-tree</code> exposes the following CSS Shadow Parts:
  * <ul>
  * <li>title - Used to style the title of the tree list item</li>
- * <li>info - Used to style the info of the tree list item</li>
+ * <li>additionalText - Used to style the additionalText of the tree list item</li>
  * <li>icon - Used to style the icon of the tree list item</li>
  * </ul>
  *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TreeListItem
- * @extends ListItem
+ * @extends sap.ui.webcomponents.main.ListItem
  * @tagname ui5-li-tree
  * @public
  * @since 1.0.0-rc.8
@@ -239,12 +284,6 @@ class TreeListItem extends ListItem {
 		];
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	onBeforeRendering() {
 		this.actionable = false;
 	}
@@ -255,6 +294,14 @@ class TreeListItem extends ListItem {
 		return allClasses;
 	}
 
+	get styles() {
+		return {
+			preContent: {
+				"padding-left": `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+			},
+		};
+	}
+
 	get effectiveLevel() {
 		return this.level - 1;
 	}
@@ -279,15 +326,29 @@ class TreeListItem extends ListItem {
 		return this.textContent.length && !this._minimal;
 	}
 
+	get _ariaLabel() {
+		return this.accessibleRoleDescription ? undefined : TreeListItem.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
+	}
+
 	get _accInfo() {
-		return {
-			role: "treeitem",
-			ariaExpanded: this.showToggleButton ? this.expanded : undefined,
-			ariaLevel: this.level,
+		const accInfoSettings = {
+			role: this._minimal ? "menuitemradio" : "treeitem",
+			ariaExpanded: this.showToggleButton && !this._minimal ? this.expanded : undefined,
+			ariaLevel: this._minimal ? undefined : this.level,
 			posinset: this._posinset,
 			setsize: this._setsize,
-			listItemAriaLabel: this.ariaLabelText,
+			ariaSelectedText: this.ariaSelectedText,
+			listItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined,
+			ariaHaspopup: this.ariaHaspopup || undefined,
 		};
+
+		if (this._minimal) {
+			accInfoSettings.ariaChecked = this.selected;
+		} else {
+			accInfoSettings.ariaSelected = this.selected;
+		}
+
+		return accInfoSettings;
 	}
 
 	_toggleClick(event) {
@@ -315,22 +376,15 @@ class TreeListItem extends ListItem {
 		}
 	}
 
-	get ariaLabelText() {
-		let text = this.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
-
-		if (this.selected) {
-			text += ` ${this.i18nBundle.getText(LIST_ITEM_SELECTED)}`;
-		}
-
-		return text;
-	}
-
 	get iconAccessibleName() {
-		return this.expanded ? this.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : this.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
+		return this.expanded ? TreeListItem.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeListItem.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		[TreeListItem.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			super.onDefine(),
+		]);
 	}
 }