@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/ComboBox.js

@@ -9,14 +9,13 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isPhone, isAndroid } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isAndroid, isMac } from "@ui5/webcomponents-base/dist/Device.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
-import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/error.js";
@@ -25,9 +24,11 @@ import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNext, isTabPrevious, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNext, isTabPrevious, isPageUp, isPageDown, isHome, isEnd, isCtrlAltF8, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { attachListeners } from "@ui5/webcomponents-base/dist/util/valueStateNavigation.js";
+import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
 import * as Filters from "./Filters.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, COMBOBOX_AVAILABLE_OPTIONS, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, FORM_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, VALUE_STATE_LINK, VALUE_STATE_LINKS, VALUE_STATE_LINK_MAC, VALUE_STATE_LINKS_MAC, INPUT_SUGGESTIONS_TITLE, COMBOBOX_AVAILABLE_OPTIONS, COMBOBOX_DIALOG_OK_BUTTON, COMBOBOX_DIALOG_CANCEL_BUTTON, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import ComboBoxTemplate from "./ComboBoxTemplate.js";
 // Styles
@@ -41,7 +42,6 @@ import "./ComboBoxItem.js";
 import "./ComboBoxItemGroup.js";
 // eslint-disable-next-line
 import { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js";
-import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 const SKIP_ITEMS_SIZE = 10;
 var ValueStateIconMapping;
 (function (ValueStateIconMapping) {
@@ -79,6 +79,7 @@ var ValueStateIconMapping;
  * - [Page Up] - Moves selection up by page size (10 items by default).
  * - [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
  * - [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
+ * - [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.
  *
  * ### ES6 Module Import
  *
@@ -99,6 +100,13 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return this.getFocusDomRefAsync();
     }
     get formFormattedValue() {
+        // Find the selected item
+        const selectedItem = this._getItems().find(item => item.selected && !item.isGroupItem);
+        // If selected item has a value property, return it (like Select does)
+        if (selectedItem && selectedItem.value !== undefined) {
+            return selectedItem.value;
+        }
+        // Fallback to display text (backward compatibility)
         return this.value;
     }
     constructor() {
@@ -177,15 +185,10 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
          */
         this.showClearIcon = false;
         /**
-         * Indicates whether the input is focssed
+         * Indicates whether the input is focused
          * @private
          */
         this.focused = false;
-        /**
-         * Indicates whether the visual focus is on the value state header
-         * @private
-         */
-        this._isValueStateFocused = false;
         this._iconPressed = false;
         this._filteredItems = [];
         this._effectiveShowClearIcon = false;
@@ -201,6 +204,23 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
          * @since 2.9.0
          */
         this.open = false;
+        /**
+         * Indicates whether link navigation is being handled.
+         * @default false
+         * @since 2.11.0
+         * @private
+         */
+        this._handleLinkNavigation = false;
+        /**
+         * @private
+         */
+        this._linksListenersArray = [];
+        /**
+         * Indicates whether IME composition is currently active
+         * @default false
+         * @private
+         */
+        this._isComposing = false;
         this._initialRendering = true;
         this._itemFocused = false;
         // used only for Safari fix (check onAfterRendering)
@@ -209,6 +229,8 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._selectionPerformed = false;
         this._selectedItemText = "";
         this._userTypedValue = "";
+        this._useSelectedValue = false;
+        this._valueStateLinks = [];
         // when an initial value is set it should be considered as a _lastValue
         this._lastValue = this.getAttribute("value") || "";
     }
@@ -233,9 +255,12 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         else {
             this.valueStateOpen = false;
         }
+        if (this.selectedValue) {
+            this._useSelectedValue = true;
+        }
         this._selectMatchingItem();
         this._initialRendering = false;
-        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
     }
     get iconsCount() {
         const slottedIconsCount = this.icon?.length || 0;
@@ -248,6 +273,18 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this.value = this.inner.value;
         }
         this.storeResponsivePopoverWidth();
+        if (!arraysAreEqual(this._valueStateLinks, this.linksInAriaValueStateHiddenText)) {
+            this._removeLinksEventListeners();
+            this._addLinksEventListeners();
+            this._valueStateLinks = this.linksInAriaValueStateHiddenText;
+        }
+    }
+    onEnterDOM() {
+        this._enableComposition();
+    }
+    onExitDOM() {
+        this._removeLinksEventListeners();
+        this._composition?.removeEventListeners();
     }
     _focusin(e) {
         this.focused = true;
@@ -267,7 +304,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._fireChangeEvent();
         const focusedOutToItemsPicker = this.open && this._getPicker().contains(toBeFocused);
         const focusedOutToValueState = this.valueStateOpen && this.contains(toBeFocused);
-        if (focusedOutToItemsPicker || focusedOutToValueState) {
+        if (focusedOutToItemsPicker || focusedOutToValueState || this._handleLinkNavigation) {
             e.stopImmediatePropagation();
             return;
         }
@@ -284,6 +321,13 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this._iconPressed = true;
         this.inner.focus();
         this.fireDecoratorEvent("open");
+        const allItems = this._getItems();
+        const currentItem = allItems.find(item => {
+            return item.selected || item.focused;
+        });
+        if (currentItem) {
+            this._scrollToItem(allItems.indexOf(currentItem));
+        }
     }
     _afterClosePopover() {
         this._iconPressed = false;
@@ -315,7 +359,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
     }
     _handleValueStatePopoverFocusout() {
-        this.focused = false;
+        if (!this._handleLinkNavigation) {
+            this.focused = false;
+        }
     }
     _handleValueStatePopoverAfterClose() {
         this.valueStateOpen = false;
@@ -371,15 +417,14 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             // stop the native event, as the semantic "input" would be fired.
             e.stopImmediatePropagation();
             this.focused = true;
-            this._isValueStateFocused = false;
         }
         this._filteredItems = this._filterItems(value);
         this.value = value;
         this.filterValue = value;
         this._clearFocus();
         // autocomplete
-        if (shouldAutocomplete && !isAndroid()) {
-            this._handleTypeAhead(value, value, true);
+        if (shouldAutocomplete && !this._isComposing && !isAndroid()) {
+            this._handleTypeAhead(value, value);
         }
         this.fireDecoratorEvent("input");
         if (isPhone()) {
@@ -450,9 +495,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (this.focused && isOpen && (isUp(e) || isPageUp(e) || isPageDown(e))) {
             return;
         }
-        if (allItems.length - 1 === indexOfItem && isDown(e)) {
-            return;
-        }
         this._isKeyNavigation = true;
         if (e.key === "ArrowDown"
             || e.key === "ArrowUp"
@@ -475,71 +517,59 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (this.open) {
             this._itemFocused = true;
             this.value = isGroupItem ? "" : currentItem.text;
+            this.selectedValue = isGroupItem ? undefined : currentItem.value;
             this.focused = false;
             currentItem.focused = true;
         }
         else {
             this.focused = true;
             this.value = isGroupItem ? nextItem.text : currentItem.text;
+            this.selectedValue = currentItem.value;
             currentItem.focused = false;
         }
-        this._isValueStateFocused = false;
         this._announceSelectedItem(indexOfItem);
         this._scrollToItem(indexOfItem);
         if (isGroupItem && this.open) {
             return;
         }
         // autocomplete
-        this._handleTypeAhead(this.value, this.open ? this._userTypedValue : "", false);
+        this._handleTypeAhead(this.value, this.open ? this._userTypedValue : "");
         this.fireDecoratorEvent("input");
     }
-    _handleTypeAhead(value, filterValue, checkForGroupItem) {
+    _handleTypeAhead(value, filterValue) {
         const item = this._getFirstMatchingItem(value);
         if (!item) {
             return;
         }
         this._applyAtomicValueAndSelection(item, filterValue);
-        if (value !== "" && !item.selected && (!checkForGroupItem || !item.isGroupItem)) {
-            this.fireDecoratorEvent("selection-change", {
-                item: item,
-            });
-        }
     }
     _handleArrowDown(e, indexOfItem) {
         const isOpen = this.open;
-        if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) {
-            this._isValueStateFocused = true;
-            this._announceValueStateText();
+        if (this.focused && indexOfItem === -1 && isOpen) {
             this.focused = false;
+        }
+        const allItems = this._getItems();
+        const currentItem = allItems[indexOfItem];
+        const isLastItem = indexOfItem === allItems.length - 1;
+        // We don't want to navigate further if the current item is the last one and either is already focused or the popover is closed
+        if (isLastItem && ((isOpen && currentItem.focused) || !isOpen)) {
             return;
         }
-        indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
-        this._handleItemNavigation(e, ++indexOfItem, true /* isForward */);
+        const itemIndexToBeFocused = isLastItem ? indexOfItem : indexOfItem + 1;
+        this._handleItemNavigation(e, itemIndexToBeFocused, true /* isForward */);
     }
     _handleArrowUp(e, indexOfItem) {
         const isOpen = this.open;
-        if (indexOfItem === 0 && !this.hasValueStateText) {
-            this._clearFocus();
-            this.focused = true;
-            this._itemFocused = false;
-            return;
-        }
-        if (indexOfItem === 0 && this.hasValueStateText && isOpen && !this._isValueStateFocused) {
+        if (indexOfItem === 0) {
             this._clearFocus();
             this._itemFocused = false;
-            this._isValueStateFocused = true;
-            this._announceValueStateText();
-            this._filteredItems[0].selected = false;
-            this.value = this._userTypedValue;
-            return;
-        }
-        if (this._isValueStateFocused) {
             this.focused = true;
-            this._isValueStateFocused = false;
-            this.value = this._userTypedValue;
+            if (this.hasValueStateText && isOpen) {
+                this._filteredItems[0].selected = false;
+                this.value = this._userTypedValue;
+            }
             return;
         }
-        indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
         this._handleItemNavigation(e, --indexOfItem, false /* isForward */);
     }
     _handlePageUp(e, indexOfItem) {
@@ -547,13 +577,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         const isProposedIndexValid = indexOfItem - SKIP_ITEMS_SIZE > -1;
         indexOfItem = isProposedIndexValid ? indexOfItem - SKIP_ITEMS_SIZE : 0;
         const shouldMoveForward = isInstanceOfComboBoxItemGroup(allItems[indexOfItem]) && !this.open;
-        if (!isProposedIndexValid && this.hasValueStateText && this.open) {
-            this._clearFocus();
-            this._itemFocused = false;
-            this._isValueStateFocused = true;
-            this._announceValueStateText();
-            return;
-        }
         this._handleItemNavigation(e, indexOfItem, shouldMoveForward);
     }
     _handlePageDown(e, indexOfItem) {
@@ -566,13 +589,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     _handleHome(e) {
         const shouldMoveForward = isInstanceOfComboBoxItemGroup(this._filteredItems[0]) && !this.open;
-        if (this.hasValueStateText && this.open) {
-            this._clearFocus();
-            this._itemFocused = false;
-            this._isValueStateFocused = true;
-            this._announceValueStateText();
-            return;
-        }
         this._handleItemNavigation(e, 0, shouldMoveForward);
     }
     _handleEnd(e) {
@@ -611,8 +627,12 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         if (isEscape(e)) {
             this.focused = true;
-            this.value = !this.open ? this._lastValue : this.value;
-            this._isValueStateFocused = false;
+            const shouldResetValueAndStopPropagation = !this.open && this.value !== this._lastValue;
+            if (shouldResetValueAndStopPropagation) {
+                this.value = this._lastValue;
+                // stop propagation to prevent closing the popup when using the combobox inside it
+                e.stopPropagation();
+            }
         }
         if ((isTabNext(e) || isTabPrevious(e)) && this.open) {
             this._closeRespPopover();
@@ -638,6 +658,55 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 this.focused = true;
             }
         }
+        if (isCtrlAltF8(e)) {
+            return this._handleCtrlALtF8();
+        }
+    }
+    _addLinksEventListeners() {
+        const links = this.linksInAriaValueStateHiddenText;
+        links.forEach((link, index) => {
+            this._linksListenersArray.push((e) => {
+                attachListeners(e, links, index, {
+                    closeValueState: () => {
+                        if (this.open) {
+                            this._closeRespPopover();
+                        }
+                        if (this.valueStateOpen) {
+                            this.valueStateOpen = false;
+                        }
+                    },
+                    navigateToItem: () => {
+                        this._handleLinkNavigation = false;
+                        if (this.open) {
+                            this.inner.focus();
+                            this.handleNavKeyPress(e);
+                        }
+                    },
+                    focusInput: () => {
+                        this._handleLinkNavigation = false;
+                        this.inner.focus();
+                    },
+                    isPopoverOpen: () => this.open,
+                });
+            });
+            link.addEventListener("keydown", this._linksListenersArray[index]);
+        });
+    }
+    _removeLinksEventListeners() {
+        const links = this.linksInAriaValueStateHiddenText;
+        links.forEach((link, index) => {
+            link.removeEventListener("keydown", this._linksListenersArray[index]);
+        });
+        this._linksListenersArray = [];
+        this._handleLinkNavigation = false;
+    }
+    _handleCtrlALtF8() {
+        const links = this.linksInAriaValueStateHiddenText;
+        if (links.length > 0) {
+            this._clearFocus();
+            links[0].focus();
+        }
+        this._handleLinkNavigation = true;
     }
     _handlePopoverKeydown(e) {
         if (isTabNext(e)) {
@@ -666,7 +735,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         if (isPhone()) {
             this._fireChangeEvent();
         }
-        this._isValueStateFocused = false;
         this._clearFocus();
         this.open = false;
         this.valueStateOpen = false;
@@ -708,7 +776,13 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         const matchingItems = this._startsWithMatchingItems(current);
         if (matchingItems.length) {
-            const exactMatch = matchingItems.find(item => item.text === current);
+            let exactMatch;
+            if (this._useSelectedValue) {
+                exactMatch = matchingItems.find(item => item.value === (currentlyFocusedItem?.value || this.selectedValue) && item.text === current);
+            }
+            else {
+                exactMatch = matchingItems.find(item => item.text === current);
+            }
             return exactMatch ?? matchingItems[0];
         }
     }
@@ -717,16 +791,53 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         this.inner.value = value;
         this.inner.setSelectionRange(filterValue.length, value.length);
         this.value = value;
+        if (this._useSelectedValue) {
+            this.selectedValue = item.value;
+        }
     }
     _selectMatchingItem() {
         const currentlyFocusedItem = this.items.find(item => item.focused);
         const shouldSelectionBeCleared = currentlyFocusedItem && currentlyFocusedItem.isGroupItem;
+        const valueToMatch = currentlyFocusedItem?.value ?? this.selectedValue;
         let itemToBeSelected;
+        let previouslySelectedItem;
+        // Find previously selected item
+        this._filteredItems.forEach(item => {
+            if (!isInstanceOfComboBoxItemGroup(item)) {
+                if (item.selected) {
+                    previouslySelectedItem = item;
+                }
+            }
+            else {
+                const selectedGroupItem = item.items?.find(i => i.selected);
+                if (selectedGroupItem) {
+                    previouslySelectedItem = selectedGroupItem;
+                }
+            }
+        });
         this._filteredItems.forEach(item => {
             if (!shouldSelectionBeCleared && !itemToBeSelected) {
-                itemToBeSelected = ((!item.isGroupItem && (item.text === this.value)) ? item : item?.items?.find(i => i.text === this.value));
+                if (isInstanceOfComboBoxItemGroup(item)) {
+                    if (this._useSelectedValue) {
+                        itemToBeSelected = item.items.find(i => i.value === valueToMatch && (this.value === "" || this.value === i.text));
+                    }
+                    else {
+                        itemToBeSelected = item.items?.find(i => i.text === this.value);
+                    }
+                }
+                else {
+                    if (this._useSelectedValue) {
+                        itemToBeSelected = this.items.find(i => i.value === valueToMatch && (this.value === "" || this.value === i.text));
+                        return;
+                    }
+                    itemToBeSelected = item.text === this.value ? item : undefined;
+                }
             }
         });
+        // When selectedValue matched an item but value is empty (initial render), populate value from the item's text
+        if (itemToBeSelected && this._initialRendering && this.value === "") {
+            this.value = itemToBeSelected.text || "";
+        }
         this._filteredItems = this._filteredItems.map(item => {
             if (!isInstanceOfComboBoxItemGroup(item)) {
                 item.selected = item === itemToBeSelected;
@@ -737,6 +848,32 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             });
             return item;
         });
+        if (!itemToBeSelected && this._useSelectedValue) {
+            this.selectedValue = undefined;
+        }
+        else {
+            this.selectedValue = itemToBeSelected?.value;
+        }
+        const noUserInteraction = !this.focused && !this._isKeyNavigation && !this._selectionPerformed && !this._iconPressed;
+        // Skip firing "selection-change" event if this is initial rendering or if there has been no user interaction yet
+        if (this._initialRendering || noUserInteraction) {
+            return;
+        }
+        // Fire selection-change event only when selection actually changes
+        if (previouslySelectedItem !== itemToBeSelected) {
+            if (itemToBeSelected) {
+                // New item selected
+                this.fireDecoratorEvent("selection-change", {
+                    item: itemToBeSelected,
+                });
+            }
+            else if (previouslySelectedItem) {
+                // Selection cleared - fire event with 'null'
+                this.fireDecoratorEvent("selection-change", {
+                    item: null,
+                });
+            }
+        }
     }
     _fireChangeEvent() {
         if (this.value !== this._lastValue) {
@@ -761,6 +898,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             return this._closeRespPopover();
         }
         this.value = this._selectedItemText;
+        if (this._useSelectedValue) {
+            this.selectedValue = item.value;
+        }
         if (!item.selected) {
             this.fireDecoratorEvent("selection-change", {
                 item,
@@ -786,7 +926,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             announce(`${groupHeaderText} ${currentItem.headerText}`, InvisibleMessageMode.Polite);
         }
         else {
-            announce(`${currentItemAdditionalText} ${itemPositionText}`.trim(), InvisibleMessageMode.Polite);
+            announce(`${currentItemAdditionalText} ${this.open ? itemPositionText : ""}`.trim(), InvisibleMessageMode.Polite);
         }
     }
     _clear() {
@@ -795,6 +935,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             this.fireDecoratorEvent("change");
         }
         this.value = "";
+        if (this._useSelectedValue) {
+            this.selectedValue = undefined;
+        }
         this.fireDecoratorEvent("input");
         if (this._isPhone) {
             this._lastValue = "";
@@ -836,6 +979,34 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             announce(valueStateText, InvisibleMessageMode.Polite);
         }
     }
+    /**
+     * Enables IME composition handling.
+     * Dynamically loads the InputComposition feature and sets up event listeners.
+     * @private
+     */
+    _enableComposition() {
+        if (this._composition) {
+            return;
+        }
+        const setup = (InputCompositionClass) => {
+            this._composition = new InputCompositionClass({
+                getInputEl: () => this.inner,
+                updateCompositionState: (isComposing) => {
+                    this._isComposing = isComposing;
+                },
+            });
+            this._composition.addEventListeners();
+        };
+        if (ComboBox_1.composition) {
+            setup(ComboBox_1.composition);
+        }
+        else {
+            import("./features/InputComposition.js").then(CompositionModule => {
+                ComboBox_1.composition = CompositionModule.default;
+                setup(CompositionModule.default);
+            });
+        }
+    }
     get _headerTitleText() {
         return ComboBox_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
@@ -845,6 +1016,12 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     get _popupLabel() {
         return ComboBox_1.i18nBundle.getText(COMBOBOX_AVAILABLE_OPTIONS);
     }
+    get _dialogOkButtonText() {
+        return ComboBox_1.i18nBundle.getText(COMBOBOX_DIALOG_OK_BUTTON);
+    }
+    get _dialogCancelButtonText() {
+        return ComboBox_1.i18nBundle.getText(COMBOBOX_DIALOG_CANCEL_BUTTON);
+    }
     get inner() {
         return (isPhone() && this.open)
             ? this._getPickerInput().shadowRoot.querySelector("input")
@@ -907,15 +1084,48 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     get shouldDisplayDefaultValueStateMessage() {
         return !this.valueStateMessage.length && this.hasValueStateText;
     }
-    get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Start : PopoverHorizontalAlign.End;
-    }
     /**
      * This method is relevant for sap_horizon theme only
      */
     get _valueStateMessageIcon() {
         return this.valueState !== ValueState.None ? ValueStateIconMapping[this.valueState] : "";
     }
+    get linksInAriaValueStateHiddenText() {
+        const links = [];
+        if (this.valueStateMessage) {
+            this.valueStateMessage.forEach(element => {
+                if (element.children.length) {
+                    element.querySelectorAll("ui5-link").forEach(link => {
+                        links.push(link);
+                    });
+                }
+            });
+        }
+        return links;
+    }
+    get valueStateLinksShortcutsTextAcc() {
+        const links = this.linksInAriaValueStateHiddenText;
+        if (!links.length) {
+            return "";
+        }
+        if (isMac()) {
+            return links.length === 1
+                ? ComboBox_1.i18nBundle.getText(VALUE_STATE_LINK_MAC)
+                : ComboBox_1.i18nBundle.getText(VALUE_STATE_LINKS_MAC);
+        }
+        return links.length === 1
+            ? ComboBox_1.i18nBundle.getText(VALUE_STATE_LINK)
+            : ComboBox_1.i18nBundle.getText(VALUE_STATE_LINKS);
+    }
+    get ariaDescribedByText() {
+        return `${this.valueStateTextId} ${this._valueStateLinksShortcutsTextAccId}`.trim();
+    }
+    get _valueStateLinksShortcutsTextAccId() {
+        return this.linksInAriaValueStateHiddenText.length > 0 ? `hiddenText-value-state-link-shortcut` : "";
+    }
+    get valueStateTextId() {
+        return this.hasValueState ? `value-state-description` : "";
+    }
     get _isPhone() {
         return isPhone();
     }
@@ -934,12 +1144,10 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     get styles() {
         const remSizeInPx = parseInt(getComputedStyle(document.documentElement).fontSize);
         return {
-            popoverHeader: {
-                "width": `${this.offsetWidth}px`,
-            },
             suggestionPopoverHeader: {
                 "display": this._listWidth === 0 ? "none" : "inline-block",
                 "width": `${this._listWidth || ""}px`,
+                "max-width": "inherit",
             },
             suggestionsPopover: {
                 "min-width": `${this.offsetWidth || 0}px`,
@@ -969,6 +1177,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
 __decorate([
     property()
 ], ComboBox.prototype, "value", void 0);
+__decorate([
+    property()
+], ComboBox.prototype, "selectedValue", void 0);
 __decorate([
     property()
 ], ComboBox.prototype, "name", void 0);
@@ -1005,9 +1216,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "focused", void 0);
-__decorate([
-    property({ type: Boolean })
-], ComboBox.prototype, "_isValueStateFocused", void 0);
 __decorate([
     property()
 ], ComboBox.prototype, "accessibleName", void 0);
@@ -1032,6 +1240,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], ComboBox.prototype, "_handleLinkNavigation", void 0);
+__decorate([
+    property({ type: Array })
+], ComboBox.prototype, "_linksListenersArray", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], ComboBox.prototype, "_isComposing", void 0);
 __decorate([
     slot({
         type: HTMLElement,