@vaadin/combo-box - npm Package Compare versions

Comparing version 22.0.0-alpha9 to 22.0.0-beta1

package.json

 {
   "name": "@vaadin/combo-box",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0-beta1",
   "publishConfig": {
@@ -36,22 +36,21 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-alpha9",
-    "@vaadin/field-base": "22.0.0-alpha9",
-    "@vaadin/input-container": "22.0.0-alpha9",
-    "@vaadin/item": "22.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-overlay": "22.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9",
-    "@vaadin/virtual-list": "22.0.0-alpha9"
+    "@vaadin/component-base": "22.0.0-beta1",
+    "@vaadin/field-base": "22.0.0-beta1",
+    "@vaadin/input-container": "22.0.0-beta1",
+    "@vaadin/item": "22.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
+    "@vaadin/vaadin-overlay": "22.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "22.0.0-alpha9",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-alpha9",
+    "@vaadin/dialog": "22.0.0-beta1",
+    "@vaadin/polymer-legacy-adapter": "22.0.0-beta1",
     "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/text-field": "22.0.0-alpha9",
+    "@vaadin/text-field": "22.0.0-beta1",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

src/vaadin-combo-box-item.js

@@ -11,3 +11,3 @@ /**
 /**
- * The default element used for items in the vaadin-combo-box.
+ * An item element used by the `<vaadin-combo-box>` dropdown.
  *
@@ -18,12 +18,13 @@ * ### Styling
  *
- * Part name | Description
- * ---|---
- * `content` | The element that wraps the item content
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
  *
  * The following state attributes are exposed for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `selected` | Set when the item is selected | :host
- * `focused` | Set when the item is focused | :host
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
  *
@@ -48,2 +49,3 @@ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
       </style>
+      <span part="checkmark" aria-hidden="true"></span>
       <div part="content">
@@ -50,0 +52,0 @@ <slot></slot>

src/vaadin-combo-box-overlay.js

@@ -26,2 +26,4 @@ /**
 
+let memoizedTemplate;
+
 /**
@@ -38,2 +40,11 @@ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
 
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
+    }
+
+    return memoizedTemplate;
+  }
+
   connectedCallback() {
@@ -40,0 +51,0 @@ super.connectedCallback();

src/vaadin-combo-box-scroller.js

@@ -7,3 +7,3 @@ /**
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { Virtualizer } from '@vaadin/virtual-list/src/virtualizer.js';
+import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
@@ -85,3 +85,4 @@
       opened: {
-        type: Boolean
+        type: Boolean,
+        observer: '__openedChanged'
       },
@@ -139,2 +140,8 @@
 
+  __openedChanged(opened) {
+    if (this.__virtualizer && opened) {
+      this.__virtualizer.update();
+    }
+  }
+
   /** @protected */
@@ -232,2 +239,3 @@ ready() {
       this.setAttribute('aria-setsize', items.length);
+      this.__virtualizer.update();
     }
@@ -246,2 +254,3 @@ }
     if (this.__virtualizer && index >= 0) {
+      this.__virtualizer.update();
       this.scrollIntoView(index);
@@ -263,2 +272,3 @@ }
       item.addEventListener('click', this.__boundOnItemClick);
+      // Negative tabindex prevents the item content from being focused.
       item.tabIndex = '-1';
@@ -265,0 +275,0 @@ item.style.width = '100%';

src/vaadin-combo-box.d.ts

@@ -167,22 +167,21 @@ /**
  *
- * The following shadow DOM parts are available for styling:
+ * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
  *
- * Part name | Description
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ *
+ * Part name       | Description
  * ----------------|----------------
- * `text-field` | The text field
  * `toggle-button` | The toggle button
  *
- * The following state attributes are available for styling:
+ * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `opened` | Set when the combo box dropdown is open | :host
- * `disabled` | Set to a disabled combo box | :host
- * `readonly` | Set to a read only combo box | :host
- * `has-value` | Set when the element has a value | :host
- * `invalid` | Set when the element is invalid | :host
- * `focused` | Set when the element is focused | :host
- * `focus-ring` | Set when the element is keyboard focused | :host
+ * Attribute | Description | Part name
+ * ----------|-------------|------------
+ * `opened`  | Set when the combo box dropdown is open | :host
  * `loading` | Set when new items are expected | :host
  *
+ * If you want to replace the default `<input>` and its container with a custom implementation to get full control
+ * over the input field, consider using the [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
+ *
  * ### Internal components
@@ -194,4 +193,4 @@ *
  * - `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
- * - [`<vaadin-text-field>`](#/elements/vaadin-text-field)
- * - `<vaadin-combo-box-item>`
+ * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
@@ -198,0 +197,0 @@ * Note: the `theme` attribute value set on `<vaadin-combo-box>` is

src/vaadin-combo-box.js

@@ -125,22 +125,21 @@ /**
  *
- * The following shadow DOM parts are available for styling:
+ * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
  *
- * Part name | Description
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ *
+ * Part name       | Description
  * ----------------|----------------
- * `text-field` | The text field
  * `toggle-button` | The toggle button
  *
- * The following state attributes are available for styling:
+ * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `opened` | Set when the combo box dropdown is open | :host
- * `disabled` | Set to a disabled combo box | :host
- * `readonly` | Set to a read only combo box | :host
- * `has-value` | Set when the element has a value | :host
- * `invalid` | Set when the element is invalid | :host
- * `focused` | Set when the element is focused | :host
- * `focus-ring` | Set when the element is keyboard focused | :host
+ * Attribute | Description | Part name
+ * ----------|-------------|------------
+ * `opened`  | Set when the combo box dropdown is open | :host
  * `loading` | Set when new items are expected | :host
  *
+ * If you want to replace the default `<input>` and its container with a custom implementation to get full control
+ * over the input field, consider using the [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
+ *
  * ### Internal components
@@ -152,4 +151,4 @@ *
  * - `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
- * - [`<vaadin-text-field>`](#/elements/vaadin-text-field)
- * - `<vaadin-combo-box-item>`
+ * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
@@ -266,3 +265,3 @@ * Note: the `theme` attribute value set on `<vaadin-combo-box>` is
     );
-    this.addController(new AriaLabelController(this.inputElement, this._labelNode));
+    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
@@ -269,0 +268,0 @@ this._toggleElement = this.$.toggleButton;

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

Improved metrics

Total package byte prevSize

130726

increased by0.91%

Dependency count

10

decreased by-9.09%

Lines of code

3355

increased by0.51%

Dependency changes

• + Added@vaadin/component-base@22.0.0-beta1(transitive)

• + Added@vaadin/field-base@22.0.0-beta1(transitive)

• + Added@vaadin/icon@22.0.0-beta1(transitive)

• + Added@vaadin/input-container@22.0.0-beta1(transitive)

• + Added@vaadin/item@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-lumo-styles@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-material-styles@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-overlay@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-themable-mixin@22.0.0-beta1(transitive)

• - Removed@vaadin/virtual-list@22.0.0-alpha9

• - Removed@vaadin/component-base@22.0.0-alpha9(transitive)

• - Removed@vaadin/field-base@22.0.0-alpha9(transitive)

• - Removed@vaadin/icon@22.0.0-alpha9(transitive)

• - Removed@vaadin/input-container@22.0.0-alpha9(transitive)

• - Removed@vaadin/item@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-material-styles@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-overlay@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.0.0-alpha9(transitive)

• - Removed@vaadin/virtual-list@22.0.0-alpha9(transitive)

• Updated@vaadin/component-base@22.0.0-beta1

• Updated@vaadin/field-base@22.0.0-beta1

• Updated@vaadin/input-container@22.0.0-beta1

• Updated@vaadin/item@22.0.0-beta1

• Updated@vaadin/vaadin-lumo-styles@22.0.0-beta1

• Updated@vaadin/vaadin-material-styles@22.0.0-beta1

• Updated@vaadin/vaadin-overlay@22.0.0-beta1

• Updated@vaadin/vaadin-themable-mixin@22.0.0-beta1