@ui5/webcomponents 1.3.1 → 1.6.0

package/dist/ListItemBase.js

@@ -10,7 +10,7 @@ import styles from "./generated/themes/ListItemBase.css.js";
  * @public
  */
 const metadata = {
-	properties: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.ListItemBase.prototype */  {
 
 		/**
 		 * Defines the selected state of the <code>ListItem</code>.
@@ -57,7 +57,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
+	events: /** @lends sap.ui.webcomponents.main.ListItemBase.prototype */  {
 		_focused: {},
 		"_forward-after": {},
 		"_forward-before": {},

package/dist/Menu.js

@@ -118,6 +118,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
 		/**
 		 * Defines the items of this component.
+		 * <br><br>
+		 * <b>Note:</b> Use <code>ui5-menu-item</code> for the intended design.
 		 *
 		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
 		 * @slot items

package/dist/MenuItem.js

@@ -99,7 +99,7 @@ const metadata = {
 		/**
 		 * Defines the items of this component.
 		 *
-		 * @type {sap.ui.webcomponents.main.MenuItem[]}
+		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -125,7 +125,6 @@ const metadata = {
  * 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>

package/dist/MonthPicker.js

@@ -1,4 +1,6 @@
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import {
 	isEnter,
@@ -19,12 +21,13 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import CalendarPart from "./CalendarPart.js";
 import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
 import styles from "./generated/themes/MonthPicker.css.js";
+
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-monthpicker",
-	properties: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ {
 		/**
 		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
 		 * @type {Array}
@@ -46,7 +49,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ {
 		/**
 		 * Fired when the user selects a month (space/enter/click).
 		 * @public
@@ -103,7 +106,7 @@ class MonthPicker extends CalendarPart {
 		}
 
 		const localeData = getCachedLocaleDataInstance(getLocale());
-		const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
+		const monthsNames = localeData.getMonthsStandAlone("wide", this._primaryCalendarType);
 
 		const months = [];
 		const calendarDate = this._calendarDate; // store the value of the expensive getter
@@ -131,6 +134,7 @@ class MonthPicker extends CalendarPart {
 				selected: isSelected,
 				ariaSelected: isSelected ? "true" : "false",
 				name: monthsNames[i],
+				nameInSecType: this.secondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text,
 				disabled: isDisabled,
 				classes: "ui5-mp-item",
 			};
@@ -155,6 +159,11 @@ class MonthPicker extends CalendarPart {
 		this._months = months;
 	}
 
+	_getDisplayedSecondaryMonthText(timestamp) {
+		const monthsName = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp);
+		return convertMonthNumbersToMonthNames(monthsName.firstDate.getMonth(), monthsName.lastDate.getMonth(), this.secondaryCalendarType);
+	}
+
 	onAfterRendering() {
 		if (!this._hidden) {
 			this.focus();

package/dist/MultiComboBox.js

@@ -27,10 +27,17 @@ import {
 	isDeleteShift,
 	isInsertShift,
 	isInsertCtrl,
+	isBackSpace,
+	isDelete,
+	isEscape,
+	isEnter,
 } 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";
-import { isIE, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+	isPhone,
+	isAndroid,
+} from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/multiselect-all.js";
@@ -40,7 +47,10 @@ 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 MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
@@ -49,14 +59,17 @@ 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,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_INFORMATION,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
@@ -72,6 +85,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
@@ -138,6 +152,18 @@ const metadata = {
 			defaultValue: "",
 		},
 
+		/**
+		 * Defines whether the value will be autcompleted to match an item
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.4.0
+		 */
+		 noTypeahead: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines a short hint intended to aid the user with data entry when the
 		 * component has no value.
@@ -247,6 +273,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,
 		},
@@ -380,7 +432,7 @@ const metadata = {
  * @extends UI5Element
  * @tagname ui5-multi-combobox
  * @public
- * @appenddocs MultiComboBoxItem
+ * @appenddocs MultiComboBoxItem MultiComboBoxGroupItem
  * @since 0.11.0
  */
 class MultiComboBox extends UI5Element {
@@ -405,12 +457,13 @@ class MultiComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss, MultiComboBoxPopover];
 	}
 
 	static get dependencies() {
 		return [
 			MultiComboBoxItem,
+			MultiComboBoxGroupItem,
 			Tokenizer,
 			Token,
 			Icon,
@@ -418,6 +471,7 @@ class MultiComboBox extends UI5Element {
 			Popover,
 			List,
 			StandardListItem,
+			GroupHeaderListItem,
 			ToggleButton,
 			Button,
 		];
@@ -433,6 +487,7 @@ class MultiComboBox extends UI5Element {
 		this._deleting = false;
 		this._validationTimeout = null;
 		this._handleResizeBound = this._handleResize.bind(this);
+		this.valueBeforeAutoComplete = "";
 		this.currentItemIdx = -1;
 		this.FormSupport = undefined;
 	}
@@ -471,7 +526,8 @@ class MultiComboBox extends UI5Element {
 
 	filterSelectedItems(event) {
 		this.filterSelected = event.target.pressed;
-		this.selectedItems = this._filteredItems.filter(item => item.selected);
+		const selectedItems = this._filteredItems.filter(item => item.selected);
+		this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
 	}
 
 	get _showAllItemsButtonPressed() {
@@ -494,27 +550,16 @@ class MultiComboBox extends UI5Element {
 			this.filterSelected = false;
 		}
 
-		/* skip calling change event when an input with a placeholder is focused on IE
-			- value of the host and the internal input should be differnt in case of actual input
-			- input is called when a key is pressed => keyup should not be called yet
-		*/
-		const skipFiring = (this._inputDom.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
-
-		if (skipFiring) {
-			event.preventDefault();
-
-			return;
-		}
-
 		if (this._validationTimeout) {
 			input.value = this._inputLastValue;
 			return;
 		}
 
 		if (!filteredItems.length && value && !this.allowCustomValues) {
-			input.value = this._inputLastValue;
+			input.value = this.valueBeforeAutoComplete || this._inputLastValue;
 			this.valueState = "Error";
 
+			this._shouldAutocomplete = false;
 			this._resetValueState(oldValueState);
 
 			return;
@@ -591,10 +636,6 @@ class MultiComboBox extends UI5Element {
 		this.focused = false;
 	}
 
-	_onkeyup() {
-		this._keyDown = false;
-	}
-
 	async _onkeydown(event) {
 		const isArrowDownCtrl = isDownCtrl(event);
 
@@ -633,8 +674,8 @@ class MultiComboBox extends UI5Element {
 			event.preventDefault();
 		}
 
-		this._keyDown = true;
 		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
+		this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(event) || isDelete(event) || isEscape(event) || isEnter(event));
 	}
 
 	async _handlePaste(event) {
@@ -708,6 +749,13 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_handleEscape(event) {
+		const innerInput = this._innerInput;
+		const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
+
+		if (isAutoCompleted) {
+			this.value = this.valueBeforeAutoComplete;
+		}
+
 		if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
 			this.value = this._lastValue;
 		}
@@ -764,6 +812,7 @@ class MultiComboBox extends UI5Element {
 		}
 
 		if (isArrowUp || isUpCtrl(event)) {
+			this._shouldAutocomplete = true;
 			this._inputDom.focus();
 		}
 	}
@@ -823,6 +872,7 @@ class MultiComboBox extends UI5Element {
 
 		if (!this.valueStateHeader && isFirstItem && isArrowUp) {
 			this._inputDom.focus();
+			this._shouldAutocomplete = true;
 		}
 	}
 
@@ -856,6 +906,7 @@ class MultiComboBox extends UI5Element {
 		}
 
 		if (isArrowDown && isOpen && this.valueStateHeader) {
+			this.value = this.valueBeforeAutoComplete || this.value;
 			this.valueStateHeader.focus();
 			return;
 		}
@@ -875,6 +926,7 @@ class MultiComboBox extends UI5Element {
 
 		if (isOpen) {
 			this.list._itemNavigation.setCurrentItem(firstListItem);
+			this.value = this.valueBeforeAutoComplete || this.value;
 			firstListItem.focus();
 		} else if (!this.readonly) {
 			this._navigateToNextItem();
@@ -916,11 +968,11 @@ class MultiComboBox extends UI5Element {
 
 		let currentItem = this.items[++this.currentItemIdx];
 
-		while (this.currentItemIdx < itemsCount - 1 && currentItem.selected) {
+		while ((this.currentItemIdx < itemsCount - 1 && currentItem.selected) || currentItem.isGroupItem) {
 			currentItem = this.items[++this.currentItemIdx];
 		}
 
-		if (currentItem.selected === true) {
+		if (currentItem.selected === true || currentItem.isGroupItem) {
 			this.currentItemIdx = previousItemIdx;
 			return;
 		}
@@ -949,7 +1001,7 @@ class MultiComboBox extends UI5Element {
 
 		let currentItem = this.items[--this.currentItemIdx];
 
-		while (currentItem && currentItem.selected && this.currentItemIdx > 0) {
+		while ((currentItem && this.currentItemIdx > 0) && (currentItem.selected || currentItem.isGroupItem)) {
 			currentItem = this.items[--this.currentItemIdx];
 		}
 
@@ -957,7 +1009,7 @@ class MultiComboBox extends UI5Element {
 			return;
 		}
 
-		if (currentItem.selected) {
+		if (currentItem.selected || currentItem.isGroupItem) {
 			this.currentItemIdx = previousItemIdx;
 			return;
 		}
@@ -971,6 +1023,7 @@ class MultiComboBox extends UI5Element {
 		const lowerCaseValue = this.value.toLowerCase();
 		const matchingItem = this.items.find(item => item.text.toLowerCase() === lowerCaseValue);
 		const oldValueState = this.valueState;
+		const innerInput = this._innerInput;
 
 		if (this.FormSupport) {
 			this.FormSupport.triggerFormSubmit(this);
@@ -993,6 +1046,7 @@ class MultiComboBox extends UI5Element {
 				this.fireSelectionChange();
 			}
 
+			innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
 			this.allItemsPopover.close();
 		}
 	}
@@ -1055,7 +1109,29 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_filterItems(str) {
-		return (Filters[this.filter] || Filters.StartsWithPerTerm)(str, this.items);
+		const itemsToFilter = this.items.filter(item => !item.isGroupItem);
+		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
+
+		// Return the filtered items and their group items
+		return this.items.filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
+	}
+
+	/**
+	 * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
+	 *
+	 * @private
+	 */
+	 static _groupItemFilter(item, idx, allItems, filteredItems) {
+		if (item.isGroupItem) {
+			let groupHasFilteredItems;
+
+			while (allItems[idx] && !allItems[idx].isGroupItem && !groupHasFilteredItems) {
+				groupHasFilteredItems = filteredItems.indexOf(allItems[idx]) !== -1;
+				idx++;
+			}
+
+			return groupHasFilteredItems;
+		}
 	}
 
 	_afterOpenPicker() {
@@ -1103,6 +1179,8 @@ class MultiComboBox extends UI5Element {
 
 			this.fireEvent("input");
 		}
+
+		this.value = this.valueBeforeAutoComplete || "";
 	}
 
 	syncItems(listItems) {
@@ -1162,16 +1240,54 @@ class MultiComboBox extends UI5Element {
 		this._valueBeforeOpen = this.value;
 
 		if (this.filterSelected) {
-			this.selectedItems = this._filteredItems.filter(item => item.selected);
+			const selectedItems = this._filteredItems.filter(item => item.selected);
+			this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
+		}
+	}
+
+	_handleTypeAhead(item, filterValue) {
+		if (!item) {
+			return;
 		}
+
+		const value = item.text;
+		const innerInput = this._innerInput;
+
+		filterValue = filterValue || "";
+		this.value = value;
+
+		innerInput.value = value;
+		innerInput.setSelectionRange(filterValue.length, value.length);
+
+		this._shouldAutocomplete = false;
+	}
+
+	_getFirstMatchingItem(current) {
+		if (!this.items.length) {
+			return;
+		}
+
+		const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem && !item.selected);
+
+		if (matchingItems.length) {
+			return matchingItems[0];
+		}
+	}
+
+	_startsWithMatchingItems(str) {
+		return Filters.StartsWith(str, this.items, "text");
 	}
 
 	onBeforeRendering() {
-		const input = this.shadowRoot.querySelector("input");
+		const input = this._innerInput;
+		const autoCompletedChars = input && input.selectionEnd - input.selectionStart;
+		const value = input && input.value;
+
 		this.FormSupport = getFeature("FormSupport");
-		this._inputLastValue = this.value;
+		this._inputLastValue = value;
 
 		if (input && !input.value) {
+			this.valueBeforeAutoComplete = "";
 			this._filteredItems = this.items;
 		}
 
@@ -1179,8 +1295,22 @@ class MultiComboBox extends UI5Element {
 			item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
+		if (!input || !value) {
+			return;
+		}
+
+		// Typehead causes issues on Android devices, so we disable it for now
+		// If there is already a selection the autocomplete has already been performed
+		if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars) {
+			const item = this._getFirstMatchingItem(value);
+
+			// Keep the original typed in text intact
+			this.valueBeforeAutoComplete = value;
+			this._handleTypeAhead(item, value);
+		}
+
 		if (this._shouldFilterItems) {
-			this._filteredItems = this._filterItems(this.value);
+			this._filteredItems = this._filterItems(this._shouldAutocomplete || !!autoCompletedChars ? this.valueBeforeAutoComplete : value);
 		} else {
 			this._filteredItems = this.items;
 		}
@@ -1273,15 +1403,19 @@ class MultiComboBox extends UI5Element {
 		return this.shadowRoot.querySelector("[ui5-tokenizer]");
 	}
 
-	inputFocusIn() {
+	inputFocusIn(event) {
 		if (!isPhone() || this.readonly) {
 			this.focused = true;
 		} else {
 			this._innerInput.blur();
 		}
 
-		!isPhone() && this._innerInput.setSelectionRange(0, this.value.length);
+		if (!isPhone() && ((event.relatedTarget && event.relatedTarget.tagName !== "UI5-STATIC-AREA-ITEM") || !event.relatedTarget)) {
+			this._innerInput.setSelectionRange(0, this.value.length);
+		}
+
 		this._lastValue = this.value;
+		this.valueBeforeAutoComplete = "";
 	}
 
 	inputFocusOut(event) {
@@ -1319,7 +1453,19 @@ class MultiComboBox extends UI5Element {
 		return this.hasValueState && this.valueState !== ValueState.Success;
 	}
 
-	get valueStateText() {
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+		}
+
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+	}
+
+	get valueStateDefaultText() {
 		let key = this.valueState;
 
 		if (this._performingSelectionTwice) {
@@ -1337,6 +1483,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
 	 */
@@ -1388,14 +1538,23 @@ class MultiComboBox extends UI5Element {
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	get _innerInput() {
 		if (isPhone()) {
-			if (this.allItemsPopover.opened) {
+			if (this.allItemsPopover && this.allItemsPopover.opened) {
 				return this.allItemsPopover.querySelector("input");
 			}
 		}
 
-		return this.getDomRef().querySelector("#ui5-multi-combobox-input");
+		return this.getDomRef() ? this.getDomRef().querySelector("#ui5-multi-combobox-input") : null;
 	}
 
 	get _headerTitleText() {
@@ -1437,6 +1596,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get styles() {
+		const remSizeIxPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 		return {
 			popoverValueStateMessage: {
 				"width": `${this._listWidth}px`,
@@ -1445,6 +1605,10 @@ class MultiComboBox extends UI5Element {
 			popoverHeader: {
 				"max-width": isPhone() ? "100%" : `${this._inputWidth}px`,
 			},
+			suggestionsPopover: {
+				"min-width": `${this._inputWidth}px`,
+				"max-width": (this._inputWidth / remSizeIxPx) > 40 ? `${this._inputWidth}px` : "40rem",
+			},
 		};
 	}
 

package/dist/MultiComboBoxGroupItem.js

@@ -0,0 +1,67 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-mcb-group-item",
+	properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	},
+	events: /** @lends sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-mcb-group-item</code> is type of suggestion item,
+ * that can be used to split the <code>ui5-multi-combobox</code> suggestions into groups.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.MultiComboBoxGroupItem
+ * @extends UI5Element
+ * @tagname ui5-mcb-group-item
+ * @public
+ * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
+ * @since 1.4.0
+ */
+class MultiComboBoxGroupItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			GroupHeaderListItem,
+		];
+	}
+
+	/**
+	 * Used to avoid tag name checks
+	 * @protected
+	 */
+	get isGroupItem() {
+		return true;
+	}
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
+}
+
+MultiComboBoxGroupItem.define();
+
+export default MultiComboBoxGroupItem;

package/dist/MultiComboBoxItem.js

@@ -5,7 +5,7 @@ import ComboBoxItem from "./ComboBoxItem.js";
  */
 const metadata = {
 	tag: "ui5-mcb-item",
-	properties: /** @lends  sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ {
 		/**
 		 * Defines the selected state of the component.
 		 * @type {boolean}