@vaadin/vaadin-select 2.4.1 → 2.4.4

package/README.md

@@ -1,21 +1,18 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-select)](https://www.npmjs.com/package/@vaadin/vaadin-select)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-select)](https://github.com/vaadin/vaadin-select/releases)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-select)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-select.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-select)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-select/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-select?branch=master)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+# <vaadin-select>
 
-[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-select)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-select.svg)](https://vaadin.com/directory/component/vaadinvaadin-select)
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-select) monorepository.
+> This repository contains the source code and releases of `<vaadin-select>` for the Vaadin versions 10 to 19.
 
-# &lt;vaadin-select&gt;
+[&lt;vaadin-select&gt;](https://vaadin.com/components/vaadin-select) is a Web Component similar to a native browser select element, part of the [Vaadin components](https://vaadin.com/components).
 
-[Live Demo ↗](https://cdn.vaadin.com/vaadin-select/2.0.0-beta1/demo)
+[Live Demo ↗](https://vaadin.com/components/vaadin-select/html-examples)
 |
-[API documentation ↗](https://cdn.vaadin.com/vaadin-select/2.0.0-beta1/#/elements/vaadin-select)
+[API documentation ↗](https://vaadin.com/components/vaadin-select/html-api)
 
-
-[&lt;vaadin-select&gt;](https://vaadin.com/components/vaadin-select) is a Web Component similar to a native browser select element, part of the [Vaadin components](https://vaadin.com/components).
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-select)](https://www.npmjs.com/package/@vaadin/vaadin-select)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-select)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-select)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 <!--
 ```

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-select",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-select",
-  "version": "2.4.1",
+  "version": "2.4.4",
   "main": "vaadin-select.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -25,8 +25,6 @@
     "theme"
   ],
   "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
@@ -47,10 +45,9 @@
     "@vaadin/vaadin-material-styles": "^1.3.2",
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
-  "scripts": {
-  "generate-typings": "gen-typescript-declarations --outDir . --verify"
-},
-"devDependencies": {
+  "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/iron-test-helpers": "^3.0.0",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-form": "^3.0.0",
@@ -60,5 +57,9 @@
     "@vaadin/vaadin-demo-helpers": "^3.1.0",
     "@vaadin/vaadin-button": "^2.4.0",
     "@vaadin/vaadin-icons": "^4.3.1"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

package/src/vaadin-select-overlay.js

@@ -15,6 +15,22 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-select-overlay-styles" t
         align-items: flex-start;
         justify-content: flex-start;
       }
+
+      :host([bottom-aligned]) {
+        justify-content: flex-end;
+      }
+
+      :host([right-aligned]) {
+        align-items: flex-end;
+      }
+
+      :host([dir="rtl"]) {
+        align-items: flex-end;
+      }
+
+      :host([dir="rtl"][right-aligned]) {
+        align-items: flex-start;
+      }
     </style>
   </template>
 </dom-module>`;

package/src/vaadin-select.js

@@ -178,7 +178,7 @@ class SelectElement extends
   }
 
   static get version() {
-    return '2.4.0';
+    return '2.4.4';
   }
 
   static get properties() {
@@ -405,6 +405,10 @@ class SelectElement extends
    * Manually invoke existing renderer.
    */
   render() {
+    if (!this._overlayElement) {
+      return;
+    }
+
     this._overlayElement.render();
     if (this._menuElement && this._menuElement.items) {
       this._updateSelectedItem(this.value, this._menuElement.items);
@@ -562,13 +566,9 @@ class SelectElement extends
       this._setPosition();
       window.addEventListener('scroll', this._boundSetPosition, true);
     } else if (wasOpened) {
-      if (this._phone) {
-        this._setFocused(false);
-      } else {
-        this.focusElement.focus();
-        if (this._openedWithFocusRing) {
-          this.focusElement.setAttribute('focus-ring', '');
-        }
+      this.focusElement.focus();
+      if (this._openedWithFocusRing) {
+        this.focusElement.setAttribute('focus-ring', '');
       }
       this.validate();
       window.removeEventListener('scroll', this._boundSetPosition, true);
@@ -680,17 +680,22 @@ class SelectElement extends
   /** @private */
   _setPosition() {
     const inputRect = this._inputElement.shadowRoot.querySelector('[part~="input-field"]').getBoundingClientRect();
+    const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
     const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
-    const bottomAlign = inputRect.top > (viewportHeight - inputRect.height) / 2;
+    const shouldAlignRight = this.__shouldAlignRight(inputRect, viewportWidth);
+    const shouldAlignBottom = this.__shouldAlignBottom(inputRect, viewportHeight);
 
-    const isRtl = this.getAttribute('dir') === 'rtl';
-    if (isRtl) {
-      this._overlayElement.style.right = document.documentElement.clientWidth - inputRect.right + 'px';
+    if (shouldAlignRight) {
+      this._overlayElement.setAttribute('right-aligned', '');
+      this._overlayElement.style.right = (viewportWidth - inputRect.right) + 'px';
+      this._overlayElement.style.removeProperty('left');
     } else {
+      this._overlayElement.removeAttribute('right-aligned');
       this._overlayElement.style.left = inputRect.left + 'px';
+      this._overlayElement.style.removeProperty('right');
     }
 
-    if (bottomAlign) {
+    if (shouldAlignBottom) {
       this._overlayElement.setAttribute('bottom-aligned', '');
       this._overlayElement.style.removeProperty('top');
       this._overlayElement.style.bottom = (viewportHeight - inputRect.bottom) + 'px';
@@ -703,6 +708,42 @@ class SelectElement extends
     this._overlayElement.updateStyles({'--vaadin-select-text-field-width': inputRect.width + 'px'});
   }
 
+  /** @private */
+  __shouldAlignRight(targetRect, viewportWidth) {
+    const isRTL = this.getAttribute('dir') === 'rtl';
+    const spaceLeft = targetRect.left / viewportWidth;
+    const spaceRight = (viewportWidth - targetRect.right) / viewportWidth;
+
+    if (isRTL) {
+      // When RTL mode, should align the dropdown right
+      // as long as there is enough space on the left side.
+      //
+      // Default alignment for RTL:
+      //
+      //           _____Select_____
+      // ––––––––––––––––––––––––––
+      // | Dropdown               |
+      // ––––––––––––––––––––––––––
+      return spaceLeft > 0.3;
+    }
+
+    // When LTL mode, should align the dropdown right
+    // only when there is not enough space on the right side.
+    //
+    // Default alignment for LTL:
+    //
+    // _____Select_____
+    // ––––––––––––––––––––––––––
+    // | Dropdown               |
+    // ––––––––––––––––––––––––––
+    return spaceRight < 0.3;
+  }
+
+  /** @private */
+  __shouldAlignBottom(targetRect, viewportHeight) {
+    return targetRect.top > (viewportHeight - targetRect.height) / 2;
+  }
+
   /**
    * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
    *

package/theme/lumo/vaadin-select-styles.js

@@ -105,10 +105,6 @@ const $_documentContainer = html`<dom-module id="lumo-select" theme-for="vaadin-
         --_lumo-item-selected-icon-display: block;
       }
 
-      :host([bottom-aligned]) {
-        justify-content: flex-end;
-      }
-
       [part~="overlay"] {
         min-width: var(--vaadin-select-text-field-width);
       }

package/theme/material/vaadin-select-styles.js

@@ -55,10 +55,6 @@ const $_documentContainer = html`<dom-module id="material-select" theme-for="vaa
 </dom-module><dom-module id="material-select-overlay" theme-for="vaadin-select-overlay">
   <template>
     <style include="material-menu-overlay">
-      :host([bottom-aligned]) {
-        justify-content: flex-end;
-      }
-
       [part="overlay"] {
         min-width: var(--vaadin-select-text-field-width);
       }