@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/features/InputSuggestions.js

@@ -1,9 +1,14 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-
+import encodeXML from "@ui5/webcomponents-base/dist/util/encodeXML.js";
+import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
-import "../SuggestionItem.js";
+import SuggestionItem from "../SuggestionItem.js";
+import SuggestionGroupItem from "../SuggestionGroupItem.js";
+import Button from "../Button.js";
+import GroupHeaderListItem from "../GroupHeaderListItem.js";
+import SuggestionListItem from "../SuggestionListItem.js";
 
 import {
 	LIST_ITEM_POSITION,
@@ -36,12 +41,12 @@ class Suggestions {
 		this.fnOnSuggestionItemMouseOver = this.onItemMouseOver.bind(this);
 		this.fnOnSuggestionItemMouseOut = this.onItemMouseOut.bind(this);
 
+		this._getSuggestionPopover();
+
 		// An integer value to store the currently selected item position,
 		// that changes due to user interaction.
 		this.selectedItemIndex = null;
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-
 		this.accInfo = {};
 	}
 
@@ -61,9 +66,9 @@ class Suggestions {
 				image: suggestion.image || undefined,
 				icon: suggestion.icon || undefined,
 				type: suggestion.type || undefined,
-				info: suggestion.info || undefined,
-				infoState: suggestion.infoState,
-				group: suggestion.group,
+				additionalText: suggestion.additionalText || undefined,
+				additionalTextState: suggestion.additionalTextState,
+				groupItem: suggestion.groupItem,
 				key: idx,
 			});
 		});
@@ -93,10 +98,24 @@ class Suggestions {
 	}
 
 	onEnter(event) {
+		if (this._isGroupOrInactiveItem) {
+			event.preventDefault();
+			return false;
+		}
+
 		if (this._isItemOnTarget()) {
 			this.onItemSelected(null, true /* keyboardUsed */);
 			return true;
 		}
+
+		return false;
+	}
+
+	onTab(event) {
+		if (this._isItemOnTarget()) {
+			this.onItemSelected(null, true);
+			return true;
+		}
 		return false;
 	}
 
@@ -116,14 +135,22 @@ class Suggestions {
 	}
 
 	async open() {
-		this.responsivePopover = await this._respPopover();
+		this._getComponent().open = true;
 		this._beforeOpen();
-		this.responsivePopover.open(this._getComponent());
+
+		this.responsivePopover.showAt(this._getComponent());
 	}
 
 	async close(preventFocusRestore = false) {
-		this.responsivePopover = await this._respPopover();
+		const selectedItem = this._getItems() && this._getItems()[this.selectedItemIndex];
+
+		this._getComponent().open = false;
+		this.responsivePopover = await this._getSuggestionPopover();
 		this.responsivePopover.close(false, false, preventFocusRestore);
+
+		if (selectedItem && selectedItem.focused) {
+			selectedItem.focused = false;
+		}
 	}
 
 	updateSelectedItemPosition(pos) {
@@ -157,13 +184,14 @@ class Suggestions {
 
 		// If the item is "Inactive", prevent selection with SPACE or ENTER
 		// to have consistency with the way "Inactive" items behave in the ui5-list
-		if (item.type === "Inactive") {
+		if (item.type === "Inactive" || item.group) {
 			return;
 		}
 
 		this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], keyboardUsed);
 		item.selected = false;
-		this.close();
+		item.focused = false;
+		this._getComponent().open = false;
 	}
 
 	onItemPreviewed(item) {
@@ -198,12 +226,12 @@ class Suggestions {
 		}
 
 		if (!this.attachedAfterOpened) {
-			this._respPopover.addEventListener("ui5-after-open", this._onOpen.bind(this));
+			this._getSuggestionPopover.addEventListener("ui5-after-open", this._onOpen.bind(this));
 			this.attachedAfterOpened = true;
 		}
 
 		if (!this.attachedAfterClose) {
-			this._respPopover.addEventListener("ui5-after-close", this._onClose.bind(this));
+			this._getSuggestionPopover.addEventListener("ui5-after-close", this._onClose.bind(this));
 			this.attachedAfterClose = true;
 		}
 	}
