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

package/dist/features/ColorPaletteMoreColors.d.ts

@@ -3,7 +3,7 @@ import Dialog from "../Dialog.js";
 import Button from "../Button.js";
 import ColorPicker from "../ColorPicker.js";
 declare class ColorPaletteMoreColors {
-    static get dependencies(): (typeof Button | typeof Dialog | typeof ColorPicker)[];
+    static get dependencies(): (typeof Button | typeof ColorPicker | typeof Dialog)[];
     static i18nBundle: I18nBundle;
     static init(): Promise<void>;
     get colorPaletteDialogTitle(): string;

package/dist/features/InputElementsFormSupport.d.ts

@@ -0,0 +1,41 @@
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+interface IFormElement extends UI5Element {
+    value?: string | number;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    multiple?: boolean;
+    checked?: boolean;
+}
+type NativeFormElement = HTMLInputElement | HTMLTextAreaElement;
+type NativeInputUpdateCallback = (element: IFormElement, nativeInput: NativeFormElement) => void;
+type NativeInputChangeCallback = (e: Event) => void;
+declare class FormSupport {
+    /**
+     * Syncs the native input element, rendered into the component's light DOM,
+     * with the component's state.
+     * @param { IFormElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     */
+    static syncNativeHiddenInput(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback): void;
+    /**
+     * Syncs the native textarea element, rendered into the component's light DOM,
+     * with the component's state.
+     * @param { IFormElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     */
+    static syncNativeHiddenTextArea(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback): void;
+    static syncNativeElement(element: IFormElement, nativeElement: NativeFormElement | null, nativeInputUpdateCallback?: NativeInputUpdateCallback, nativeElementTagName?: string): void;
+    /**
+     * Syncs the native file input element, rendered into the `ui5-file-uploader` component's light DOM,
+     * with the `ui5-file-uploader` component's state.
+     * @param { IFormFileElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     * @param { NativeInputChangeCallback } nativeInputChangeCallback - callback, added to native input's "change" event
+     */
+    static syncNativeFileInput(element: IFormElement, nativeInputUpdateCallback: NativeInputUpdateCallback, nativeInputChangeCallback: NativeInputChangeCallback): void;
+    static triggerFormSubmit(element: IFormElement): void;
+    static triggerFormReset(element: IFormElement): void;
+}
+export default FormSupport;
+export { IFormElement, NativeFormElement, NativeInputChangeCallback, NativeInputUpdateCallback, };

package/dist/features/InputElementsFormSupport.js

@@ -0,0 +1,134 @@
+import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+const findNearestFormElement = (element) => {
+    let currentElement = element.parentElement;
+    while (currentElement && currentElement.tagName.toLowerCase() !== "form") {
+        currentElement = currentElement.parentElement;
+    }
+    if (currentElement instanceof HTMLFormElement) {
+        return currentElement;
+    }
+};
+class FormSupport {
+    /**
+     * Syncs the native input element, rendered into the component's light DOM,
+     * with the component's state.
+     * @param { IFormElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     */
+    static syncNativeHiddenInput(element, nativeInputUpdateCallback) {
+        const needsNativeInput = !!element.name || element.required;
+        const nativeInput = element.querySelector("input[data-ui5-form-support]");
+        if (needsNativeInput) {
+            this.syncNativeElement(element, nativeInput, nativeInputUpdateCallback);
+        }
+        else if (nativeInput) {
+            element.removeChild(nativeInput);
+        }
+    }
+    /**
+     * Syncs the native textarea element, rendered into the component's light DOM,
+     * with the component's state.
+     * @param { IFormElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     */
+    static syncNativeHiddenTextArea(element, nativeInputUpdateCallback) {
+        const needsNativeTextArea = !!element.name || element.required;
+        const nativeTextarea = element.querySelector("textarea[data-ui5-form-support]");
+        if (needsNativeTextArea) {
+            this.syncNativeElement(element, nativeTextarea, nativeInputUpdateCallback, "textarea");
+        }
+        else if (nativeTextarea) {
+            element.removeChild(nativeTextarea);
+        }
+    }
+    static syncNativeElement(element, nativeElement, nativeInputUpdateCallback, nativeElementTagName = "input") {
+        if (!nativeElement) {
+            nativeElement = document.createElement(nativeElementTagName);
+            nativeElement.style.clip = "rect(0 0 0 0)";
+            nativeElement.style.clipPath = "inset(50%)";
+            nativeElement.style.height = "1px";
+            nativeElement.style.overflow = "hidden";
+            nativeElement.style.position = "absolute";
+            nativeElement.style.whiteSpace = "nowrap";
+            nativeElement.style.width = "1px";
+            nativeElement.style.bottom = "0";
+            nativeElement.setAttribute("tabindex", "-1");
+            nativeElement.required = element.required;
+            nativeElement.setAttribute("data-ui5-form-support", "");
+            nativeElement.setAttribute("aria-hidden", "true");
+            nativeElement.addEventListener("focusin", () => element.getFocusDomRef()?.focus());
+            nativeElement.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms
+            element.appendChild(nativeElement);
+        }
+        nativeElement.name = element.name;
+        (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeElement);
+    }
+    /**
+     * Syncs the native file input element, rendered into the `ui5-file-uploader` component's light DOM,
+     * with the `ui5-file-uploader` component's state.
+     * @param { IFormFileElement} element - the component with form support
+     * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+     * @param { NativeInputChangeCallback } nativeInputChangeCallback - callback, added to native input's "change" event
+     */
+    static syncNativeFileInput(element, nativeInputUpdateCallback, nativeInputChangeCallback) {
+        const needsNativeInput = !!element.name;
+        let nativeInput = element.querySelector(`input[type="file"][data-ui5-form-support]`);
+        if (needsNativeInput && !nativeInput) {
+            nativeInput = document.createElement("input");
+            nativeInput.type = "file";
+            nativeInput.setAttribute("data-ui5-form-support", "");
+            nativeInput.slot = "formSupport"; // Needed to visualize the input in the light dom
+            nativeInput.style.position = "absolute";
+            nativeInput.style.top = "0";
+            nativeInput.style.left = "0";
+            nativeInput.style.width = "100%";
+            nativeInput.style.height = "100%";
+            nativeInput.style.opacity = "0";
+            if (element.multiple) {
+                nativeInput.multiple = true;
+            }
+            nativeInput.addEventListener("change", nativeInputChangeCallback);
+            element.appendChild(nativeInput);
+        }
+        if (!needsNativeInput && nativeInput) {
+            element.removeChild(nativeInput);
+        }
+        if (needsNativeInput) {
+            nativeInput.name = element.name;
+            (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);
+        }
+    }
+    static triggerFormSubmit(element) {
+        const formElement = findNearestFormElement(element);
+        if (formElement) {
+            if (!formElement.checkValidity()) {
+                formElement.reportValidity();
+                return;
+            }
+            // eslint-disable-next-line no-undef
+            const submitPrevented = !formElement.dispatchEvent(new SubmitEvent("submit", {
+                bubbles: true,
+                cancelable: true,
+                submitter: element,
+            }));
+            if (submitPrevented) {
+                return;
+            }
+            formElement.submit();
+        }
+    }
+    static triggerFormReset(element) {
+        const formElement = findNearestFormElement(element);
+        if (formElement) {
+            formElement.reset();
+        }
+    }
+}
+const copyDefaultProperties = (element, nativeInput) => {
+    nativeInput.disabled = element.disabled;
+    nativeInput.value = element.value; // We do not explicitly convert to string to retain the current browser behavior
+};
+// Add form support to the global features registry so that Web Components can find and use it
+registerFeature("FormSupport", FormSupport);
+export default FormSupport;
+//# sourceMappingURL=InputElementsFormSupport.js.map

package/dist/features/InputElementsFormSupport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputElementsFormSupport.js","sourceRoot":"","sources":["../../src/features/InputElementsFormSupport.ts"],"names":[],"mappings":"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","sourcesContent":["import { registerFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ninterface IFormElement extends UI5Element {\n\tvalue?: string | number,\n\tname?: string,\n\tdisabled?: boolean,\n\trequired?: boolean,\n\tmultiple?: boolean,\n\tchecked?: boolean,\n}\n\ntype NativeFormElement = HTMLInputElement | HTMLTextAreaElement;\ntype NativeInputUpdateCallback = (element: IFormElement, nativeInput: NativeFormElement) => void;\ntype NativeInputChangeCallback = (e: Event) => void;\n\nconst findNearestFormElement = (element: IFormElement) => {\n\tlet currentElement = element.parentElement;\n\twhile (currentElement && currentElement.tagName.toLowerCase() !== \"form\") {\n\t\tcurrentElement = currentElement.parentElement;\n\t}\n\n\tif (currentElement instanceof HTMLFormElement) {\n\t\treturn currentElement;\n\t}\n};\n\nclass FormSupport {\n\t/**\n\t * Syncs the native input element, rendered into the component's light DOM,\n\t * with the component's state.\n\t * @param { IFormElement} element - the component with form support\n\t * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's \"disabled\" and \"value\" properties\n\t */\n\tstatic syncNativeHiddenInput(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback) {\n\t\tconst needsNativeInput = !!element.name || element.required;\n\t\tconst nativeInput = element.querySelector<NativeFormElement>(\"input[data-ui5-form-support]\");\n\n\t\tif (needsNativeInput) {\n\t\t\tthis.syncNativeElement(element, nativeInput, nativeInputUpdateCallback);\n\t\t} else if (nativeInput) {\n\t\t\telement.removeChild(nativeInput);\n\t\t}\n\t}\n\n\t/**\n\t * Syncs the native textarea element, rendered into the component's light DOM,\n\t * with the component's state.\n\t * @param { IFormElement} element - the component with form support\n\t * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's \"disabled\" and \"value\" properties\n\t */\n\tstatic syncNativeHiddenTextArea(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback) {\n\t\tconst needsNativeTextArea = !!element.name || element.required;\n\t\tconst nativeTextarea = element.querySelector<NativeFormElement>(\"textarea[data-ui5-form-support]\");\n\n\t\tif (needsNativeTextArea) {\n\t\t\tthis.syncNativeElement(element, nativeTextarea, nativeInputUpdateCallback, \"textarea\");\n\t\t} else if (nativeTextarea) {\n\t\t\telement.removeChild(nativeTextarea);\n\t\t}\n\t}\n\n\tstatic syncNativeElement(element: IFormElement, nativeElement: NativeFormElement | null, nativeInputUpdateCallback?: NativeInputUpdateCallback, nativeElementTagName = \"input\") {\n\t\tif (!nativeElement) {\n\t\t\tnativeElement = document.createElement(nativeElementTagName) as NativeFormElement;\n\n\t\t\tnativeElement.style.clip = \"rect(0 0 0 0)\";\n\t\t\tnativeElement.style.clipPath = \"inset(50%)\";\n\t\t\tnativeElement.style.height = \"1px\";\n\t\t\tnativeElement.style.overflow = \"hidden\";\n\t\t\tnativeElement.style.position = \"absolute\";\n\t\t\tnativeElement.style.whiteSpace = \"nowrap\";\n\t\t\tnativeElement.style.width = \"1px\";\n\t\t\tnativeElement.style.bottom = \"0\";\n\t\t\tnativeElement.setAttribute(\"tabindex\", \"-1\");\n\t\t\tnativeElement.required = element.required!;\n\t\t\tnativeElement.setAttribute(\"data-ui5-form-support\", \"\");\n\t\t\tnativeElement.setAttribute(\"aria-hidden\", \"true\");\n\n\t\t\tnativeElement.addEventListener(\"focusin\", () => element.getFocusDomRef()?.focus());\n\n\t\t\tnativeElement.slot = \"formSupport\"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms\n\t\t\telement.appendChild(nativeElement);\n\t\t}\n\n\t\tnativeElement.name = element.name!;\n\t\t(nativeInputUpdateCallback || copyDefaultProperties)(element, nativeElement);\n\t}\n\n\t/**\n\t * Syncs the native file input element, rendered into the `ui5-file-uploader` component's light DOM,\n\t * with the `ui5-file-uploader` component's state.\n\t * @param { IFormFileElement} element - the component with form support\n\t * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's \"disabled\" and \"value\" properties\n\t * @param { NativeInputChangeCallback } nativeInputChangeCallback - callback, added to native input's \"change\" event\n\t */\n\tstatic syncNativeFileInput(element: IFormElement, nativeInputUpdateCallback: NativeInputUpdateCallback, nativeInputChangeCallback: NativeInputChangeCallback) {\n\t\tconst needsNativeInput = !!element.name;\n\t\tlet nativeInput = element.querySelector<HTMLInputElement>(`input[type=\"file\"][data-ui5-form-support]`);\n\n\t\tif (needsNativeInput && !nativeInput) {\n\t\t\tnativeInput = document.createElement(\"input\");\n\t\t\tnativeInput.type = \"file\";\n\t\t\tnativeInput.setAttribute(\"data-ui5-form-support\", \"\");\n\t\t\tnativeInput.slot = \"formSupport\"; // Needed to visualize the input in the light dom\n\t\t\tnativeInput.style.position = \"absolute\";\n\t\t\tnativeInput.style.top = \"0\";\n\t\t\tnativeInput.style.left = \"0\";\n\t\t\tnativeInput.style.width = \"100%\";\n\t\t\tnativeInput.style.height = \"100%\";\n\t\t\tnativeInput.style.opacity = \"0\";\n\n\t\t\tif (element.multiple) {\n\t\t\t\tnativeInput.multiple = true;\n\t\t\t}\n\n\t\t\tnativeInput.addEventListener(\"change\", nativeInputChangeCallback);\n\n\t\t\telement.appendChild(nativeInput);\n\t\t}\n\n\t\tif (!needsNativeInput && nativeInput) {\n\t\t\telement.removeChild(nativeInput);\n\t\t}\n\n\t\tif (needsNativeInput) {\n\t\t\tnativeInput!.name = element.name!;\n\t\t\t(nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput!);\n\t\t}\n\t}\n\n\tstatic triggerFormSubmit(element: IFormElement) {\n\t\tconst formElement = findNearestFormElement(element);\n\t\tif (formElement) {\n\t\t\tif (!formElement.checkValidity()) {\n\t\t\t\tformElement.reportValidity();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// eslint-disable-next-line no-undef\n\t\t\tconst submitPrevented = !formElement.dispatchEvent(new SubmitEvent(\"submit\", {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tsubmitter: element,\n\t\t\t}));\n\n\t\t\tif (submitPrevented) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tformElement.submit();\n\t\t}\n\t}\n\n\tstatic triggerFormReset(element: IFormElement) {\n\t\tconst formElement = findNearestFormElement(element);\n\t\tif (formElement) {\n\t\t\tformElement.reset();\n\t\t}\n\t}\n}\n\nconst copyDefaultProperties = (element: IFormElement, nativeInput: NativeFormElement) => {\n\tnativeInput.disabled = element.disabled!;\n\tnativeInput.value = element.value as string; // We do not explicitly convert to string to retain the current browser behavior\n};\n\n// Add form support to the global features registry so that Web Components can find and use it\nregisterFeature(\"FormSupport\", FormSupport);\n\nexport default FormSupport;\n\nexport {\n\tIFormElement,\n\tNativeFormElement,\n\tNativeInputChangeCallback,\n\tNativeInputUpdateCallback,\n};\n"]}

package/dist/features/InputSuggestions.d.ts

@@ -1,4 +1,5 @@
 import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { ComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import List from "../List.js";
@@ -8,7 +9,8 @@ import SuggestionItem from "../SuggestionItem.js";
 import SuggestionGroupItem from "../SuggestionGroupItem.js";
 import Button from "../Button.js";
 import Icon from "../Icon.js";
-import ListItemGroupHeader from "../ListItemGroupHeader.js";
+import Popover from "../Popover.js";
+import GroupHeaderListItem from "../GroupHeaderListItem.js";
 import SuggestionListItem from "../SuggestionListItem.js";
 import type ListItemType from "../types/ListItemType.js";
 import type { IInputSuggestionItem } from "../Input.js";
@@ -23,8 +25,8 @@ interface SuggestionComponent extends UI5Element {
     open: boolean;
     onItemMouseOver: (e: MouseEvent) => void;
     onItemMouseOut: (e: MouseEvent) => void;
-    onItemSelected: (pressedItem: SuggestionItem, listItem: SuggestionListItem | null, keyboardUsed: boolean) => void;
-    onItemSelect: (item: SuggestionListItem) => void;
+    onItemSelected: (pressedItem: SuggestionItem, keyboardUsed: boolean) => void;
+    onItemPreviewed: (item: SuggestionListItem) => void;
 }
 type InputSuggestion = {
     text: string;
@@ -50,13 +52,14 @@ type SuggestionsAccInfo = {
  * @class
  * @private
  */
-declare class Suggestions {
+declare class Suggestions extends ComponentFeature {
     component: SuggestionComponent;
     slotName: string;
     handleFocus: boolean;
     highlight: boolean;
     selectedItemIndex: number;
     accInfo?: SuggestionsAccInfo;
+    responsivePopover?: ResponsivePopover;
     _scrollContainer?: HTMLElement;
     _handledPress?: boolean;
     attachedAfterOpened?: boolean;
@@ -80,15 +83,18 @@ declare class Suggestions {
     toggle(bToggle: boolean, options: {
         preventFocusRestore: boolean;
     }): void;
-    _isScrollable(): boolean;
+    _isScrollable(): Promise<boolean>;
     open(): void;
-    close(preventFocusRestore?: boolean): void;
+    close(preventFocusRestore?: boolean): Promise<void>;
     updateSelectedItemPosition(pos: number): void;
     onItemMouseOver(e: MouseEvent): void;
     onItemMouseOut(e: MouseEvent): void;
     onItemSelected(selectedItem: SuggestionListItem | null, keyboardUsed: boolean): void;
-    onItemSelect(item: SuggestionListItem): void;
+    onItemPreviewed(item: SuggestionListItem): void;
     onItemPress(e: CustomEvent<ListItemClickEventDetail | ListSelectionChangeEventDetail>): void;
+    _beforeOpen(): void;
+    _attachItemsListeners(): Promise<void>;
+    _attachPopupListeners(): void;
     _onOpen(): void;
     _onClose(): void;
     _applyFocus(): void;
@@ -102,15 +108,15 @@ declare class Suggestions {
     _deselectItems(): void;
     _clearItemFocus(): void;
     _isItemIntoView(item: SuggestionListItem): boolean;
-    _scrollItemIntoView(item: SuggestionListItem): void;
-    _getScrollContainer(): HTMLElement;
+    _scrollItemIntoView(item: SuggestionListItem): Promise<void>;
+    _getScrollContainer(): Promise<HTMLElement>;
     _getItems(): Array<SuggestionListItem>;
     _getNonGroupItems(): Array<SuggestionListItem>;
     _getComponent(): SuggestionComponent;
-    _getList(): List;
-    _getListWidth(): number;
+    _getList(): Promise<List>;
+    _getListWidth(): Promise<number>;
     _getRealItems(): SuggestionItem[];
-    _getPicker(): ResponsivePopover;
+    _getSuggestionPopover(): Promise<ResponsivePopover>;
     get itemSelectionAnnounce(): string;
     getRowText(suggestion: IInputSuggestionItem): string;
     getRowDesc(suggestion: IInputSuggestionItem): string;
@@ -122,8 +128,8 @@ declare class Suggestions {
     _focusValueState(): void;
     _clearValueStateFocus(): void;
     _clearSelectedSuggestionAndAccInfo(): void;
-    static get dependencies(): (typeof Button | typeof Icon | typeof ListItemGroupHeader | typeof List | typeof SuggestionListItem | typeof SuggestionGroupItem)[];
-    static init(): Promise<void>;
+    static get dependencies(): (typeof SuggestionGroupItem | typeof Popover | typeof List | typeof SuggestionListItem | typeof GroupHeaderListItem | typeof Button | typeof Icon)[];
+    static define(): Promise<void>;
 }
 export default Suggestions;
 export type { SuggestionComponent, InputSuggestion, };

package/dist/features/InputSuggestions.js

@@ -1,15 +1,16 @@
-import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { ComponentFeature, registerComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 // @ts-ignore
 import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
 import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import List from "../List.js";
-import "../ResponsivePopover.js";
+import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
 import SuggestionGroupItem from "../SuggestionGroupItem.js";
 import Button from "../Button.js";
 import Icon from "../Icon.js";
-import ListItemGroupHeader from "../ListItemGroupHeader.js";
+import Popover from "../Popover.js";
+import GroupHeaderListItem from "../GroupHeaderListItem.js";
 import SuggestionListItem from "../SuggestionListItem.js";
 import { LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, } from "../generated/i18n/i18n-defaults.js";
 /**
@@ -17,8 +18,9 @@ import { LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, } from "../generated/i18n/i
  * @class
  * @private
  */
-class Suggestions {
+class Suggestions extends ComponentFeature {
     constructor(component, slotName, highlight, handleFocus) {
+        super();
         // The component, that the suggestion would plug into.
         this.component = component;
         // Defines the items` slot name.
@@ -31,6 +33,7 @@ class Suggestions {
         this.fnOnSuggestionItemPress = this.onItemPress.bind(this);
         this.fnOnSuggestionItemMouseOver = this.onItemMouseOver.bind(this);
         this.fnOnSuggestionItemMouseOut = this.onItemMouseOut.bind(this);
+        this._getSuggestionPopover();
         // An integer value to store the currently selected item position,
         // that changes due to user interaction.
         this.selectedItemIndex = -1;
@@ -143,19 +146,20 @@ class Suggestions {
             this.close(options.preventFocusRestore);
         }
     }
-    _isScrollable() {
-        const sc = this._getScrollContainer();
+    async _isScrollable() {
+        const sc = await this._getScrollContainer();
         return sc.offsetHeight < sc.scrollHeight;
     }
     open() {
         this._getComponent().open = true;
+        this._beforeOpen();
+        this.responsivePopover.showAt(this._getComponent());
     }
-    close(preventFocusRestore = false) {
+    async close(preventFocusRestore = false) {
         const selectedItem = this._getItems() && this._getItems()[this.selectedItemIndex];
         this._getComponent().open = false;
-        const picker = this._getPicker();
-        picker.preventFocusRestore = preventFocusRestore;
-        picker.open = false;
+        this.responsivePopover = await this._getSuggestionPopover();
+        this.responsivePopover.close(false, false, preventFocusRestore);
         if (selectedItem && selectedItem.focused) {
             selectedItem.focused = false;
         }
@@ -188,13 +192,13 @@ class Suggestions {
         if (item.type === "Inactive" || item.groupItem) {
             return;
         }
-        this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], item, keyboardUsed);
+        this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], keyboardUsed);
         item.selected = false;
         item.focused = false;
         this._getComponent().open = false;
     }
-    onItemSelect(item) {
-        this._getComponent().onItemSelect(item);
+    onItemPreviewed(item) {
+        this._getComponent().onItemPreviewed(item);
     }
     /* Private methods */
     // Note: Split into two separate handlers
@@ -215,6 +219,34 @@ class Suggestions {
         }
         this.onItemSelected(pressedItem, false /* keyboardUsed */);
     }
+    _beforeOpen() {
+        this._attachItemsListeners();
+        this._attachPopupListeners();
+    }
+    async _attachItemsListeners() {
+        const list = await this._getList();
+        list.removeEventListener("ui5-item-click", this.fnOnSuggestionItemPress);
+        list.addEventListener("ui5-item-click", this.fnOnSuggestionItemPress);
+        list.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress);
+        list.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress);
+        list.removeEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
+        list.addEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
+        list.removeEventListener("mouseout", this.fnOnSuggestionItemMouseOut);
+        list.addEventListener("mouseout", this.fnOnSuggestionItemMouseOut);
+    }
+    _attachPopupListeners() {
+        if (!this.handleFocus) {
+            return;
+        }
+        if (!this.attachedAfterOpened) {
+            this.responsivePopover.addEventListener("ui5-after-open", this._onOpen.bind(this));
+            this.attachedAfterOpened = true;
+        }
+        if (!this.attachedAfterClose) {
+            this.responsivePopover.addEventListener("ui5-after-close", this._onClose.bind(this));
+            this.attachedAfterClose = true;
+        }
+    }
     _onOpen() {
         this._applyFocus();
     }
@@ -223,7 +255,7 @@ class Suggestions {
     }
     _applyFocus() {
         if (this.selectedItemIndex) {
-            this._getItems()[this.selectedItemIndex]?.focus();
+            this._getItems()[this.selectedItemIndex].focus();
         }
     }
     _isItemOnTarget() {
@@ -237,7 +269,7 @@ class Suggestions {
         return (items[this.selectedItemIndex].groupItem || items[this.selectedItemIndex].type === "Inactive");
     }
     isOpened() {
-        return !!(this._getPicker()?.open);
+        return !!(this.responsivePopover && this.responsivePopover.opened);
     }
     _handleItemNavigation(forward) {
         if (!this._getItems().length) {
@@ -328,7 +360,7 @@ class Suggestions {
             }
         }
         this.component.hasSuggestionItemSelected = true;
-        this.onItemSelect(currentItem);
+        this.onItemPreviewed(currentItem);
         if (!this._isItemIntoView(currentItem)) {
             this._scrollItemIntoView(currentItem);
         }
@@ -352,19 +384,20 @@ class Suggestions {
         const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
         return (rectItem.top + Suggestions.SCROLL_STEP <= windowHeight) && (rectItem.top >= rectInput.top);
     }
-    _scrollItemIntoView(item) {
+    async _scrollItemIntoView(item) {
         const pos = item.getDomRef().offsetTop;
-        const scrollContainer = this._getScrollContainer();
+        const scrollContainer = await this._getScrollContainer();
         scrollContainer.scrollTop = pos;
     }
-    _getScrollContainer() {
+    async _getScrollContainer() {
         if (!this._scrollContainer) {
-            this._scrollContainer = this._getPicker().shadowRoot.querySelector(".ui5-popup-content");
+            await this._getSuggestionPopover();
+            this._scrollContainer = this.responsivePopover.shadowRoot.querySelector(".ui5-popup-content");
         }
         return this._scrollContainer;
     }
     _getItems() {
-        return [...this._getList().items] || [];
+        return this.responsivePopover ? [...this.responsivePopover.querySelector("[ui5-list]").children] : [];
     }
     _getNonGroupItems() {
         return this._getItems().filter(item => !item.groupItem);
@@ -372,17 +405,24 @@ class Suggestions {
     _getComponent() {
         return this.component;
     }
-    _getList() {
-        return this._getPicker().querySelector("[ui5-list]");
+    async _getList() {
+        this.responsivePopover = await this._getSuggestionPopover();
+        return this.responsivePopover.querySelector("[ui5-list]");
     }
-    _getListWidth() {
-        return this._getList()?.offsetWidth;
+    async _getListWidth() {
+        const list = await this._getList();
+        return list.offsetWidth;
     }
     _getRealItems() {
         return this._getComponent().getSlottedNodes(this.slotName);
     }
-    _getPicker() {
-        return this._getComponent().shadowRoot.querySelector("[ui5-responsive-popover]");
+    async _getSuggestionPopover() {
+        if (this.responsivePopover) {
+            return this.responsivePopover;
+        }
+        const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
+        this.responsivePopover = staticAreaItem.querySelector("[ui5-responsive-popover]");
+        return this.responsivePopover;
     }
     get itemSelectionAnnounce() {
         if (!this.accInfo) {
@@ -434,19 +474,21 @@ class Suggestions {
         return [
             SuggestionItem,
             SuggestionGroupItem,
+            ResponsivePopover,
             List,
             SuggestionListItem,
-            ListItemGroupHeader,
+            GroupHeaderListItem,
             Button,
             Icon,
+            Popover,
         ];
     }
-    static async init() {
+    static async define() {
         Suggestions.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
 }
 Suggestions.SCROLL_STEP = 60;
 // Add suggestions support to the global features registry so that Input.js can use it
-registerFeature("InputSuggestions", Suggestions);
+registerComponentFeature("InputSuggestions", Suggestions);
 export default Suggestions;
 //# sourceMappingURL=InputSuggestions.js.map