@ui5/webcomponents 2.0.0-rc.3 → 2.0.0-rc.4

package/dist/Select.js

@@ -11,11 +11,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import connectToComponent from "@ui5/webcomponents-base/dist/connectToComponent.js";
 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";
@@ -30,14 +27,13 @@ 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, } from "./generated/i18n/i18n-defaults.js";
-import Option from "./Option.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 Label from "./Label.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Popover from "./Popover.js";
-import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
+import "./ListItemBase.js";
 // Templates
 import SelectTemplate from "./generated/templates/SelectTemplate.lit.js";
 // Styles
@@ -61,15 +57,10 @@ import SelectPopoverCss from "./generated/themes/SelectPopover.css.js";
  * The available options of the Select are defined by using the Option component.
  * The Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.
  *
- * 2. With SelectMenu (`ui5-select-menu`) and SelectMenuOption (`ui5-select-menu-option`) web components:
+ * 2. With OptionCustom (`ui5-option-custom`) web component.
  *
- * The SelectMenu can be used as alternative to define the Select's dropdown
- * and can be used via the `menu` property of the Select to reference SelectMenu by its ID.
- * The component gives the possibility to customize the Select's dropdown
- * by slotting entirely custom options (via the SelectMenuOption component) and adding custom styles.
- *
- * **Note:** SelectMenu is a popover and placing it top-level in the HTML page is recommended,
- * because some page styles (for example transitions) can misplace the SelectMenu.
+ * Options with custom content are defined by using the OptionCustom component
+ * The OptionCustom component comes with no predefined layout and it expects consumers to define it.
  *
  * ### Keyboard Handling
  * The `ui5-select` provides advanced keyboard handling.
@@ -84,41 +75,41 @@ import SelectPopoverCss from "./generated/themes/SelectPopover.css.js";
  * ### ES6 Module Import
  * `import "@ui5/webcomponents/dist/Select";`
  *
- * `import "@ui5/webcomponents/dist/Option";` (comes with `ui5-select`)
+ * `import "@ui5/webcomponents/dist/Option";`
+ * `import "@ui5/webcomponents/dist/OptionCustom";`
  * @constructor
  * @extends UI5Element
  * @public
  * @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 = [];
         this._selectedIndexBeforeOpen = -1;
         this._escapePressed = false;
         this._lastSelectedOption = null;
         this._typedChars = "";
-        this._onMenuClick = this.onMenuClick.bind(this);
-        this._onMenuClose = this.onMenuClose.bind(this);
-        this._onMenuOpen = this.onMenuOpen.bind(this);
-        this._onMenuBeforeOpen = this.onMenuBeforeOpen.bind(this);
-        this._onMenuChange = this.onMenuChange.bind(this);
-        this._attachMenuListeners = this.attachMenuListeners.bind(this);
-        this._detachMenuListeners = this.detachMenuListeners.bind(this);
         this._upgradeProperty("value");
     }
     onBeforeRendering() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            menu.value = this.value;
-            // To cause invalidation when the menu is used for another Select that could have the same value as the previous.
-            // Otherwise, the menu won't re-render.
-            menu.selectId = this.__id;
-        }
-        else {
-            this._syncSelection();
-        }
-        this._enableFormSupport();
+        this._ensureSingleSelection();
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
     }
     onAfterRendering() {
@@ -128,7 +119,18 @@ let Select = Select_1 = class Select extends UI5Element {
                 this._listWidth = this.responsivePopover.offsetWidth;
             }
         }
