@vaadin/select - npm Package Compare versions

Comparing version 22.0.0-alpha5 to 22.0.0-alpha6

package.json

 {
   "name": "@vaadin/select",
-  "version": "22.0.0-alpha5",
+  "version": "22.0.0-alpha6",
   "description": "vaadin-select",
@@ -29,21 +29,21 @@ "main": "vaadin-select.js",
     "@polymer/iron-media-query": "^3.0.0",
-    "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^22.0.0-alpha5",
-    "@vaadin/field-base": "^22.0.0-alpha5",
-    "@vaadin/input-container": "^22.0.0-alpha5",
-    "@vaadin/text-field": "^22.0.0-alpha5",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
-    "@vaadin/vaadin-item": "^22.0.0-alpha5",
-    "@vaadin/vaadin-list-box": "^22.0.0-alpha5",
-    "@vaadin/vaadin-list-mixin": "^22.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
-    "@vaadin/vaadin-overlay": "^22.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
+    "@vaadin/button": "^22.0.0-alpha6",
+    "@vaadin/component-base": "^22.0.0-alpha6",
+    "@vaadin/field-base": "^22.0.0-alpha6",
+    "@vaadin/input-container": "^22.0.0-alpha6",
+    "@vaadin/text-field": "^22.0.0-alpha6",
+    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
+    "@vaadin/vaadin-item": "^22.0.0-alpha6",
+    "@vaadin/vaadin-list-box": "^22.0.0-alpha6",
+    "@vaadin/vaadin-list-mixin": "^22.0.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
+    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
+    "@vaadin/vaadin-overlay": "^22.0.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha5",
+    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha6",
     "lit": "^2.0.0-rc.1",
@@ -55,3 +55,3 @@ "sinon": "^9.2.0"
   },
-  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
+  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
 }

src/interfaces.d.ts

@@ -1,2 +0,2 @@
-import { SelectElement } from './vaadin-select';
+import { Select } from './vaadin-select';
 
@@ -11,3 +11,3 @@ /**
  */
-export type SelectRenderer = (root: HTMLElement, select?: SelectElement) => void;
+export type SelectRenderer = (root: HTMLElement, select?: Select) => void;
 
@@ -14,0 +14,0 @@ /**

src/vaadin-select-overlay.js

@@ -8,2 +8,3 @@ /**
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
 
@@ -27,3 +28,3 @@ registerStyles(
  */
