@vaadin/vaadin-combo-box - npm Package Compare versions

Comparing version 5.2.0-alpha1 to 5.2.0-alpha2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "5.2.0-alpha1",
+  "version": "5.2.0-alpha2",
   "main": "vaadin-combo-box.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-combo-box-dropdown.js

@@ -13,2 +13,15 @@ /**
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<dom-module id="vaadin-combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
+  <template>
+    <style>
+      :host {
+        width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+      }
+    </style>
+  </template>
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);
 /**
@@ -32,2 +45,14 @@ * The overlay element.
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    const dropdown = this.__dataHost;
+    const comboBoxOverlay = dropdown.getRootNode().host;
+    const comboBox = comboBoxOverlay && comboBoxOverlay.getRootNode().host;
+    const hostDir = comboBox && comboBox.getAttribute('dir');
+    if (hostDir) {
+      this.setAttribute('dir', hostDir);
+    }
+  }
+
   ready() {
@@ -221,2 +246,28 @@ super.ready();
 
+  _getCustomWidth() {
+    return window.ShadyCSS ?
+      window.ShadyCSS.getComputedStyleValue(this, '--vaadin-combo-box-overlay-width') :
+      getComputedStyle(this).getPropertyValue('--vaadin-combo-box-overlay-width');
+  }
+
+  _setOverlayWidth() {
+    const inputWidth = this.positionTarget.clientWidth + 'px';
+    const customWidth = this._getCustomWidth();
+
+    if (window.ShadyCSS && !window.ShadyCSS.nativeCss) {
+      window.ShadyCSS.styleSubtree(this.$.overlay, {
+        '--vaadin-combo-box-overlay-width': customWidth,
+        '--_vaadin-combo-box-overlay-default-width': inputWidth
+      });
+    } else {
+      this.$.overlay.style.setProperty('--_vaadin-combo-box-overlay-default-width', inputWidth);
+
+      if (customWidth === '') {
+        this.$.overlay.style.removeProperty('--vaadin-combo-box-overlay-width');
+      } else {
+        this.$.overlay.style.setProperty('--vaadin-combo-box-overlay-width', customWidth);
+      }
+    }
+  }
+
   _setPosition(e) {
@@ -247,5 +298,6 @@ if (this.hidden) {
 
-    this.$.overlay.style.width = this.positionTarget.clientWidth + 'px';
     this.$.overlay.style.justifyContent = this.alignedAbove ? 'flex-end' : 'flex-start';
 
+    this._setOverlayWidth();
+
     // TODO: fire only when position actually changes changes
@@ -252,0 +304,0 @@ this.dispatchEvent(new CustomEvent('position-changed'));

src/vaadin-combo-box-item.js

@@ -134,2 +134,7 @@ /**
     }
+
+    const hostDir = this._comboBox.getAttribute('dir');
+    if (hostDir) {
+      this.setAttribute('dir', hostDir);
+    }
   }
@@ -136,0 +141,0 @@

src/vaadin-combo-box.js

@@ -234,3 +234,3 @@ /**
   static get version() {
-    return '5.2.0-alpha1';
+    return '5.2.0-alpha2';
   }
@@ -237,0 +237,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114981

increased by1.62%

Number of downloads

11616

increased by70.12%

Lines of code

2783

increased by1.72%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Published versions last months

0

decreased by-100%

No dependency changes