-        this._attachRealDomRefs();
+    }
+    _ensureSingleSelection() {
+        // if no item is selected => select the first one
+        // if multiple items are selected => select the last selected one
+        let selectedIndex = this.options.findLastIndex(option => option.selected);
+        selectedIndex = selectedIndex === -1 ? 0 : selectedIndex;
+        for (let i = 0; i < this.options.length; i++) {
+            this.options[i].selected = selectedIndex === i;
+            if (selectedIndex === i) {
+                break;
+            }
+        }
     }
     _onfocusin() {
         this.focused = true;
@@ -137,10 +139,6 @@ let Select = Select_1 = class Select extends UI5Element {
         this.focused = false;
     }
     get _isPickerOpen() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            return menu.open;
-        }
         return !!this.responsivePopover && this.responsivePopover.open;
     }
     _respPopover() {
@@ -162,177 +160,46 @@ let Select = Select_1 = class Select extends UI5Element {
      * @formEvents change liveChange
      */
     set value(newValue) {
-        const menu = this._getSelectMenu();
-        const selectOptions = Array.from(menu ? menu.children : this.children);
-        selectOptions.forEach(option => {
+        const options = Array.from(this.children);
+        options.forEach(option => {
             option.selected = !!((option.getAttribute("value") || option.textContent) === newValue);
         });
     }
     get value() {
         return this.selectedOption?.value || this.selectedOption?.textContent || "";
     }
+    get _selectedIndex() {
+        return this.options.findIndex(option => option.selected);
+    }
     /**
      * Currently selected `ui5-option` element.
      * @public
      * @default undefined
      */
     get selectedOption() {
-        return this.selectOptions.find(option => option.selected);
-    }
-    onMenuClick(e) {
-        const optionIndex = e.detail.optionIndex;
-        this._handleSelectionChange(optionIndex);
-    }
-    onMenuBeforeOpen() {
-        this._beforeOpen();
+        return this.options.find(option => option.selected);
     }
-    onMenuOpen() {
-        this._afterOpen();
-    }
-    onMenuClose() {
-        this._afterClose();
-    }
-    onMenuChange(e) {
-        this._text = e.detail.text;
-        this._selectedIndex = e.detail.selectedIndex;
-    }
-    _toggleSelectMenu() {
-        const menu = this._getSelectMenu();
-        if (!menu) {
-            return;
-        }
-        if (menu.open) {
-            menu.close();
-        }
-        else {
-            menu.showAt(this, this.offsetWidth);
-        }
-    }
-    onExitDOM() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            this._detachMenuListeners(menu);
-        }
+    get text() {
+        return this.selectedOption?.effectiveDisplayText;
     }
     _toggleRespPopover() {
         if (this.disabled || this.readonly) {
             return;
         }
         this._iconPressed = true;
-        const menu = this._getSelectMenu();
-        if (menu) {
-            this._toggleSelectMenu();
-            return;
-        }
         this.responsivePopover = this._respPopover();
         if (this._isPickerOpen) {
-            this.responsivePopover.close();
+            this.responsivePopover.open = false;
         }
         else {
-            this.responsivePopover.showAt(this);
-        }
-    }
-    _attachRealDomRefs() {
-        this.responsivePopover = 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 syncOpts = options.map((opt, index) => {
-            if (opt.selected) {
-                lastSelectedOptionIndex = index;
-            }
-            if (firstEnabledOptionIndex === -1) {
-                firstEnabledOptionIndex = index;
-            }
-            opt.selected = false;
-            opt.focused = false;
-            return {
-                selected: false,
-                focused: false,
-                icon: opt.icon,
-                value: opt.value,
-                textContent: opt.textContent,
-                tooltip: opt.tooltip,
-                additionalText: opt.additionalText,
-                id: opt._id,
-                stableDomRef: opt.stableDomRef,
-            };
-        });
-        if (lastSelectedOptionIndex > -1) {
-            syncOpts[lastSelectedOptionIndex].selected = true;
-            syncOpts[lastSelectedOptionIndex].focused = true;
-            options[lastSelectedOptionIndex].selected = true;
-            options[lastSelectedOptionIndex].focused = true;
-            this._text = syncOpts[lastSelectedOptionIndex].textContent;
-            this._selectedIndex = lastSelectedOptionIndex;
-        }
-        else {
-            this._text = "";
-            this._selectedIndex = -1;
-            if (syncOpts[firstEnabledOptionIndex]) {
-                syncOpts[firstEnabledOptionIndex].selected = true;
-                syncOpts[firstEnabledOptionIndex].focused = true;
-                options[firstEnabledOptionIndex].selected = true;
-                options[firstEnabledOptionIndex].focused = true;
-                this._selectedIndex = firstEnabledOptionIndex;
-                this._text = options[firstEnabledOptionIndex].textContent;
-            }
-        }
-        this._syncedOptions = syncOpts;
-    }
-    _getSelectMenu() {
-        return connectToComponent({
-            host: this,
-            propName: "menu",
-            onConnect: this._attachMenuListeners,
-            onDisconnect: this._detachMenuListeners,
-        });
-    }
-    attachMenuListeners(menu) {
-        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);
-        // @ts-ignore
-        menu.addEventListener("ui5-menu-change", this._onMenuChange);
-    }
-    detachMenuListeners(menu) {
-        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
+            this.responsivePopover.opener = this;
+            this.responsivePopover.open = true;
         }
     }
     _onkeydown(e) {
         const isTab = (isTabNext(e) || isTabPrevious(e));
         if (isTab && this._isPickerOpen) {
-            const menu = this._getSelectMenu();
-            if (menu) {
-                menu.close(false, false, true /* preventFocusRestore */);
-            }
-            else {
-                this.responsivePopover.close();
-            }
+            this.responsivePopover.open = false;
         }
         else if (isShow(e)) {
             e.preventDefault();
@@ -378,19 +245,20 @@ let Select = Select_1 = class Select extends UI5Element {
         const currentIndex = this._selectedIndex;
         const itemToSelect = this._searchNextItemByText(text);
         if (itemToSelect) {
-            const nextIndex = this.selectOptions.indexOf(itemToSelect);
+            const nextIndex = this.options.indexOf(itemToSelect);
             this._changeSelectedItem(this._selectedIndex, nextIndex);
             if (currentIndex !== this._selectedIndex) {
                 this.itemSelectionAnnounce();
+                this._scrollSelectedItem();
             }
         }
     }
     _searchNextItemByText(text) {
-        let orderedOptions = this.selectOptions.slice(0);
+        let orderedOptions = this.options.slice(0);
         const optionsAfterSelected = orderedOptions.splice(this._selectedIndex + 1, orderedOptions.length - this._selectedIndex);
         const optionsBeforeSelected = orderedOptions.splice(0, orderedOptions.length - 1);
         orderedOptions = optionsAfterSelected.concat(optionsBeforeSelected);
-        return orderedOptions.find(option => (option.displayText || option.textContent || "").toLowerCase().startsWith(text));
+        return orderedOptions.find(option => option.effectiveDisplayText.toLowerCase().startsWith(text));
     }
     _handleHomeKey(e) {
         e.preventDefault();
@@ -404,7 +272,7 @@ let Select = Select_1 = class Select extends UI5Element {
         if (this.readonly) {
             return;
         }
-        const lastIndex = this.selectOptions.length - 1;
+        const lastIndex = this.options.length - 1;
         this._changeSelectedItem(this._selectedIndex, lastIndex);
     }
     _onkeyup(e) {
@@ -417,24 +285,28 @@ let Select = Select_1 = class Select extends UI5Element {
             }
         }
     }
-    _getSelectedItemIndex(item) {
-        return this.selectOptions.findIndex(option => `${option._id}-li` === item.id);
+    _getItemIndex(item) {
+        return this.options.indexOf(item);
     }
     _select(index) {
-        this.selectOptions[this._selectedIndex].selected = false;
+        if (index < 0 || index >= this.options.length || this.options.length === 0) {
+            return;
+        }
+        if (this.options[this._selectedIndex]) {
+            this.options[this._selectedIndex].selected = false;
+        }
         if (this._selectedIndex !== index) {
-            this.fireEvent("live-change", { selectedOption: this.selectOptions[index] });
+            this.fireEvent("live-change", { selectedOption: this.options[index] });
         }
-        this._selectedIndex = index;
-        this.selectOptions[index].selected = true;
+        this.options[index].selected = true;
     }
     /**
      * The user clicked on an item from the list
      * @private
      */
     _handleItemPress(e) {
-        const item = e.detail.item;
-        const selectedItemIndex = this._getSelectedItemIndex(item);
+        const listItem = e.detail.item;
+        const selectedItemIndex = this._getItemIndex(listItem);
         this._handleSelectionChange(selectedItemIndex);
     }
     _itemMousedown(e) {
@@ -489,14 +361,13 @@ let Select = Select_1 = class Select extends UI5Element {
         }
     }
     _changeSelectedItem(oldIndex, newIndex) {
-        const options = this.selectOptions;
+        const options = this.options;
         const previousOption = options[oldIndex];
         previousOption.selected = false;
         previousOption.focused = false;
         const nextOption = options[newIndex];
         nextOption.selected = true;
         nextOption.focused = true;
-        this._selectedIndex = newIndex;
         this.fireEvent("live-change", { selectedOption: nextOption });
         if (!this._isPickerOpen) {
             // arrow pressed on closed picker - do selection change
@@ -504,10 +375,6 @@ let Select = Select_1 = class Select extends UI5Element {
         }
     }
     _getNextOptionIndex() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            return this._selectedIndex === (menu.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1);
-        }
         return this._selectedIndex === (this.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1);
     }
     _getPreviousOptionIndex() {
@@ -515,13 +382,19 @@ let Select = Select_1 = class Select extends UI5Element {
     }
     _beforeOpen() {
         this._selectedIndexBeforeOpen = this._selectedIndex;
-        this._lastSelectedOption = this.selectOptions[this._selectedIndex];
+        this._lastSelectedOption = this.options[this._selectedIndex];
     }
     _afterOpen() {
         this.opened = true;
         this.fireEvent("open");
         this.itemSelectionAnnounce();
         this._scrollSelectedItem();
+        this._applyFocusToSelectedItem();
+    }
+    _applyFocusToSelectedItem() {
+        this.options.forEach(option => {
+            option.focused = option.selected;
+        });
     }
     _afterClose() {
         this.opened = false;
@@ -531,29 +404,20 @@ let Select = Select_1 = class Select extends UI5Element {
             this._select(this._selectedIndexBeforeOpen);
             this._escapePressed = false;
         }
-        else if (this._lastSelectedOption !== this.selectOptions[this._selectedIndex]) {
-            this._fireChangeEvent(this.selectOptions[this._selectedIndex]);
-            this._lastSelectedOption = this.selectOptions[this._selectedIndex];
+        else if (this._lastSelectedOption !== this.options[this._selectedIndex]) {
+            this._fireChangeEvent(this.options[this._selectedIndex]);
+            this._lastSelectedOption = this.options[this._selectedIndex];
         }
         this.fireEvent("close");
     }
-    get selectOptions() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            return menu.options;
-        }
-        return this.options;
-    }
     get hasCustomLabel() {
         return !!this.label.length;
     }
     _fireChangeEvent(selectedOption) {
         const changePrevented = !this.fireEvent("change", { selectedOption }, true);
         //  Angular two way data binding
-        this.selectedItem = selectedOption.textContent;
         this.fireEvent("selected-item-changed");
         if (changePrevented) {
-            this.selectedItem = this._lastSelectedOption.textContent;
             this._select(this._selectedIndexBeforeOpen);
         }
     }
@@ -602,7 +466,7 @@ let Select = Select_1 = class Select extends UI5Element {
         return Select_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
     get _currentlySelectedOption() {
-        return this.selectOptions[this._selectedIndex];
+        return this.options[this._selectedIndex];
     }
     get _effectiveTabIndex() {
         return this.disabled
@@ -676,7 +540,7 @@ let Select = Select_1 = class Select extends UI5Element {
     }
     itemSelectionAnnounce() {
         let text;
-        const optionsCount = this.selectOptions.length;
+        const optionsCount = this.options.length;
         const itemPositionText = Select_1.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount);
         if (this.focused && this._currentlySelectedOption) {
             text = `${this._currentlySelectedOption.textContent} ${this._isPickerOpen ? itemPositionText : ""}`;
@@ -686,11 +550,12 @@ let Select = Select_1 = class Select extends UI5Element {
     openValueStatePopover() {
         this.valueStatePopover = this._getPopover();
         if (this.valueStatePopover) {
-            this.valueStatePopover.showAt(this);
+            this.valueStatePopover.opener = this;
+            this.valueStatePopover.open = true;
         }
     }
     closeValueStatePopover() {
-        this.valueStatePopover && this.valueStatePopover.close();
+        this.valueStatePopover && (this.valueStatePopover.open = false);
     }
     toggleValueStatePopover(open) {
         if (open) {
@@ -710,9 +575,6 @@ let Select = Select_1 = class Select extends UI5Element {
         Select_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
 };
-__decorate([
-    property({ validator: DOMReference })
-], Select.prototype, "menu", void 0);
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "disabled", void 0);
@@ -734,9 +596,6 @@ __decorate([
 __decorate([
     property()
 ], Select.prototype, "accessibleNameRef", void 0);
-__decorate([
-    property({ type: String, noAttribute: true })
-], Select.prototype, "_text", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Select.prototype, "_iconPressed", void 0);
@@ -749,15 +608,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "focused", void 0);
-__decorate([
-    property({ validator: Integer, defaultValue: -1, noAttribute: true })
-], Select.prototype, "_selectedIndex", void 0);
 __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);
@@ -768,6 +621,7 @@ Select = Select_1 = __decorate([
     customElement({
         tag: "ui5-select",
         languageAware: true,
+        formAssociated: true,
         renderer: litRender,
         template: SelectTemplate,
         styles: [
@@ -777,12 +631,10 @@ Select = Select_1 = __decorate([
             SelectPopoverCss,
         ],
         dependencies: [
-            Option,
             Label,
             ResponsivePopover,
             Popover,
             List,
-            StandardListItem,
             Icon,
             Button,
         ],