-class SelectOverlayElement extends OverlayElement {
+class SelectOverlayElement extends PositionMixin(OverlayElement) {
   static get is() {
@@ -30,0 +31,0 @@ return 'vaadin-select-overlay';

src/vaadin-select.d.ts

@@ -11,3 +11,3 @@ /**
 import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
-import { SlotMixin } from '@vaadin/field-base/src/slot-mixin.js';
+import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { SelectEventMap, SelectRenderer } from './interfaces';
@@ -144,7 +144,2 @@
   /**
-   * String used for the helper text.
-   */
-  helperText: string | null | undefined;
-
-  /**
    * When present, it specifies that the element is read-only.
@@ -195,2 +190,2 @@ */
 
-export { SelectElement };
+export { Select };

src/vaadin-select.js

@@ -7,5 +7,3 @@ /**
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import '@polymer/iron-media-query/iron-media-query.js';
@@ -17,3 +15,3 @@ import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
-import { SlotMixin } from '@vaadin/field-base/src/slot-mixin.js';
+import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
@@ -113,5 +111,3 @@ import '@vaadin/input-container/src/vaadin-input-container.js';
 class Select extends DelegateFocusMixin(
-  FieldAriaMixin(
-    LabelMixin(SlotMixin(ElementMixin(ThemableMixin(mixinBehaviors(IronResizableBehavior, PolymerElement)))))
-  )
+  FieldAriaMixin(LabelMixin(SlotMixin(ElementMixin(ThemableMixin(PolymerElement)))))
 ) {
@@ -160,2 +156,3 @@ static get is() {
       <vaadin-select-overlay
+        position-target="[[_inputContainer]]"
         opened="{{opened}}"
@@ -305,3 +302,2 @@ with-backdrop="[[_phone]]"
 
-    this._boundSetPosition = this._setPosition.bind(this);
     this._boundOnKeyDown = this._onKeyDown.bind(this);
@@ -313,3 +309,2 @@ }
     super.connectedCallback();
-    this.addEventListener('iron-resize', this._boundSetPosition);
 
@@ -331,3 +326,2 @@ if (this._valueButton) {
     super.disconnectedCallback();
-    this.removeEventListener('iron-resize', this._boundSetPosition);
     if (this._valueButton) {
@@ -474,2 +468,7 @@ this._valueButton.removeEventListener('keydown', this._boundOnKeyDown);
 
+      this._overlayElement.style.setProperty(
+        '--vaadin-select-text-field-width',
+        this._inputContainer.offsetWidth + 'px'
+      );
+
       // Preserve focus-ring to restore it later
@@ -485,4 +484,2 @@ const hasFocusRing = this.hasAttribute('focus-ring');
       this._menuElement.focus();
-      this._setPosition();
-      window.addEventListener('scroll', this._boundSetPosition, true);
     } else if (wasOpened) {
@@ -498,3 +495,2 @@ if (this._phone) {
       this.validate();
-      window.removeEventListener('scroll', this._boundSetPosition, true);
     }
@@ -623,28 +619,2 @@ }
 
-  /** @private */
-  _setPosition() {
-    const inputRect = this._inputContainer.getBoundingClientRect();
-    const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
-    const bottomAlign = inputRect.top > (viewportHeight - inputRect.height) / 2;
-
-    const isRtl = this.getAttribute('dir') === 'rtl';
-    if (isRtl) {
-      this._overlayElement.style.right = document.documentElement.clientWidth - inputRect.right + 'px';
-    } else {
-      this._overlayElement.style.left = inputRect.left + 'px';
-    }
-
-    if (bottomAlign) {
-      this._overlayElement.setAttribute('bottom-aligned', '');
-      this._overlayElement.style.removeProperty('top');
-      this._overlayElement.style.bottom = viewportHeight - inputRect.bottom + 'px';
-    } else {
-      this._overlayElement.removeAttribute('bottom-aligned');
-      this._overlayElement.style.removeProperty('bottom');
-      this._overlayElement.style.top = inputRect.top + 'px';
-    }
-
-    this._overlayElement.updateStyles({ '--vaadin-select-text-field-width': inputRect.width + 'px' });
-  }
-
   /**
@@ -651,0 +621,0 @@ * Returns true if `value` is valid, and sets the `invalid` flag appropriately.

theme/lumo/vaadin-select-styles.js

@@ -41,2 +41,6 @@ /**
   }
+
+  :host([theme~='small']) [part='input-field'] ::slotted([slot='value']) {
+    --lumo-button-size: var(--lumo-size-s);
+  }
 `;
@@ -71,6 +75,2 @@
 
-  :host([bottom-aligned]) {
-    justify-content: flex-end;
-  }
-
   [part~='overlay'] {
@@ -77,0 +77,0 @@ min-width: var(--vaadin-select-text-field-width);

theme/material/vaadin-select-styles.js

@@ -61,6 +61,2 @@ /**
 const selectOverlay = css`
-  :host([bottom-aligned]) {
-    justify-content: flex-end;
-  }
-
   [part='overlay'] {
@@ -67,0 +63,0 @@ min-width: var(--vaadin-select-text-field-width);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

48053

decreased by-2.97%

Lines of code

990

decreased by-3.23%

Dependency changes

• + Added@vaadin/component-base@^22.0.0-alpha6

• - Removed@polymer/iron-resizable-behavior@^3.0.0

• - Removed@polymer/iron-resizable-behavior@3.0.1(transitive)

• Updated@vaadin/button@^22.0.0-alpha6

• Updated@vaadin/field-base@^22.0.0-alpha6

• Updated@vaadin/input-container@^22.0.0-alpha6

• Updated@vaadin/text-field@^22.0.0-alpha6

• Updated@vaadin/vaadin-element-mixin@^22.0.0-alpha6

• Updated@vaadin/vaadin-item@^22.0.0-alpha6

• Updated@vaadin/vaadin-list-box@^22.0.0-alpha6

• Updated@vaadin/vaadin-list-mixin@^22.0.0-alpha6

• Updated@vaadin/vaadin-lumo-styles@^22.0.0-alpha6

• Updated@vaadin/vaadin-material-styles@^22.0.0-alpha6

• Updated@vaadin/vaadin-overlay@^22.0.0-alpha6

• Updated@vaadin/vaadin-themable-mixin@^22.0.0-alpha6