@ui5/webcomponents 1.1.0 → 1.2.0

package/dist/MultiComboBox.js

@@ -6,12 +6,12 @@ import {
 	isShow,
 	isDown,
 	isUp,
-	isBackSpace,
 	isSpace,
-	isLeft,
 	isRight,
-	isEscape,
-	isEnter,
+	isHome,
+	isTabNext,
+	isTabPrevious,
+	isCtrlA,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -20,6 +20,10 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/multiselect-all.js";
 import "@ui5/webcomponents-icons/dist/not-editable.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -413,6 +417,7 @@ class MultiComboBox extends UI5Element {
 		this._deleting = false;
 		this._validationTimeout = null;
 		this._handleResizeBound = this._handleResize.bind(this);
+		this.currentItemIdx = -1;
 	}
 
 	onEnterDOM() {
@@ -524,7 +529,7 @@ class MultiComboBox extends UI5Element {
 		return this.placeholder;
 	}
 
-	_handleLeft() {
+	_handleArrowLeft() {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
 
 		if (cursorPosition === 0) {
@@ -535,14 +540,17 @@ class MultiComboBox extends UI5Element {
 	_tokenizerFocusOut(event) {
 		this._tokenizerFocused = false;
 
-		const tokensCount = this._tokenizer.tokens.length - 1;
+		const tokensCount = this._tokenizer.tokens.length;
+		const selectedTokens = this._selectedTokensCount;
+		const lastTokenBeingDeleted = tokensCount - 1 === 0 && this._deleting;
+		const allTokensAreBeingDeleted = selectedTokens === tokensCount && this._deleting;
 
 		if (!event.relatedTarget || !event.relatedTarget.hasAttribute("ui5-token")) {
 			this._tokenizer.tokens.forEach(token => { token.selected = false; });
 			this._tokenizer.scrollToStart();
 		}
 
-		if (tokensCount === 0 && this._deleting) {
+		if (allTokensAreBeingDeleted || lastTokenBeingDeleted) {
 			setTimeout(() => {
 				if (!isPhone()) {
 					this.shadowRoot.querySelector("input").focus();
@@ -563,41 +571,77 @@ class MultiComboBox extends UI5Element {
 	}
 
 	async _onkeydown(event) {
-		if (isLeft(event)) {
-			this._handleLeft(event);
-		}
-
 		if (isShow(event) && !this.readonly && !this.disabled) {
 			event.preventDefault();
 			this.togglePopover();
 		}
 
-		if (this.open && (isUp(event) || isDown(event))) {
+		if (isUp(event) || isDown(event)) {
 			this._handleArrowNavigation(event);
+			return;
 		}
 
-		if (isBackSpace(event) && event.target.value === "") {
-			event.preventDefault();
+		this._keyDown = true;
+		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
+	}
 
+	_handleBackspace(event) {
+		if (event.target.value === "") {
+			event.preventDefault();
 			this._tokenizer._focusLastToken();
 		}
+	}
 
-		// Reset value on ESC
-		if (isEscape(event) && (!this.allowCustomValues || (!this.open && this.allowCustomValues))) {
+	_handleEscape(event) {
+		if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
 			this.value = this._lastValue;
 		}
+	}
+
+	_handleHome(event) {
+		const shouldFocusToken = this._isFocusInside && event.target.selectionStart === 0 && this._tokenizer.tokens.length > 0;
 
-		if (isEnter(event)) {
-			this.handleEnter();
+		if (shouldFocusToken) {
+			event.preventDefault();
+			this._tokenizer.tokens[0].focus();
 		}
+	}
 
-		this._keyDown = true;
+	_handleEnd(event) {
+		const tokens = this._tokenizer.tokens;
+		const lastTokenIdx = tokens.length - 1;
+		const shouldFocusInput = event.target === tokens[lastTokenIdx] && tokens[lastTokenIdx] === this.shadowRoot.activeElement;
+
+		if (shouldFocusInput) {
+			event.preventDefault();
+			this._inputDom.focus();
+		}
+	}
+
+	_handleTab(event) {
+		this.allItemsPopover.close();
+	}
+
+	_handleSelectAll(event) {
+		const filteredItems = this._filteredItems;
+		const allItemsSelected = filteredItems.every(item => item.selected);
+
+		filteredItems.forEach(item => {
+			item.selected = !allItemsSelected;
+		});
+
+		this.fireSelectionChange();
 	}
 
 	_onValueStateKeydown(event) {
 		const isArrowDown = isDown(event);
 		const isArrowUp = isUp(event);
 
+		if (isTabNext(event) || isTabPrevious(event)) {
+			this._onItemTab(event);
+			return;
+		}
+
 		event.preventDefault();
 
 		if (isArrowDown) {
@@ -612,23 +656,36 @@ class MultiComboBox extends UI5Element {
 	_onItemKeydown(event) {
 		const isFirstItem = this.list.items[0] === event.target;
 
+		if (isTabNext(event) || isTabPrevious(event)) {
+			this._onItemTab(event);
+			return;
+		}
+
 		event.preventDefault();
 
-		if (!isUp(event) || !isFirstItem) {
+		if (isCtrlA(event)) {
+			this._handleSelectAll(event);
 			return;
 		}
 
-		if (this.valueStateHeader) {
+		if (((isUp(event) && isFirstItem) || isHome(event)) && this.valueStateHeader) {
 			this.valueStateHeader.focus();
-			return;
 		}
 
+		if (!this.valueStateHeader && isUp(event) && isFirstItem) {
+			this._inputDom.focus();
+		}
+	}
+
+	_onItemTab(event) {
 		this._inputDom.focus();
+		this.allItemsPopover.close();
 	}
 
 	async _handleArrowNavigation(event) {
 		const isArrowDown = isDown(event);
-		const hasSuggestions = this.allItemsPopover.opened && this.items.length;
+		const hasSuggestions = this.items.length;
+		const isOpen = this.allItemsPopover.opened;
 
 		event.preventDefault();
 
@@ -636,7 +693,7 @@ class MultiComboBox extends UI5Element {
 			await this._setValueStateHeader();
 		}
 
-		if (isArrowDown && this.focused && this.valueStateHeader) {
+		if (isArrowDown && isOpen && this.focused && this.valueStateHeader) {
 			this.valueStateHeader.focus();
 			return;
 		}
@@ -644,16 +701,91 @@ class MultiComboBox extends UI5Element {
 		if (isArrowDown && this.focused && hasSuggestions) {
 			this._handleArrowDown(event);
 		}
+
+		if (!isArrowDown && !isOpen && !this.readonly) {
+			this._navigateToPrevItem();
+		}
 	}
 
 	_handleArrowDown(event) {
+		const isOpen = this.allItemsPopover.opened;
 		const firstListItem = this.list.items[0];
 
-		this.list._itemNavigation.setCurrentItem(firstListItem);
-		firstListItem.focus();
+		if (isOpen) {
+			this.list._itemNavigation.setCurrentItem(firstListItem);
+			firstListItem.focus();
+		} else if (!this.readonly) {
+			this._navigateToNextItem();
+		}
 	}
 
-	handleEnter() {
+	_navigateToNextItem() {
+		const items = this.items;
+		const itemsCount = items.length;
+		const previousItemIdx = this.currentItemIdx;
+
+		if (previousItemIdx > -1 && items[previousItemIdx].text !== this.value) {
+			this.currentItemIdx = -1;
+		}
+
+		if (previousItemIdx >= itemsCount - 1) {
+			return;
+		}
+
+		let currentItem = this.items[++this.currentItemIdx];
+
+		while (this.currentItemIdx < itemsCount - 1 && currentItem.selected) {
+			currentItem = this.items[++this.currentItemIdx];
+		}
+
+		if (currentItem.selected === true) {
+			this.currentItemIdx = previousItemIdx;
+			return;
+		}
+
+		this.value = currentItem.text;
+		this._innerInput.value = currentItem.text;
+		this._innerInput.setSelectionRange(0, currentItem.text.length);
+	}
+
+	_navigateToPrevItem() {
+		const items = this.items;
+		let previousItemIdx = this.currentItemIdx;
+
+		if ((!this.value && previousItemIdx !== -1) || (previousItemIdx !== -1 && this.value && this.value !== items[previousItemIdx].text)) {
+			previousItemIdx = -1;
+		}
+
+		if (previousItemIdx === -1) {
+			this.currentItemIdx = items.length;
+		}
+
+		if (previousItemIdx === 0) {
+			this.currentItemIdx = 0;
+			return;
+		}
+
+		let currentItem = this.items[--this.currentItemIdx];
+
+		while (currentItem && currentItem.selected && this.currentItemIdx > 0) {
+			currentItem = this.items[--this.currentItemIdx];
+		}
+
+		if (!currentItem) {
+			return;
+		}
+
+		if (currentItem.selected) {
+			this.currentItemIdx = previousItemIdx;
+			return;
+		}
+
+		this.value = currentItem.text;
+		this._innerInput.value = currentItem.text;
+		this._innerInput.setSelectionRange(0, currentItem.text.length);
+	}
+
+	_handleEnter() {
 		const lowerCaseValue = this.value.toLowerCase();
 		const matchingItem = this.items.find(item => item.text.toLowerCase() === lowerCaseValue);
 		const oldValueState = this.valueState;
@@ -698,6 +830,8 @@ class MultiComboBox extends UI5Element {
 				}, 0);
 			}
 		}
+
+		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
 	}
 
 	_filterItems(str) {
@@ -918,6 +1052,7 @@ class MultiComboBox extends UI5Element {
 			this._innerInput.blur();
 		}
 
+		!isPhone() && this._innerInput.setSelectionRange(0, this.value.length);
 		this._lastValue = this.value;
 	}
 
@@ -1003,6 +1138,10 @@ class MultiComboBox extends UI5Element {
 		return `${this._id}-hiddenText-nMore`;
 	}
 
+	get _selectedTokensCount() {
+		return this._tokenizer.tokens.filter(token => token.selected).length;
+	}
+
 	get ariaDescribedByText() {
 		return this.valueStateTextId ? `${this._tokensCountTextId} ${this.valueStateTextId}` : `${this._tokensCountTextId}`;
 	}

package/dist/MultiInput.js

@@ -4,6 +4,9 @@ import {
 	isBackSpace,
 	isLeft,
 	isRight,
+	isRightCtrl,
+	isHome,
+	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { MULTIINPUT_ROLEDESCRIPTION_TEXT } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
@@ -136,8 +139,15 @@ class MultiInput extends Input {
 	}
 
 	tokenDelete(event) {
-		this.fireEvent("token-delete", {
-			token: event.detail.ref,
+		const focusedToken = event.detail.ref;
+		const selectedTokens = this.tokens.filter(token => token.selected);
+
+		if (selectedTokens.indexOf(focusedToken) === -1) {
+			selectedTokens.push(focusedToken);
+		}
+
+		selectedTokens.forEach(token => {
+			this.fireEvent("token-delete", { token });
 		});
 
 		this.focus();
@@ -170,7 +180,9 @@ class MultiInput extends Input {
 	_onkeydown(event) {
 		super._onkeydown(event);
 
-		if (isLeft(event)) {
+		const isHomeInBeginning = isHome(event) && event.target.selectionStart === 0;
+
+		if (isLeft(event) || isHomeInBeginning) {
 			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens.
 
 			return this._handleLeft(event);
@@ -189,22 +201,57 @@ class MultiInput extends Input {
 	}
 
 	_onTokenizerKeydown(event) {
-		if (isRight(event)) {
-			const lastTokenIndex = this.tokenizer._tokens.length - 1;
+		const rightCtrl = isRightCtrl(event);
+		const isCtrl = !!(event.metaKey || event.ctrlKey);
+		const tokens = this.tokens;
 
-			if (this.tokenizer._tokens[lastTokenIndex] === document.activeElement) {
+		if (isRight(event) || isEnd(event) || rightCtrl) {
+			event.preventDefault();
+			const lastTokenIndex = this.tokens.length - 1;
+
+			if (event.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {
 				setTimeout(() => {
 					this.focus();
 				}, 0);
+			} else if (rightCtrl) {
+				event.preventDefault();
+				return this.tokenizer._handleArrowCtrl(event.target, this.tokens, true);
+			}
+		}
+
+		this.tokenizer._handleItemNavigation(event, tokens);
+
+		if (isCtrl && ["c", "x"].includes(event.key.toLowerCase())) {
+			event.preventDefault();
+
+			const isCut = event.key.toLowerCase() === "x";
+			const selectedTokens = tokens.filter(token => token.selected);
+
+			if (isCut) {
+				const cutResult = this.tokenizer._fillClipboard("cut", selectedTokens);
+
+				selectedTokens.forEach(token => {
+					this.fireEvent("token-delete", { token });
+				});
+
+				this.focus();
+
+				return cutResult;
 			}
+
+			return this.tokenizer._fillClipboard("copy", selectedTokens);
 		}
 	}
 
 	_handleLeft() {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
+		const tokens = this.tokens;
+		const lastToken = tokens.length && tokens[tokens.length - 1];
 
-		if (cursorPosition === 0) {
-			this.tokenizer._focusLastToken();
+		if (cursorPosition === 0 && lastToken) {
+			// this.tokenizer._focusLastToken(); won't work as the tokens in the MultiInput use different slot and are not resolved properly
+			lastToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(lastToken);
 		}
 	}
 

package/dist/Panel.js

@@ -8,6 +8,7 @@ import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationM
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Button from "./Button.js";
+import Icon from "./Icon.js";
 import TitleLevel from "./types/TitleLevel.js";
 import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 import PanelTemplate from "./generated/templates/PanelTemplate.lit.js";
@@ -132,7 +133,7 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -175,10 +176,6 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
-
-		_buttonAccInfo: {
-			type: Object,
-		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
@@ -409,8 +406,10 @@ class Panel extends UI5Element {
 	get accInfo() {
 		return {
 			"button": {
-				"ariaExpanded": this.expanded,
-				"ariaControls": `${this._id}-content`,
+				"accessibilityAttributes": {
+					"expanded": this.expanded,
+					"controls": `${this._id}-content`,
+				},
 				"title": this.toggleButtonTitle,
 				"ariaLabelButton": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,
 			},
@@ -458,7 +457,7 @@ class Panel extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Button];
+		return [Button, Icon];
 	}
 
 	static async onDefine() {

package/dist/Popover.js

@@ -1,6 +1,5 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import Popup from "./Popup.js";
@@ -145,6 +144,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the opener id of the element that the popover is shown at
+		 * @public
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @since 1.2.0
+		 */
+		opener: {
+			type: String,
+		},
+
 		/**
 		 * Defines whether the content is scrollable.
 		 *
@@ -249,6 +259,17 @@ const metadata = {
  * or selects an action within the popover. You can prevent this with the
  * <code>modal</code> property.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-popover</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Popover.js";</code>
@@ -264,8 +285,6 @@ const metadata = {
 class Popover extends Popup {
 	constructor() {
 		super();
-
-		this._handleResize = this.handleResize.bind(this);
 	}
 
 	static get metadata() {
@@ -288,12 +307,18 @@ class Popover extends Popup {
 		return 6; // px
 	}
 
-	onEnterDOM() {
-		ResizeHandler.register(this, this._handleResize);
-	}
+	onAfterRendering() {
+		if (!this.isOpen() && this.open) {
+			const opener = document.getElementById(this.opener);
+			if (!opener) {
+				console.warn("Valid opener id is required."); // eslint-disable-line
+				return;
+			}
 
-	onExitDOM() {
-		ResizeHandler.deregister(this, this._handleResize);
+			this.showAt(opener);
+		} else if (this.isOpen() && !this.open) {
+			this.close();
+		}
 	}
 
 	isOpenerClicked(event) {
@@ -365,7 +390,12 @@ class Popover extends Popup {
 			&& openerRect.right === 0;
 	}
 
-	handleResize() {
+	/**
+	 * @override
+	 */
+	_resize() {
+		super._resize();
+
 		if (this.opened) {
 			this.reposition();
 		}