@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/dist/MultiComboBox.js

@@ -13,7 +13,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isShow, isDown, isUp, isSpace, isSpaceCtrl, isSpaceShift, isRight, isHome, isEnd, isTabNext, isTabPrevious, isUpShift, isDownShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isHomeCtrl, isEndCtrl, isCtrlA, isInsertShift, isBackSpace, isDelete, isEscape, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isShow, isDown, isUp, isSpace, isSpaceCtrl, isSpaceShift, isRight, isHome, isEnd, isTabNext, isTabPrevious, isUpShift, isDownShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isHomeCtrl, isEndCtrl, isCtrlA, 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 { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
@@ -26,13 +26,13 @@ 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 { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
-import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
+import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
-import ListItemGroupHeader from "./ListItemGroupHeader.js";
-import Tokenizer from "./Tokenizer.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+import Tokenizer, { ClipboardDataOperation } from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
@@ -42,9 +42,10 @@ import StandardListItem from "./StandardListItem.js";
 import ToggleButton from "./ToggleButton.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, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, FORM_MIXED_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.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, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
+import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPopoverTemplate.lit.js";
 // Styles
 import multiCbxStyles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -54,7 +55,6 @@ import MultiComboBoxPopover from "./generated/themes/MultiComboBoxPopover.css.js
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import CheckBox from "./CheckBox.js";
 import Input from "./Input.js";
-import "./types/PopoverHorizontalAlign.js";
 import SuggestionItem from "./SuggestionItem.js";
 /**
  * @class
@@ -99,32 +99,9 @@ import SuggestionItem from "./SuggestionItem.js";
  * @csspart token-\{index\} - Used to style each token(where `token-0` corresponds to the first item)
  */
 let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
-    get formValidityMessage() {
-        return MultiComboBox_1.i18nBundle.getText(FORM_MIXED_TEXTFIELD_REQUIRED);
-    }
-    get formValidity() {
-        const selectedItems = (this.items || []).filter(item => item.selected);
-        return { valueMissing: this.required && !this.value && !selectedItems.length };
-    }
-    async formElementAnchor() {
-        return this.getFocusDomRefAsync();
-    }
-    get formFormattedValue() {
-        const selectedItems = (this.items || []).filter(item => item.selected);
-        if (selectedItems.length) {
-            const formData = new FormData();
-            formData.append(this.name, this.value);
-            for (let i = 0; i < selectedItems.length; i++) {
-                formData.append(this.name, selectedItems[i].text);
-            }
-            return formData;
-        }
-        return this.value;
-    }
     constructor() {
         super();
         this._filteredItems = [];
-        this.selectedItems = [];
         this._previouslySelectedItems = [];
         this.selectedValues = [];
         this._itemsBeforeOpen = [];
@@ -135,6 +112,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.valueBeforeAutoComplete = "";
         this._lastValue = this.getAttribute("value") || "";
         this.currentItemIdx = -1;
+        this.FormSupport = undefined;
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
@@ -146,13 +124,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._inputWidth = this.offsetWidth;
     }
     _handleMobileInput(e) {
-        if (!this._getRespPopover().open) {
-            return;
-        }
         const target = e.target;
         const value = target.value;
-        if (!this.noValidation && !this._filterItems(value).length) {
-            this._dialogInputValueState = ValueState.Negative;
+        if (!this.allowCustomValues && !this._filterItems(value).length) {
+            this._dialogInputValueState = ValueState.Error;
         }
         else {
             this._dialogInputValueState = this.valueState;
@@ -168,7 +143,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.fireEvent("change");
         }
     }
-    _mobileInputChange(e) {
+    async _mobileInputChange(e) {
         this._inputChange.call(this);
         const { value } = e.target;
         const matchingItem = this.items.find(item => item.text === value);
@@ -179,19 +154,18 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const changePrevented = this.fireSelectionChange();
         if (!changePrevented) {
             matchingItem.selected = !initiallySelected;
-            this._getResponsivePopover().preventFocusRestore = false;
-            this._getResponsivePopover().open = false;
+            (await this._getResponsivePopover()).close();
             this.value = "";
         }
     }
     _togglePopover() {
-        this._tokenizer.open = false;
-        this._getRespPopover().toggle(this);
+        this._tokenizer.closeMorePopover();
+        this.allItemsPopover?.toggle(this);
     }
     togglePopoverByDropdownIcon() {
         this._shouldFilterItems = false;
-        this._getRespPopover().toggle(this);
-        this._tokenizer.open = false;
+        this.allItemsPopover?.toggle(this);
+        this._tokenizer.closeMorePopover();
     }
     _showFilteredItems() {
         this.filterSelected = true;
@@ -237,11 +211,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         }
         this._effectiveValueState = this.valueState;
-        if (!filteredItems.length && value && !this.noValidation) {
+        if (!filteredItems.length && value && !this.allowCustomValues) {
             const newValue = this.valueBeforeAutoComplete || this._inputLastValue;
             input.value = newValue;
             this.value = newValue;
-            this.valueState = ValueState.Negative;
+            this.valueState = ValueState.Error;
             this._shouldAutocomplete = false;
             this._resetValueState(oldValueState);
             return;
@@ -251,11 +225,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._filteredItems = filteredItems;
         if (!isPhone()) {
             if (filteredItems.length === 0) {
-                this._getRespPopover().open = false;
+                this.allItemsPopover?.close();
             }
             else {
-                this._getRespPopover().opener = this;
-                this._getRespPopover().open = true;
+                this.allItemsPopover?.showAt(this);
             }
         }
         this.fireEvent("input");
@@ -294,7 +267,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const lastTokenBeingDeleted = tokensCount - 1 === 0 && this._deleting;
         const allTokensAreBeingDeleted = selectedTokens === tokensCount && this._deleting;
         const relatedTarget = e.relatedTarget;
-        if (!this.shadowRoot?.contains(relatedTarget)) {
+        const isFocusingPopover = this.staticAreaItem === relatedTarget;
+        const isFocusingInput = this._inputDom === relatedTarget;
+        const isFocusingMorePopover = e.relatedTarget === this._tokenizer.staticAreaItem;
+        if (!relatedTarget?.hasAttribute("ui5-token") && !isFocusingPopover && !isFocusingInput && !isFocusingMorePopover) {
             this._tokenizer.tokens.forEach(token => {
                 token.selected = false;
             });
@@ -312,7 +288,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _tokenizerFocusIn() {
         this._tokenizerFocused = true;
         this.focused = false;
-        this._tokenizer.scrollToEnd();
     }
     _onkeydown(e) {
         const isArrowDownCtrl = isDownCtrl(e);
@@ -331,7 +306,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         // 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._getRespPopover().open) {
+        if (isArrowDownCtrl && !this.allItemsPopover?.opened) {
             setTimeout(() => this._inputDom.setSelectionRange(0, this._inputDom.value.length), 0);
         }
         if (isLeftCtrl(e) || isRightCtrl(e)) {
@@ -449,7 +424,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (isAutoCompleted) {
             this.value = this.valueBeforeAutoComplete;
         }
-        if (!this.noValidation || (!this.open && this.noValidation)) {
+        if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
             this.value = this._lastValue;
         }
     }
@@ -470,7 +445,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _handleTab() {
-        this._getRespPopover().open = false;
+        this.allItemsPopover?.close();
     }
     _handleSelectAll() {
         const filteredItems = this._filteredItems;
@@ -495,7 +470,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         e.preventDefault();
         if (isArrowDown || isDownCtrl(e)) {
             if (this.showSelectAll && !isSelectAllFocused) {
-                return this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
+                return (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
             }
             this._handleArrowDown();
         }
@@ -528,11 +503,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         }
     }
-    _onItemKeydown(e) {
+    async _onItemKeydown(e) {
         const isFirstItem = this.list?.items[0] === e.target;
         const isArrowUp = isUp(e) || isUpCtrl(e);
         if (this.hasValueStateMessage && !this.valueStateHeader) {
-            this._setValueStateHeader();
+            await this._setValueStateHeader();
         }
         if (isTabNext(e) || isTabPrevious(e)) {
             this._onItemTab();
@@ -568,7 +543,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         if (isFirstItem && isArrowUp) {
             if (this.showSelectAll) {
-                this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
+                (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
             }
             else if (this.valueStateHeader) {
                 this.valueStateHeader.focus();
@@ -591,15 +566,15 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _onItemTab() {
         this._inputDom.focus();
-        this._getRespPopover().open = false;
+        this.allItemsPopover?.close();
     }
-    _handleArrowNavigation(e, isDownControl) {
+    async _handleArrowNavigation(e, isDownControl) {
         const isArrowDown = isDownControl || isDown(e);
         const hasSuggestions = this.items.length;
-        const isOpen = this._getRespPopover().open;
+        const isOpen = this.allItemsPopover?.opened;
         e.preventDefault();
         if (this.hasValueStateMessage && !this.valueStateHeader) {
-            this._setValueStateHeader();
+            await this._setValueStateHeader();
         }
         if (isArrowDown && isOpen) {
             if (this.valueStateHeader) {
@@ -608,7 +583,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 return;
             }
             if (this.showSelectAll) {
-                this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
+                (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
                 return;
             }
         }
@@ -620,8 +595,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     async _handleArrowDown() {
-        const isOpen = this._getRespPopover().open;
-        const firstListItem = this.list?.listItems[0];
+        const isOpen = this.allItemsPopover?.opened;
+        const firstListItem = this.list?.items[0];
         if (isOpen) {
             firstListItem && this.list?._itemNavigation.setCurrentItem(firstListItem);
             this.value = this.valueBeforeAutoComplete || this.value;
@@ -708,15 +683,15 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const matchingItem = this.items.find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
         const oldValueState = this.valueState;
         const innerInput = this._innerInput;
-        if (this._internals?.form) {
-            submitForm(this);
+        if (this.FormSupport) {
+            this.FormSupport.triggerFormSubmit(this);
         }
         if (matchingItem) {
             if (matchingItem.selected) {
                 if (this._validationTimeout) {
                     return;
                 }
-                this.valueState = ValueState.Negative;
+                this.valueState = ValueState.Error;
                 this._performingSelectionTwice = true;
                 this._resetValueState(oldValueState, () => {
                     this._performingSelectionTwice = false;
@@ -732,7 +707,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 }
             }
             innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
-            this._getRespPopover().open = false;
+            this.allItemsPopover?.close();
         }
     }
     _resetValueState(valueState, callback) {
@@ -745,6 +720,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }, 2000);
     }
     _onTokenizerKeydown(e) {
+        const isCtrl = !!(e.metaKey || e.ctrlKey);
         if (isRight(e)) {
             const lastTokenIndex = this._tokenizer.tokens.length - this._tokenizer.overflownTokens.length - 1;
             if (e.target === this._tokenizer.tokens[lastTokenIndex]) {
@@ -753,6 +729,20 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 }, 0);
             }
         }
+        if ((isCtrl && ["c", "x"].includes(e.key.toLowerCase())) || isDeleteShift(e) || isInsertCtrl(e)) {
+            e.preventDefault();
+            const isCut = e.key.toLowerCase() === "x" || isDeleteShift(e);
+            const selectedTokens = this._tokenizer.tokens.filter(token => token.selected);
+            if (isCut) {
+                const cutResult = this._tokenizer._fillClipboard(ClipboardDataOperation.cut, selectedTokens);
+                selectedTokens.forEach(token => {
+                    this._tokenizer.deleteToken(token);
+                });
+                this.focus();
+                return cutResult;
+            }
+            return this._tokenizer._fillClipboard(ClipboardDataOperation.copy, selectedTokens);
+        }
         if (isInsertShift(e)) {
             this._handleInsertPaste(e);
         }
@@ -766,6 +756,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._preventTokenizerToggle = true;
             this._handleShow(e);
         }
+        if (isCtrl && e.key.toLowerCase() === "i" && this._tokenizer.tokens.length > 0) {
+            e.preventDefault();
+            this._togglePopover();
+        }
     }
     _filterItems(str) {
         const itemsToFilter = this.items.filter(item => !item.isGroupItem);
@@ -796,7 +790,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._itemToFocus?.focus();
         }
         else {
-            this._getRespPopover().focus();
+            this.allItemsPopover?.focus();
         }
         this._previouslySelectedItems = this._getSelectedItems();
         this._isOpenedByKeyboard = false;
@@ -816,7 +810,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._previouslySelectedItems = this._getSelectedItems();
         }
         // sync list items and cb items
-        this.syncItems(e.target.listItems);
+        this.syncItems(e.target.items);
         // don't call selection change right after selection as user can cancel it on phone
         if (!isPhone()) {
             changePrevented = this.fireSelectionChange();
@@ -831,7 +825,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.filterSelected = false;
         }
         if (!e.detail.selectionComponentPressed && !isSpace(castedEvent) && !isSpaceCtrl(castedEvent)) {
-            this._getRespPopover().open = false;
+            this.allItemsPopover?.close();
             this.value = "";
             // if the item (not checkbox) is clicked, call the selection change
             if (isPhone()) {
@@ -862,34 +856,34 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.fireEvent("value-changed");
         return changePrevented;
     }
-    _getRespPopover() {
-        return this.shadowRoot.querySelector(`.ui5-multi-combobox-all-items-responsive-popover`);
+    async _getRespPopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        this.allItemsPopover = staticAreaItem.querySelector(`.ui5-multi-combobox-all-items-responsive-popover`);
     }
     async _getList() {
-        await renderFinished();
-        this.list = this.shadowRoot.querySelector(".ui5-multi-combobox-all-items-list");
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        this.list = staticAreaItem.querySelector(".ui5-multi-combobox-all-items-list");
         return this.list;
     }
     _click() {
         if (isPhone() && !this.readonly && !this._showMorePressed && !this._deleting) {
-            this._getRespPopover().opener = this;
-            this._getRespPopover().open = true;
+            this.allItemsPopover?.showAt(this);
         }
         this._showMorePressed = false;
     }
-    handleBeforeTokenizerPopoverOpen() {
+    async handleBeforeTokenizerPopoverOpen() {
         const tokens = this._tokenizer.tokens;
         const hasTruncatedToken = tokens.length === 1 && tokens[0].isTruncatable;
-        const popover = this._getResponsivePopover();
-        if (hasTruncatedToken && popover) {
-            popover.preventFocusRestore = true;
-            popover.open = false;
+        const popover = (await this._getResponsivePopover());
+        if (hasTruncatedToken) {
+            popover?.close(false, false, true);
         }
     }
     _afterClosePicker() {
         // close device's keyboard and prevent further typing
         if (isPhone()) {
             this._dialogInputValueState = this.valueState;
+            this.blur();
         }
         this._toggle();
         this._iconPressed = false;
@@ -953,13 +947,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             });
         }
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
+        this.FormSupport = getFeature("FormSupport");
         this._inputLastValue = value;
         if (input && !input.value) {
             this.valueBeforeAutoComplete = "";
             this._filteredItems = this.items;
         }
         this.items.forEach(item => {
-            item._getRealDomRef = () => this._getRespPopover().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+            item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
         });
         this.tokenizerAvailable = this._getSelectedItems().length > 0;
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
@@ -968,7 +963,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         // 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()) {
+        if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars) {
             const item = this._getFirstMatchingItem(value);
             // Keep the original typed in text intact
             this.valueBeforeAutoComplete = value;
@@ -982,20 +977,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     async onAfterRendering() {
-        this._getRespPopover();
+        await this._getRespPopover();
         await this._getList();
         this.toggle(this.shouldDisplayOnlyValueStateMessage);
         this.storeResponsivePopoverWidth();
         this._deleting = false;
         // force resize of the tokenizer on invalidation
         this._tokenizer._handleResize();
-        this._tokenizer.preventInitialFocus = true;
-        if (this._getRespPopover()?.open) {
-            this._tokenizer.expanded = true;
-        }
-        if (this._tokenizer.expanded && this.hasAttribute("focused")) {
-            this._tokenizer.scrollToEnd();
-        }
     }
     get _isPhone() {
         return isPhone();
@@ -1029,7 +1017,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     handleCancel() {
         this._itemsBeforeOpen.forEach(item => {
-            if (isInstanceOfMultiComboBoxItem(item.ref)) {
+            if (item.ref instanceof MultiComboBoxItem) {
                 item.ref.selected = item.selected;
             }
         });
@@ -1043,17 +1031,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 this._revertSelection();
             }
         }
-        if (!this.noValidation) {
+        if (!this.allowCustomValues) {
             this.value = "";
         }
         this._togglePopover();
     }
-    openPopover() {
-        const popover = this._getPopover();
-        if (popover) {
-            popover.opener = this;
-            popover.open = true;
-        }
+    async openPopover() {
+        (await this._getPopover())?.showAt(this);
     }
     _forwardFocusToInner() {
         this._innerInput.focus();
@@ -1065,29 +1049,28 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         return this;
     }
-    closePopover() {
-        if (this._getPopover()) {
-            this._getPopover().open = false;
-        }
+    async closePopover() {
+        (await this._getPopover())?.close();
     }
-    _getPopover() {
-        return this.shadowRoot.querySelector("[ui5-popover]");
+    async _getPopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return (staticAreaItem.querySelector("[ui5-popover]"));
     }
-    _getResponsivePopover() {
-        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
+    async _getResponsivePopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector("[ui5-responsive-popover]");
     }
-    _setValueStateHeader() {
-        const responsivePopover = this._getResponsivePopover();
+    async _setValueStateHeader() {
+        const responsivePopover = await this._getResponsivePopover();
         this.valueStateHeader = responsivePopover.querySelector("div.ui5-responsive-popover-header.ui5-valuestatemessage-root");
     }
     get _tokenizer() {
         return this.shadowRoot.querySelector("[ui5-tokenizer]");
     }
     inputFocusIn(e) {
-        if (!isPhone()) {
+        if (!isPhone() || this.readonly) {
             this.focused = true;
             this._tokenizer.expanded = true;
-            this._tokenizer.scrollToEnd();
         }
         else {
             this._innerInput.blur();
@@ -1102,17 +1085,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.valueBeforeAutoComplete = "";
     }
     inputFocusOut(e) {
-        const responsivePopover = this._getResponsivePopover();
-        const popover = this._getPopover();
-        const focusIsGoingInPopover = [responsivePopover, popover].some(popup => popup?.contains(e.relatedTarget));
-        if ((!this.shadowRoot.contains(e.relatedTarget) || focusIsGoingInPopover) && !this._deleting && !this._clearingValue) {
+        if (!this.shadowRoot.contains(e.relatedTarget) && !this._deleting && !this._clearingValue) {
             this.focused = false;
             if (this._lastValue !== this.value) {
                 this._inputChange();
             }
             this._tokenizer.expanded = this.open;
             // remove the value if user focus out the input and focus is not going in the popover
-            if (!isPhone() && !this.noValidation && !focusIsGoingInPopover) {
+            if (!isPhone() && !this.allowCustomValues && (this.staticAreaItem !== e.relatedTarget)) {
                 this.value = "";
             }
         }
@@ -1124,7 +1104,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return !isPhone() && (this.focused || this._tokenizerFocused);
     }
     get selectedItemsListMode() {
-        return this.readonly ? "None" : "Multiple";
+        return this.readonly ? "None" : "MultiSelect";
     }
     get _listItemsType() {
         return this.readonly ? "Inactive" : "Active";
@@ -1134,7 +1114,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     get hasValueStateMessage() {
         const valueState = isPhone() ? this._dialogInputValueState : this.valueState;
-        return this.hasValueState && valueState !== ValueState.Positive;
+        return this.hasValueState && valueState !== ValueState.Success;
     }
     get ariaValueStateHiddenText() {
         if (!this.hasValueState) {
@@ -1177,9 +1157,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             return "";
         }
         return {
-            [ValueState.Negative]: "error",
-            [ValueState.Critical]: "alert",
-            [ValueState.Positive]: "sys-enter-2",
+            [ValueState.Error]: "error",
+            [ValueState.Warning]: "alert",
+            [ValueState.Success]: "sys-enter-2",
             [ValueState.Information]: "information",
         }[valueState];
     }
@@ -1206,24 +1186,24 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     get valueStateTypeMappings() {
         return {
-            [ValueState.Positive]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+            [ValueState.Success]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
             [ValueState.Information]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
-            [ValueState.Negative]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-            [ValueState.Critical]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+            [ValueState.Error]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+            [ValueState.Warning]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
         };
     }
     get valueStateTextMappings() {
         return {
-            [ValueState.Positive]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
-            [ValueState.Negative]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            [ValueState.Critical]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            [ValueState.Success]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            [ValueState.Error]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            [ValueState.Warning]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
             [ValueState.Information]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
         };
     }
     get _innerInput() {
         if (isPhone()) {
-            if (this._getRespPopover()?.open) {
-                return this._getRespPopover().querySelector("[ui5-input]").shadowRoot.querySelector("input");
+            if (this.allItemsPopover?.opened) {
+                return this.allItemsPopover.querySelector("[ui5-input]").shadowRoot.querySelector("input");
             }
         }
         return this._inputDom;
@@ -1241,7 +1221,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return MultiComboBox_1.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
     }
     get _tokenizerExpanded() {
-        if (isPhone()) {
+        if (isPhone() || this.readonly) {
             return false;
         }
         if (this._preventTokenizerToggle) {
@@ -1252,7 +1232,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return shouldBeExpanded;
     }
     get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? "Start" : "End";
+        return this.effectiveDir !== "rtl" ? "Left" : "Right";
     }
     get iconsCount() {
         const slottedIconsCount = this.icon?.length || 0;
@@ -1279,9 +1259,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
                 "ui5-valuestatemessage-header": true,
-                "ui5-valuestatemessage--success": (this.valueState === ValueState.Positive) || (this._dialogInputValueState === ValueState.Positive),
-                "ui5-valuestatemessage--error": (this.valueState === ValueState.Negative) || (this._dialogInputValueState === ValueState.Negative),
-                "ui5-valuestatemessage--warning": (this.valueState === ValueState.Critical) || (this._dialogInputValueState === ValueState.Critical),
+                "ui5-valuestatemessage--success": (this.valueState === ValueState.Success) || (this._dialogInputValueState === ValueState.Success),
+                "ui5-valuestatemessage--error": (this.valueState === ValueState.Error) || (this._dialogInputValueState === ValueState.Error),
+                "ui5-valuestatemessage--warning": (this.valueState === ValueState.Warning) || (this._dialogInputValueState === ValueState.Warning),
                 "ui5-valuestatemessage--information": (this.valueState === ValueState.Information) || (this._dialogInputValueState === ValueState.Information),
             },
         };
@@ -1309,9 +1289,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
 __decorate([
     property()
 ], MultiComboBox.prototype, "value", void 0);
-__decorate([
-    property()
-], MultiComboBox.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "noTypeahead", void 0);
@@ -1320,7 +1297,7 @@ __decorate([
 ], MultiComboBox.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean })
-], MultiComboBox.prototype, "noValidation", void 0);
+], MultiComboBox.prototype, "allowCustomValues", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "disabled", void 0);
@@ -1409,28 +1386,23 @@ MultiComboBox = MultiComboBox_1 = __decorate([
     customElement({
         tag: "ui5-multi-combobox",
         languageAware: true,
-        formAssociated: true,
         renderer: litRender,
         template: MultiComboBoxTemplate,
-        styles: [
-            multiCbxStyles,
-            ResponsivePopoverCommonCss,
-            ValueStateMessageCss,
-            SuggestionsCss,
-            MultiComboBoxPopover,
-        ],
+        staticAreaTemplate: MultiComboBoxPopoverTemplate,
+        styles: multiCbxStyles,
+        staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss, MultiComboBoxPopover],
         dependencies: [
             MultiComboBoxItem,
             MultiComboBoxGroupItem,
             Tokenizer,
             Token,
-            Icon,
             Input,
+            Icon,
             ResponsivePopover,
             Popover,
             List,
             StandardListItem,
-            ListItemGroupHeader,
+            GroupHeaderListItem,
             ToggleButton,
             Button,
             CheckBox,