@@ -224,7 +252,17 @@ class Suggestions {
 	}
 
 	_isItemOnTarget() {
-		return this.isOpened() && this.selectedItemIndex !== null;
+		return this.isOpened() && this.selectedItemIndex !== null && this.selectedItemIndex !== -1 && !this._isGroupOrInactiveItem;
+	}
+
+	get _isGroupOrInactiveItem() {
+		const items = this._getItems();
+
+		if (!items || !items[this.selectedItemIndex]) {
+			return false;
+		}
+
+		return (items[this.selectedItemIndex].group || items[this.selectedItemIndex].type === "Inactive");
 	}
 
 	isOpened() {
@@ -246,23 +284,68 @@ class Suggestions {
 	_selectNextItem() {
 		const itemsCount = this._getItems().length;
 		const previousSelectedIdx = this.selectedItemIndex;
+		const hasValueState = this.component.hasValueStateMessage;
+
+		if (hasValueState && previousSelectedIdx === null && !this.component._isValueStateFocused) {
+			this.component._isValueStateFocused = true;
+			this.component.focused = false;
+			this.component.hasSuggestionItemSelected = false;
+			this.selectedItemIndex = null;
+
+			return;
+		}
 
-		if ((this.selectedItemIndex === null) || (++this.selectedItemIndex > itemsCount - 1)) {
-			this.selectedItemIndex = 0;
+		if ((previousSelectedIdx === null && !hasValueState) || this.component._isValueStateFocused) {
+			this.component._isValueStateFocused = false;
+			--this.selectedItemIndex;
 		}
 
-		this._moveItemSelection(previousSelectedIdx, this.selectedItemIndex);
+		if (previousSelectedIdx !== null && previousSelectedIdx + 1 > itemsCount - 1) {
+			return;
+		}
+
+		this._moveItemSelection(previousSelectedIdx, ++this.selectedItemIndex);
 	}
 
 	_selectPreviousItem() {
-		const itemsCount = this._getItems().length;
+		const items = this._getItems();
 		const previousSelectedIdx = this.selectedItemIndex;
+		const hasValueState = this.component.hasValueStateMessage;
+
+		if (hasValueState && previousSelectedIdx === 0 && !this.component._isValueStateFocused) {
+			this.component.hasSuggestionItemSelected = false;
+			this.component._isValueStateFocused = true;
+			this.selectedItemIndex = null;
 
-		if ((this.selectedItemIndex === null) || (--this.selectedItemIndex < 0)) {
-			this.selectedItemIndex = itemsCount - 1;
+			items[0].focused = false;
+			items[0].selected = false;
+
+			return;
 		}
 
-		this._moveItemSelection(previousSelectedIdx, this.selectedItemIndex);
+		if (this.component._isValueStateFocused) {
+			this.component.focused = true;
+			this.component._isValueStateFocused = false;
+			this.selectedItemIndex = null;
+
+			return;
+		}
+
+		if (previousSelectedIdx === -1 || previousSelectedIdx === null) {
+			return;
+		}
+
+		if (previousSelectedIdx - 1 < 0) {
+			items[previousSelectedIdx].selected = false;
+			items[previousSelectedIdx].focused = false;
+
+			this.component.focused = true;
+			this.component.hasSuggestionItemSelected = false;
+			this.selectedItemIndex -= 1;
+			return;
+		}
+
+		this._moveItemSelection(previousSelectedIdx, --this.selectedItemIndex);
 	}
 
 	_moveItemSelection(previousIdx, nextIdx) {
@@ -270,6 +353,12 @@ class Suggestions {
 		const currentItem = items[nextIdx];
 		const previousItem = items[previousIdx];
 
+		if (!currentItem) {
+			return;
+		}
+
+		this.component.focused = false;
+
 		this.accInfo = {
 			currentPos: nextIdx + 1,
 			listSize: items.length,
@@ -278,16 +367,22 @@ class Suggestions {
 
 		if (previousItem) {
 			previousItem.selected = false;
+			previousItem.focused = false;
 		}
 
 		if (currentItem) {
-			currentItem.selected = true;
+			currentItem.focused = true;
+
+			if (currentItem.type === "Active") {
+				currentItem.selected = true;
+			}
 
 			if (this.handleFocus) {
 				currentItem.focus();
 			}
 		}
 
+		this.component.hasSuggestionItemSelected = true;
 		this.onItemPreviewed(currentItem);
 
 		if (!this._isItemIntoView(currentItem)) {
@@ -295,6 +390,22 @@ class Suggestions {
 		}
 	}
 
+	_deselectItems() {
+		const items = this._getItems();
+		items.forEach(item => {
+			item.selected = false;
+			item.focused = false;
+		});
+	}
+
+	_clearItemFocus() {
+		const focusedItem = this._getItems().find(item => item.focused);
+
+		if (focusedItem) {
+			focusedItem.focused = false;
+		}
+	}
+
 	_isItemIntoView(item) {
 		const rectItem = item.getDomRef().getBoundingClientRect();
 		const rectInput = this._getComponent().getDomRef().getBoundingClientRect();
@@ -311,7 +422,7 @@ class Suggestions {
 
 	async _getScrollContainer() {
 		if (!this._scrollContainer) {
-			await this._respPopover();
+			await this._getSuggestionPopover();
 			this._scrollContainer = this.responsivePopover.shadowRoot.querySelector(".ui5-popup-content");
 		}
 
@@ -319,7 +430,7 @@ class Suggestions {
 	}
 
 	_getItems() {
-		return [...this.responsivePopover.querySelector("ui5-list").children];
+		return !!this.responsivePopover && [...this.responsivePopover.querySelector("[ui5-list]").children];
 	}
 
 	_getComponent() {
@@ -327,8 +438,8 @@ class Suggestions {
 	}
 
 	async _getList() {
-		this.responsivePopover = await this._respPopover();
-		return this.responsivePopover.querySelector("ui5-list");
+		this.responsivePopover = await this._getSuggestionPopover();
+		return this.responsivePopover.querySelector("[ui5-list]");
 	}
 
 	async _getListWidth() {
@@ -340,20 +451,19 @@ class Suggestions {
 		return this._getComponent().getSlottedNodes(this.slotName);
 	}
 
-	async _respPopover() {
+	async _getSuggestionPopover() {
 		if (this.responsivePopover) {
 			return this.responsivePopover;
 		}
 
 		const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
-		this.responsivePopover = staticAreaItem.querySelector("ui5-responsive-popover");
+		this.responsivePopover = staticAreaItem.querySelector("[ui5-responsive-popover]");
 		return this.responsivePopover;
 	}
 
 	get itemSelectionAnnounce() {
-		const i18nBundle = this.i18nBundle,
-			itemPositionText = i18nBundle.getText(LIST_ITEM_POSITION, [this.accInfo.currentPos], [this.accInfo.listSize]),
-			itemSelectionText = i18nBundle.getText(LIST_ITEM_SELECTED);
+		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize),
+			itemSelectionText = Suggestions.i18nBundle.getText(LIST_ITEM_SELECTED);
 
 		return `${itemPositionText} ${this.accInfo.itemText} ${itemSelectionText}`;
 	}
@@ -369,41 +479,42 @@ class Suggestions {
 	}
 
 	getHighlightedText(suggestion, input) {
-		let text = suggestion.text || suggestion.textContent;
-		text = this.sanitizeText(text);
-
+		const text = suggestion.text || suggestion.textContent;
 		return this.hightlightInput(text, input);
 	}
 
 	getHighlightedDesc(suggestion, input) {
-		let text = suggestion.description;
-		text = this.sanitizeText(text);
-
+		const text = suggestion.description || "";
 		return this.hightlightInput(text, input);
 	}
 
 	hightlightInput(text, input) {
-		if (!text) {
-			return text;
-		}
-
-		const inputEscaped = input.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-		const regEx = new RegExp(inputEscaped, "ig");
-		return text.replace(regEx, match => `<b>${match}</b>`);
+		return generateHighlightedMarkup(text, input);
 	}
 
 	sanitizeText(text) {
-		return text && text.replace("<", "&lt");
+		return encodeXML(text);
+	}
+
+	static get dependencies() {
+		return [
+			SuggestionItem,
+			SuggestionGroupItem,
+			ResponsivePopover,
+			List,
+			SuggestionListItem,
+			GroupHeaderListItem,
+			Button,
+		];
+	}
+
+	static async init() {
+		Suggestions.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 
 Suggestions.SCROLL_STEP = 60;
 
-// The List and Popover components would be rendered
-// by the issuer component`s template.
-List.define();
-ResponsivePopover.define();
-
 // Add suggestions support to the global features registry so that Input.js can use it
 registerFeature("InputSuggestions", Suggestions);