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

package/dist/Select.d.ts

@@ -8,10 +8,10 @@ import "@ui5/webcomponents-icons/dist/information.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
-import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type { ListItemClickEventDetail } from "./List.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Popover from "./Popover.js";
+import type { IFormElement } from "./features/InputElementsFormSupport.js";
 import type ListItemBase from "./ListItemBase.js";
 import type SelectMenu from "./SelectMenu.js";
 import type { SelectMenuOptionClick, SelectMenuChange } from "./SelectMenu.js";
@@ -21,7 +21,8 @@ import type { SelectMenuOptionClick, SelectMenuChange } from "./SelectMenu.js";
  */
 interface IOption extends UI5Element {
     selected: boolean;
-    tooltip: string;
+    disabled: boolean;
+    title: string;
     icon?: string | null;
     value: string;
     additionalText?: string;
@@ -81,13 +82,11 @@ type SelectLiveChangeEventDetail = {
  * @public
  * @since 0.8.0
  */
-declare class Select extends UI5Element implements IFormInputElement {
+declare class Select extends UI5Element implements IFormElement {
     static i18nBundle: I18nBundle;
     /**
      * Defines a reference (ID or DOM element) of component's menu of options
      * as alternative to define the select's dropdown.
-     * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the menu.
-     * You can only set the `opener` attribute to a DOM Reference when using JavaScript.
      *
      * **Note:** Usage of `ui5-select-menu` is recommended.
      * @default undefined
@@ -104,9 +103,15 @@ declare class Select extends UI5Element implements IFormInputElement {
      */
     disabled: boolean;
     /**
-     * Determines the name by which the component will be identified upon submission in an HTML form.
+     * Determines the name with which the component will be submitted in an HTML form.
+     * The value of the component will be the value of the currently selected `ui5-option`.
+     *
+     * **Important:** For the `name` property to have effect, you must add the following import to your project:
+     * `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
      *
-     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * **Note:** When set, a native `input` HTML element
+     * will be created inside the `ui5-select` so that it can be submitted as
+     * part of an HTML form. Do not use this property unless you need to submit a form.
      * @default ""
      * @public
      */
@@ -192,6 +197,12 @@ declare class Select extends UI5Element implements IFormInputElement {
      * @public
      */
     options: Array<IOption>;
+    /**
+     * The slot is used to render native `input` HTML element within Light DOM to enable form submit,
+     * when `name` property is set.
+     * @private
+     */
+    formSupport: Array<HTMLElement>;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
      *
@@ -225,17 +236,13 @@ declare class Select extends UI5Element implements IFormInputElement {
     _onMenuChange: (e: CustomEvent<SelectMenuChange>) => void;
     _attachMenuListeners: (menu: HTMLElement) => void;
     _detachMenuListeners: (menu: HTMLElement) => void;
-    get formValidityMessage(): string;
-    get formValidity(): ValidityStateFlags;
-    formElementAnchor(): Promise<HTMLElement | undefined>;
-    get formFormattedValue(): string | null;
     constructor();
     onBeforeRendering(): void;
     onAfterRendering(): void;
     _onfocusin(): void;
     _onfocusout(): void;
     get _isPickerOpen(): boolean;
-    _respPopover(): ResponsivePopover;
+    _respPopover(): Promise<ResponsivePopover>;
     /**
      * Defines the value of the component:
      *
@@ -266,12 +273,13 @@ declare class Select extends UI5Element implements IFormInputElement {
     onMenuChange(e: CustomEvent<SelectMenuChange>): void;
     _toggleSelectMenu(): void;
     onExitDOM(): void;
-    _toggleRespPopover(): void;
-    _attachRealDomRefs(): void;
+    _toggleRespPopover(): Promise<void>;
+    _attachRealDomRefs(): Promise<void>;
     _syncSelection(): void;
     _getSelectMenu(): SelectMenu | undefined;
     attachMenuListeners(menu: HTMLElement): void;
     detachMenuListeners(menu: HTMLElement): void;
+    _enableFormSupport(): void;
     _onkeydown(e: KeyboardEvent): void;
     _handleKeyboardNavigation(e: KeyboardEvent): void;
     _selectTypedItem(text: string): void;
@@ -305,16 +313,16 @@ declare class Select extends UI5Element implements IFormInputElement {
     get hasCustomLabel(): boolean;
     _fireChangeEvent(selectedOption: IOption): void;
     get valueStateTextMappings(): {
-        Positive: string;
+        Success: string;
         Information: string;
-        Negative: string;
-        Critical: string;
+        Error: string;
+        Warning: string;
     };
     get valueStateTypeMappings(): {
-        Positive: string;
+        Success: string;
         Information: string;
-        Negative: string;
-        Critical: string;
+        Error: string;
+        Warning: string;
     };
     get valueStateText(): string;
     get valueStateDefaultText(): string;
@@ -361,12 +369,13 @@ declare class Select extends UI5Element implements IFormInputElement {
     get shouldOpenValueStateMessagePopover(): boolean;
     get _ariaRoleDescription(): string;
     get _isPhone(): boolean;
+    get _filteredItems(): IOption[];
     itemSelectionAnnounce(): void;
-    openValueStatePopover(): void;
+    openValueStatePopover(): Promise<void>;
     closeValueStatePopover(): void;
     toggleValueStatePopover(open: boolean): void;
     get selectedOptionIcon(): string | null | undefined;
-    _getPopover(): Popover | null;
+    _getPopover(): Promise<Popover | null>;
     static onDefine(): Promise<void>;
 }
 export default Select;

package/dist/Select.js

@@ -15,6 +15,7 @@ import connectToComponent from "@ui5/webcomponents-base/dist/connectToComponent.
 import { isSpace, isUp, isDown, isEnter, isEscape, isHome, isEnd, isShow, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
 import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -29,7 +30,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import List from "./List.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, LIST_ITEM_POSITION, SELECT_ROLE_DESCRIPTION, FORM_SELECTABLE_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, LIST_ITEM_POSITION, SELECT_ROLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
 import Label from "./Label.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -39,6 +40,7 @@ import Icon from "./Icon.js";
 import Button from "./Button.js";
 // Templates
 import SelectTemplate from "./generated/templates/SelectTemplate.lit.js";
+import SelectPopoverTemplate from "./generated/templates/SelectPopoverTemplate.lit.js";
 // Styles
 import selectCss from "./generated/themes/Select.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -90,23 +92,6 @@ import SelectPopoverCss from "./generated/themes/SelectPopover.css.js";
  * @since 0.8.0
  */
 let Select = Select_1 = class Select extends UI5Element {
-    get formValidityMessage() {
-        return Select_1.i18nBundle.getText(FORM_SELECTABLE_REQUIRED);
-    }
-    get formValidity() {
-        const selectedOption = this.selectedOption;
-        return { valueMissing: this.required && (selectedOption && selectedOption.getAttribute("value") === "") };
-    }
-    async formElementAnchor() {
-        return this.getFocusDomRefAsync();
-    }
-    get formFormattedValue() {
-        const selectedOption = this.selectedOption;
-        if (selectedOption) {
-            return selectedOption.hasAttribute("value") ? selectedOption.value : selectedOption.textContent;
-        }
-        return "";
-    }
     constructor() {
         super();
         this._syncedOptions = [];
@@ -134,6 +119,7 @@ let Select = Select_1 = class Select extends UI5Element {
         else {
             this._syncSelection();
         }
+        this._enableFormSupport();
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
     }
     onAfterRendering() {
@@ -156,10 +142,11 @@ let Select = Select_1 = class Select extends UI5Element {
         if (menu) {
             return menu.open;
         }
-        return !!this.responsivePopover && this.responsivePopover.open;
+        return !!this.responsivePopover && this.responsivePopover.opened;
     }
-    _respPopover() {
-        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
+    async _respPopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector("[ui5-responsive-popover]");
     }
     /**
      * Defines the value of the component:
@@ -178,7 +165,7 @@ let Select = Select_1 = class Select extends UI5Element {
      */
     set value(newValue) {
         const menu = this._getSelectMenu();
-        const selectOptions = Array.from(menu ? menu.children : this.children);
+        const selectOptions = Array.from(menu ? menu.children : this.children).filter(option => !option.getAttribute("disabled"));
         selectOptions.forEach(option => {
             option.selected = !!((option.getAttribute("value") || option.textContent) === newValue);
         });
@@ -229,7 +216,7 @@ let Select = Select_1 = class Select extends UI5Element {
             this._detachMenuListeners(menu);
         }
     }
-    _toggleRespPopover() {
+    async _toggleRespPopover() {
         if (this.disabled || this.readonly) {
             return;
         }
@@ -239,24 +226,23 @@ let Select = Select_1 = class Select extends UI5Element {
             this._toggleSelectMenu();
             return;
         }
-        this.responsivePopover = this._respPopover();
+        this.responsivePopover = await this._respPopover();
         if (this._isPickerOpen) {
-            this.responsivePopover.open = false;
+            this.responsivePopover.close();
         }
         else {
-            this.responsivePopover.opener = this;
-            this.responsivePopover.open = true;
+            this.responsivePopover.showAt(this);
         }
     }
-    _attachRealDomRefs() {
-        this.responsivePopover = this._respPopover();
+    async _attachRealDomRefs() {
+        this.responsivePopover = await this._respPopover();
         this.options.forEach(option => {
             option._getRealDomRef = () => this.responsivePopover.querySelector(`*[data-ui5-stable=${option.stableDomRef}]`);
         });
     }
     _syncSelection() {
         let lastSelectedOptionIndex = -1, firstEnabledOptionIndex = -1;
-        const options = this.options;
+        const options = this._filteredItems;
         const syncOpts = options.map((opt, index) => {
             if (opt.selected) {
                 lastSelectedOptionIndex = index;
@@ -272,7 +258,7 @@ let Select = Select_1 = class Select extends UI5Element {
                 icon: opt.icon,
                 value: opt.value,
                 textContent: opt.textContent,
-                tooltip: opt.tooltip,
+                title: opt.title,
                 additionalText: opt.additionalText,
                 id: opt._id,
                 stableDomRef: opt.stableDomRef,
@@ -309,8 +295,8 @@ let Select = Select_1 = class Select extends UI5Element {
         });
     }
     attachMenuListeners(menu) {
-        menu.addEventListener("ui5-close", this._onMenuClose);
-        menu.addEventListener("ui5-open", this._onMenuOpen);
+        menu.addEventListener("ui5-after-close", this._onMenuClose);
+        menu.addEventListener("ui5-after-open", this._onMenuOpen);
         menu.addEventListener("ui5-before-open", this._onMenuBeforeOpen);
         // @ts-ignore
         menu.addEventListener("ui5-option-click", this._onMenuClick);
@@ -318,23 +304,36 @@ let Select = Select_1 = class Select extends UI5Element {
         menu.addEventListener("ui5-menu-change", this._onMenuChange);
     }
     detachMenuListeners(menu) {
-        menu.removeEventListener("ui5-close", this._onMenuClose);
-        menu.removeEventListener("ui5-open", this._onMenuOpen);
+        menu.removeEventListener("ui5-after-close", this._onMenuClose);
+        menu.removeEventListener("ui5-after-open", this._onMenuOpen);
         menu.removeEventListener("ui5-before-open", this._onMenuBeforeOpen);
         // @ts-ignore
         menu.removeEventListener("ui5-option-click", this._onMenuClick);
         // @ts-ignore
         menu.removeEventListener("ui5-menu-change", this._onMenuChange);
     }
+    _enableFormSupport() {
+        const formSupport = getFeature("FormSupport");
+        if (formSupport) {
+            formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+                const selectElement = element;
+                nativeInput.disabled = !!element.disabled;
+                nativeInput.value = selectElement.value;
+            });
+        }
+        else if (this.name) {
+            console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
+        }
+    }
     _onkeydown(e) {
         const isTab = (isTabNext(e) || isTabPrevious(e));
         if (isTab && this._isPickerOpen) {
             const menu = this._getSelectMenu();
             if (menu) {
-                menu.close(true /* preventFocusRestore */);
+                menu.close(false, false, true /* preventFocusRestore */);
             }
             else {
-                this.responsivePopover.open = false;
+                this.responsivePopover.close();
             }
         }
         else if (isShow(e)) {
@@ -385,6 +384,7 @@ let Select = Select_1 = class Select extends UI5Element {
             this._changeSelectedItem(this._selectedIndex, nextIndex);
             if (currentIndex !== this._selectedIndex) {
                 this.itemSelectionAnnounce();
+                this._scrollSelectedItem();
             }
         }
     }
@@ -545,7 +545,7 @@ let Select = Select_1 = class Select extends UI5Element {
         if (menu) {
             return menu.options;
         }
-        return this.options;
+        return this._filteredItems;
     }
     get hasCustomLabel() {
         return !!this.label.length;
@@ -562,18 +562,18 @@ let Select = Select_1 = class Select extends UI5Element {
     }
     get valueStateTextMappings() {
         return {
-            [ValueState.Positive]: Select_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            [ValueState.Success]: Select_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
             [ValueState.Information]: Select_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
-            [ValueState.Negative]: Select_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            [ValueState.Critical]: Select_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            [ValueState.Error]: Select_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            [ValueState.Warning]: Select_1.i18nBundle.getText(VALUE_STATE_WARNING),
         };
     }
     get valueStateTypeMappings() {
         return {
-            [ValueState.Positive]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+            [ValueState.Success]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
             [ValueState.Information]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
-            [ValueState.Negative]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-            [ValueState.Critical]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+            [ValueState.Error]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+            [ValueState.Warning]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
         };
     }
     get valueStateText() {
@@ -610,16 +610,16 @@ let Select = Select_1 = class Select extends UI5Element {
     get _effectiveTabIndex() {
         return this.disabled
             || (this.responsivePopover // Handles focus on Tab/Shift + Tab when the popover is opened
-                && this.responsivePopover.open) ? "-1" : "0";
+                && this.responsivePopover.opened) ? "-1" : "0";
     }
     /**
     * This method is relevant for sap_horizon theme only
     */
     get _valueStateMessageInputIcon() {
         const iconPerValueState = {
-            Negative: "error",
-            Critical: "alert",
-            Positive: "sys-enter-2",
+            Error: "error",
+            Warning: "alert",
+            Success: "sys-enter-2",
             Information: "information",
         };
         return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
@@ -631,9 +631,9 @@ let Select = Select_1 = class Select extends UI5Element {
         return {
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
-                "ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
-                "ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
-                "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+                "ui5-valuestatemessage--success": this.valueState === ValueState.Success,
+                "ui5-valuestatemessage--error": this.valueState === ValueState.Error,
+                "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
                 "ui5-valuestatemessage--information": this.valueState === ValueState.Information,
             },
             popover: {
@@ -647,8 +647,8 @@ let Select = Select_1 = class Select extends UI5Element {
                 "max-width": `${this.offsetWidth}px`,
             },
             responsivePopoverHeader: {
-                "display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
-                "width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
+                "display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
+                "width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
             },
             responsivePopover: {
                 "min-width": `${this.offsetWidth}px`,
@@ -665,7 +665,7 @@ let Select = Select_1 = class Select extends UI5Element {
         return !this.valueStateMessageText.length && this.hasValueStateText;
     }
     get hasValueStateText() {
-        return this.hasValueState && this.valueState !== ValueState.Positive;
+        return this.hasValueState && this.valueState !== ValueState.Success;
     }
     get shouldOpenValueStateMessagePopover() {
         return this.focused && this.hasValueStateText && !this._iconPressed
@@ -677,6 +677,9 @@ let Select = Select_1 = class Select extends UI5Element {
     get _isPhone() {
         return isPhone();
     }
+    get _filteredItems() {
+        return this.options.filter(option => !option.disabled);
+    }
     itemSelectionAnnounce() {
         let text;
         const optionsCount = this.selectOptions.length;
@@ -686,15 +689,14 @@ let Select = Select_1 = class Select extends UI5Element {
             announce(text, InvisibleMessageMode.Polite);
         }
     }
-    openValueStatePopover() {
-        this.valueStatePopover = this._getPopover();
+    async openValueStatePopover() {
+        this.valueStatePopover = await this._getPopover();
         if (this.valueStatePopover) {
-            this.valueStatePopover.opener = this;
-            this.valueStatePopover.open = true;
+            this.valueStatePopover.showAt(this);
         }
     }
     closeValueStatePopover() {
-        this.valueStatePopover && (this.valueStatePopover.open = false);
+        this.valueStatePopover && this.valueStatePopover.close();
     }
     toggleValueStatePopover(open) {
         if (open) {
@@ -707,8 +709,9 @@ let Select = Select_1 = class Select extends UI5Element {
     get selectedOptionIcon() {
         return this.selectedOption && this.selectedOption.icon;
     }
-    _getPopover() {
-        return this.shadowRoot.querySelector("[ui5-popover]");
+    async _getPopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector("[ui5-popover]");
     }
     static async onDefine() {
         Select_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
@@ -759,6 +762,9 @@ __decorate([
 __decorate([
     slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 ], Select.prototype, "options", void 0);
+__decorate([
+    slot()
+], Select.prototype, "formSupport", void 0);
 __decorate([
     slot()
 ], Select.prototype, "valueStateMessage", void 0);
@@ -769,11 +775,11 @@ Select = Select_1 = __decorate([
     customElement({
         tag: "ui5-select",
         languageAware: true,
-        formAssociated: true,
         renderer: litRender,
         template: SelectTemplate,
-        styles: [
-            selectCss,
+        staticAreaTemplate: SelectPopoverTemplate,
+        styles: selectCss,
+        staticAreaStyles: [
             ResponsivePopoverCommonCss,
             ValueStateMessageCss,
             SelectPopoverCss,