@ui5/webcomponents 1.2.6 → 1.4.0

package/src/MenuItem.js

@@ -0,0 +1,162 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-menu-item",
+	properties: /** @lends sap.ui.webcomponents.main.MenuItem.prototype */ {
+		/**
+		 * Defines the text of the tree item.
+		 *
+		 * @type {String}
+		 * @defaultValue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+
+		/**
+		 * Defines the icon to be displayed as graphical element within the component.
+		 * The SAP-icons font provides numerous options.
+		 * <br><br>
+		 <b>* Example:</b>
+		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		icon: {
+			type: String,
+		},
+
+		/**
+		 * Defines whether a visual separator should be rendered before the item.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		startsSection: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether <code>ui5-menu-item</code> is in disabled state.
+		 * <br><br>
+		 * <b>Note:</b> A disabled <code>ui5-menu-item</code> is noninteractive.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the any of the element siblings have children items.
+		 * @type {boolean}
+		 * @private
+		 */
+		 _siblingsWithChildren: {
+			type: Boolean,
+			noAttribute: true,
+		},
+
+		/**
+		 * Indicates if the any of the element siblings have icon.
+		 * @type {boolean}
+		 * @private
+		 */
+		 _siblingsWithIcon: {
+			type: Boolean,
+			noAttribute: true,
+		},
+
+		/**
+		 * Stores Menu object with submenu items
+		 * @type {object}
+		 * @private
+		 */
+		 _subMenu: {
+			type: Object,
+		},
+
+		/**
+		 * Defines whether the submenu closing must be prevented
+		 * @type {boolean}
+		 * @private
+		 */
+		 _preventSubMenuClose: {
+			type: Boolean,
+			noAttribute: true,
+		},
+	},
+	managedSlots: true,
+	slots: /** @lends sap.ui.webcomponents.main.MenuItem.prototype */ {
+		/**
+		 * Defines the items of this component.
+		 *
+		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
+		 * @slot items
+		 * @public
+		 */
+		 "default": {
+			propertyName: "items",
+			type: HTMLElement,
+			invalidateOnChildChange: true,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * <code>ui5-menu-item</code> is the item to use inside a <code>ui5-menu</code>.
+ * An arbitrary hierarchy structure can be represented by recursively nesting menu items.
+ *
+ * <h3>Usage</h3>
+ *
+ * <code>ui5-menu-item</code> is an abstract element, representing a node in a <code>ui5-menu</code>. The menu itself is rendered as a list,
+ * and each <code>ui5-menu-item</code> is represented by a list item (<code>ui5-li</code>) in that list. Therefore, you should only use
+ * <code>ui5-menu-item</code> directly in your apps. The <code>ui5-li</code> list item is internal for the list, and not intended for public use.
+ *
+ * For the <code>ui5-menu-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/MenuItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.MenuItem
+ * @extends UI5Element
+ * @tagname ui5-menu-item
+ * @implements sap.ui.webcomponents.main.IMenuItem
+ * @since 1.3.0
+ * @public
+ */
+class MenuItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	get hasChildren() {
+		return !!this.items.length;
+	}
+
+	get hasDummyIcon() {
+		return this._siblingsWithIcon && !this.icon;
+	}
+
+	get subMenuOpened() {
+		return !!Object.keys(this._subMenu).length;
+	}
+}
+
+MenuItem.define();
+
+export default MenuItem;

package/src/MessageStrip.hbs

@@ -1,7 +1,6 @@
 <div class="{{classes.root}}"
 	id="{{_id}}"
 	role="note"
-	dir="{{effectiveDir}}"
 	aria-live="assertive"
 	aria-labelledby="{{_id}}"
 >

package/src/MultiComboBox.hbs

@@ -1,4 +1,4 @@
-<div class="ui5-multi-combobox-root"
+<div class="ui5-multi-combobox-root ui5-input-focusable-element"
 >
 	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 
@@ -52,12 +52,9 @@
 		aria-autocomplete="both"
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
+		aria-label="{{ariaLabelText}}"
 	/>
 
-	{{#if readonly}}
-		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
-	{{/if}}
-
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}
@@ -67,11 +64,10 @@
 			input-icon
 			slot="icon"
 			tabindex="-1"
-			@click="{{togglePopover}}"
+			@click="{{togglePopoverByDropdownIcon}}"
 			@mousedown="{{_onIconMousedown}}"
 			@focusin="{{_forwardFocusToInner}}"
 			?pressed="{{open}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}

package/src/MultiComboBox.js

@@ -7,13 +7,26 @@ import {
 	isDown,
 	isUp,
 	isSpace,
+	isSpaceCtrl,
+	isSpaceShift,
 	isRight,
 	isHome,
+	isEnd,
 	isTabNext,
 	isTabPrevious,
+	isUpShift,
+	isDownShift,
+	isLeftCtrl,
+	isRightCtrl,
+	isUpCtrl,
+	isDownCtrl,
 	isHomeCtrl,
 	isEndCtrl,
 	isCtrlA,
+	isCtrlV,
+	isDeleteShift,
+	isInsertShift,
+	isInsertCtrl,
 } 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";
@@ -26,6 +39,8 @@ 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 { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -35,9 +50,8 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import StandardListItem from "./StandardListItem.js";
 import ToggleButton from "./ToggleButton.js";
-import * as Filters from "./ComboBoxFilters.js";
+import * as Filters from "./Filters.js";
 import Button from "./Button.js";
-
 import {
 	VALUE_STATE_SUCCESS,
 	VALUE_STATE_ERROR,
@@ -58,6 +72,7 @@ import styles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
+import MultiComboBoxPopover from "./generated/themes/MultiComboBoxPopover.css.js";
 
 /**
  * @public
@@ -233,6 +248,32 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.4.0
+		 */
+		accessibleName: {
+			type: String,
+			defaultValue: undefined,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.4.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_filteredItems: {
 			type: Object,
 		},
@@ -391,7 +432,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss, MultiComboBoxPopover];
 	}
 
 	static get dependencies() {
@@ -420,6 +461,7 @@ class MultiComboBox extends UI5Element {
 		this._validationTimeout = null;
 		this._handleResizeBound = this._handleResize.bind(this);
 		this.currentItemIdx = -1;
+		this.FormSupport = undefined;
 	}
 
 	onEnterDOM() {
@@ -442,6 +484,11 @@ class MultiComboBox extends UI5Element {
 		this.allItemsPopover.toggle(this);
 	}
 
+	togglePopoverByDropdownIcon() {
+		this._shouldFilterItems = false;
+		this.allItemsPopover.toggle(this);
+	}
+
 	_showFilteredItems() {
 		this.filterSelected = true;
 		this._showMorePressed = true;
@@ -468,6 +515,8 @@ class MultiComboBox extends UI5Element {
 		const filteredItems = this._filterItems(value);
 		const oldValueState = this.valueState;
 
+		this._shouldFilterItems = true;
+
 		if (this.filterSelected) {
 			this.filterSelected = false;
 		}
@@ -524,7 +573,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get _getPlaceholder() {
-		if (this._tokenizer && this._tokenizer.tokens.length) {
+		if (this._getSelectedItems().length) {
 			return "";
 		}
 
@@ -533,8 +582,9 @@ class MultiComboBox extends UI5Element {
 
 	_handleArrowLeft() {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
+		const isTextSelected = this.getDomRef().querySelector(`input`).selectionEnd - cursorPosition > 0;
 
-		if (cursorPosition === 0) {
+		if (cursorPosition === 0 && !isTextSelected) {
 			this._tokenizer._focusLastToken();
 		}
 	}
@@ -573,20 +623,102 @@ class MultiComboBox extends UI5Element {
 	}
 
 	async _onkeydown(event) {
-		if (isShow(event) && !this.readonly && !this.disabled) {
+		const isArrowDownCtrl = isDownCtrl(event);
+
+		if (isShow(event) && !this.disabled) {
+			this._handleShow(event);
+			return;
+		}
+
+		if (isDownShift(event) || isUpShift(event)) {
 			event.preventDefault();
-			this.togglePopover();
+			return;
 		}
 
-		if (isUp(event) || isDown(event)) {
-			this._handleArrowNavigation(event);
+		if (isUp(event) || isDown(event) || isUpCtrl(event) || isArrowDownCtrl) {
+			this._handleArrowNavigation(event, isArrowDownCtrl);
 			return;
 		}
 
+		// CTRL + Arrow Down navigation is performed by the ItemNavigation module of the List,
+		// here we only implement the text selection of the selected item
+		if (isArrowDownCtrl && !this.allItemsPopover.opened) {
+			setTimeout(() => this._inputDom.setSelectionRange(0, this._inputDom.value.length), 0);
+		}
+
+		if (isLeftCtrl(event) || isRightCtrl(event)) {
+			this._handleArrowCtrl(event);
+			return;
+		}
+
+		if (isCtrlV(event) || isInsertShift(event)) {
+			this._handlePaste(event);
+			return;
+		}
+
+		if (isSpaceShift(event)) {
+			event.preventDefault();
+		}
+
 		this._keyDown = true;
 		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
 	}
 
+	async _handlePaste(event) {
+		const pastedText = await navigator.clipboard.readText();
+
+		if (!pastedText) {
+			return;
+		}
+
+		const separatedText = pastedText.split(/\r\n|\r|\n/g);
+		const matchingItems = this.items.filter(item => separatedText.indexOf(item.text) > -1 && !item.selected);
+
+		if (matchingItems.length) {
+			matchingItems.forEach(item => {
+				item.selected = true;
+				this.value = "";
+				this.fireSelectionChange();
+			});
+		} else {
+			this.value = pastedText;
+			this.fireEvent("input");
+		}
+	}
+
+	_handleShow(event) {
+		const items = this.items;
+		const selectedItem = this._getSelectedItems()[0];
+		const focusedToken = this._tokenizer.tokens.find(token => token.focused);
+		const value = this.value;
+		const matchingItem = this.items.find(item => item.text.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
+
+		event.preventDefault();
+
+		if (this.readonly) {
+			return;
+		}
+
+		this._isOpenedByKeyboard = true;
+		this._shouldFilterItems = false;
+		this._filteredItems = this.items;
+
+		this.togglePopover();
+
+		if (!focusedToken && matchingItem) {
+			this._itemToFocus = matchingItem;
+			return;
+		}
+
+		if (selectedItem && !focusedToken) {
+			this._itemToFocus = selectedItem;
+		} else if (focusedToken && event.target === focusedToken) {
+			this._itemToFocus = items.find(item => item.text === focusedToken.text);
+		} else {
+			this._itemToFocus = items[0];
+		}
+	}
+
 	_handlePageUp(event) {
 		event.preventDefault();
 	}
@@ -654,17 +786,22 @@ class MultiComboBox extends UI5Element {
 
 		event.preventDefault();
 
-		if (isArrowDown) {
+		if (isArrowDown || isDownCtrl(event)) {
 			this._handleArrowDown(event);
 		}
 
-		if (isArrowUp) {
+		if (isArrowUp || isUpCtrl(event)) {
 			this._inputDom.focus();
 		}
 	}
 
-	_onItemKeydown(event) {
+	async _onItemKeydown(event) {
 		const isFirstItem = this.list.items[0] === event.target;
+		const isArrowUp = isUp(event) || isUpCtrl(event);
+
+		if (this.hasValueStateMessage && !this.valueStateHeader) {
+			await this._setValueStateHeader();
+		}
 
 		if (isTabNext(event) || isTabPrevious(event)) {
 			this._onItemTab(event);
@@ -683,27 +820,59 @@ class MultiComboBox extends UI5Element {
 
 		event.preventDefault();
 
+		if (isDownShift(event) || isUpShift(event)) {
+			this._handleItemRangeSelection(event);
+			return;
+		}
+
+		if ((isUpCtrl(event)) && !isFirstItem) {
+			this.list._itemNavigation._handleUp(event);
+			this.list.items[this.list._itemNavigation._currentIndex].focus();
+		}
+
+		if (isDownCtrl(event)) {
+			this.list._itemNavigation._handleDown(event);
+			this.list.items[this.list._itemNavigation._currentIndex].focus();
+		}
+
+		if (isShow(event)) {
+			this.togglePopover();
+		}
+
 		if (isCtrlA(event)) {
 			this._handleSelectAll(event);
 			return;
 		}
 
-		if (((isUp(event) && isFirstItem) || isHome(event)) && this.valueStateHeader) {
+		if (((isArrowUp && isFirstItem) || isHome(event)) && this.valueStateHeader) {
 			this.valueStateHeader.focus();
 		}
 
-		if (!this.valueStateHeader && isUp(event) && isFirstItem) {
+		if (!this.valueStateHeader && isFirstItem && isArrowUp) {
 			this._inputDom.focus();
 		}
 	}
 
+	_handleArrowCtrl(event) {
+		const input = this._inputDom;
+		const isArrowLeft = isLeftCtrl(event);
+
+		if (isArrowLeft && input.selectionStart === 0 && input.selectionEnd === 0) {
+			event.preventDefault();
+		}
+
+		if (isArrowLeft && ((input.selectionEnd - input.selectionStart) > 0)) {
+			input.setSelectionRange(0, 0);
+		}
+	}
+
 	_onItemTab(event) {
 		this._inputDom.focus();
 		this.allItemsPopover.close();
 	}
 
-	async _handleArrowNavigation(event) {
-		const isArrowDown = isDown(event);
+	async _handleArrowNavigation(event, isDownControl) {
+		const isArrowDown = isDownControl || isDown(event);
 		const hasSuggestions = this.items.length;
 		const isOpen = this.allItemsPopover.opened;
 
@@ -713,12 +882,12 @@ class MultiComboBox extends UI5Element {
 			await this._setValueStateHeader();
 		}
 
-		if (isArrowDown && isOpen && this.focused && this.valueStateHeader) {
+		if (isArrowDown && isOpen && this.valueStateHeader) {
 			this.valueStateHeader.focus();
 			return;
 		}
 
-		if (isArrowDown && this.focused && hasSuggestions) {
+		if (isArrowDown && hasSuggestions) {
 			this._handleArrowDown(event);
 		}
 
@@ -739,6 +908,26 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	_handleItemRangeSelection(event) {
+		const items = this.items;
+		const listItems = this.list.items;
+		const currentItemIdx = listItems.indexOf(event.target);
+		const nextItemIdx = currentItemIdx + 1;
+		const prevItemIdx = currentItemIdx - 1;
+
+		if (isDownShift(event) && items[nextItemIdx]) {
+			items[nextItemIdx].selected = items[currentItemIdx].selected;
+			items[nextItemIdx].focus();
+		}
+
+		if (isUpShift(event) && items[prevItemIdx]) {
+			items[prevItemIdx].selected = items[currentItemIdx].selected;
+			items[prevItemIdx].focus();
+		}
+
+		this.fireSelectionChange();
+	}
+
 	_navigateToNextItem() {
 		const items = this.items;
 		const itemsCount = items.length;
@@ -810,6 +999,10 @@ class MultiComboBox extends UI5Element {
 		const matchingItem = this.items.find(item => item.text.toLowerCase() === lowerCaseValue);
 		const oldValueState = this.valueState;
 
+		if (this.FormSupport) {
+			this.FormSupport.triggerFormSubmit(this);
+		}
+
 		if (matchingItem) {
 			if (matchingItem.selected) {
 				if (this._validationTimeout) {
@@ -841,31 +1034,69 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_onTokenizerKeydown(event) {
+		const isCtrl = !!(event.metaKey || event.ctrlKey);
+
 		if (isRight(event)) {
 			const lastTokenIndex = this._tokenizer.tokens.length - 1;
 
-			if (this._tokenizer.tokens[lastTokenIndex] === document.activeElement.shadowRoot.activeElement) {
+			if (event.target === this._tokenizer.tokens[lastTokenIndex]) {
 				setTimeout(() => {
 					this.shadowRoot.querySelector("input").focus();
 				}, 0);
 			}
 		}
 
-		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
+		if ((isCtrl && ["c", "x"].includes(event.key.toLowerCase())) || isDeleteShift(event) || isInsertCtrl(event)) {
+			event.preventDefault();
+
+			const isCut = event.key.toLowerCase() === "x" || isDeleteShift(event);
+			const selectedTokens = this._tokenizer.tokens.filter(token => token.selected);
+
+			if (isCut) {
+				const cutResult = this._tokenizer._fillClipboard("cut", selectedTokens);
+				selectedTokens.forEach(token => {
+					this._tokenizer._tokenDelete(event, token);
+				});
+
+				this.focus();
+				return cutResult;
+			}
+			return this._tokenizer._fillClipboard("copy", selectedTokens);
+		}
+
+		if (isCtrlV(event) || isInsertShift(event)) {
+			this._handlePaste(event);
+		}
+
+		if (isHome(event)) {
+			this._handleHome(event);
+		}
+
+		if (isEnd(event)) {
+			this._handleEnd(event);
+		}
+
+		if (isShow(event) && !this.readonly && !this.disabled) {
+			this._handleShow(event);
+		}
 	}
 
 	_filterItems(str) {
-		return (Filters[this.filter] || Filters.StartsWithPerTerm)(str, this.items);
+		return (Filters[this.filter] || Filters.StartsWithPerTerm)(str, this.items, "text");
 	}
 
 	_afterOpenPicker() {
 		this._toggle();
 
-		if (!isPhone()) {
+		if (!isPhone() && !this._isOpenedByKeyboard) {
 			this._innerInput.focus();
+		} else if (this._isOpenedByKeyboard) {
+			this._itemToFocus.focus();
 		} else {
 			this.allItemsPopover.focus();
 		}
+
+		this._isOpenedByKeyboard = false;
 	}
 
 	_toggle() {
@@ -888,7 +1119,7 @@ class MultiComboBox extends UI5Element {
 			this.fireSelectionChange();
 		}
 
-		if (!event.detail.selectionComponentPressed && !isSpace(event.detail)) {
+		if (!event.detail.selectionComponentPressed && !isSpace(event.detail) && !isSpaceCtrl(event.detail)) {
 			this.allItemsPopover.close();
 			this.value = "";
 
@@ -964,6 +1195,7 @@ class MultiComboBox extends UI5Element {
 
 	onBeforeRendering() {
 		const input = this.shadowRoot.querySelector("input");
+		this.FormSupport = getFeature("FormSupport");
 		this._inputLastValue = this.value;
 
 		if (input && !input.value) {
@@ -974,8 +1206,11 @@ class MultiComboBox extends UI5Element {
 			item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
-		const filteredItems = this._filterItems(this.value);
-		this._filteredItems = filteredItems;
+		if (this._shouldFilterItems) {
+			this._filteredItems = this._filterItems(this.value);
+		} else {
+			this._filteredItems = this.items;
+		}
 	}
 
 	async onAfterRendering() {
@@ -1087,10 +1322,6 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
-	_readonlyIconClick() {
-		this._inputDom.focus();
-	}
-
 	get editable() {
 		return !this.readonly;
 	}
@@ -1133,6 +1364,10 @@ class MultiComboBox extends UI5Element {
 		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	/**
 	 * This method is relevant for sap_horizon theme only
 	 */