@vaadin/combo-box - npm Package Compare versions

Comparing version 22.0.0-beta2 to 22.0.0-rc1

package.json

 {
   "name": "@vaadin/combo-box",
-  "version": "22.0.0-beta2",
+  "version": "22.0.0-rc1",
   "publishConfig": {
@@ -37,21 +37,21 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-beta2",
-    "@vaadin/field-base": "22.0.0-beta2",
-    "@vaadin/input-container": "22.0.0-beta2",
-    "@vaadin/item": "22.0.0-beta2",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta2",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta2",
-    "@vaadin/vaadin-overlay": "22.0.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta2"
+    "@vaadin/component-base": "22.0.0-rc1",
+    "@vaadin/field-base": "22.0.0-rc1",
+    "@vaadin/input-container": "22.0.0-rc1",
+    "@vaadin/item": "22.0.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-rc1",
+    "@vaadin/vaadin-material-styles": "22.0.0-rc1",
+    "@vaadin/vaadin-overlay": "22.0.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "22.0.0-beta2",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-beta2",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/text-field": "22.0.0-beta2",
+    "@vaadin/dialog": "22.0.0-rc1",
+    "@vaadin/polymer-legacy-adapter": "22.0.0-rc1",
+    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/text-field": "22.0.0-rc1",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4"
+  "gitHead": "7b6f44bcd2c0fd415028ace666feeb0fedb1d540"
 }

src/vaadin-combo-box-dropdown.js

@@ -13,11 +13,2 @@ /**
 
-const TOUCH_DEVICE = (() => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
 /**
@@ -51,9 +42,5 @@ * Element for internal use only.
       /**
-       * True if the device supports touch events.
+       * True if the combo-box has been activate by the user.
+       * The actual opened state depends on whether the dropdown has items.
        */
-      touchDevice: {
-        type: Boolean,
-        value: TOUCH_DEVICE
-      },
-
       opened: Boolean,
@@ -60,0 +47,0 @@

src/vaadin-combo-box-light.d.ts

@@ -6,2 +6,5 @@ /**
  */
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -131,2 +134,5 @@ import { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
     ComboBoxMixinClass<TItem>,
+    KeyboardMixinClass,
+    InputMixinClass,
+    DisabledMixinClass,
     ThemableMixinClass {}
@@ -133,0 +139,0 @@

src/vaadin-combo-box-mixin.js

@@ -6,2 +6,3 @@ /**
  */
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
@@ -364,3 +365,3 @@ import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
         // unless input element is explicitly focused by the user.
-        if (!this.hasAttribute('focused') && !this.$.dropdown.touchDevice) {
+        if (!this.hasAttribute('focused') && !isTouch) {
           this.focus();
@@ -574,7 +575,10 @@ }
         // Auto-open is disabled
-        if (this.value !== this._inputElementValue) {
+        if (this.opened || (this.value !== this._inputElementValue && this._inputElementValue.length > 0)) {
+          // The overlay is open or
           // The input value has changed but the change hasn't been committed, so cancel it.
+          e.stopPropagation();
           this._focusedIndex = -1;
           this.cancel();
-        } else if (this.clearButtonVisible && !this.opened) {
+        } else if (this.clearButtonVisible && !this.opened && !!this.value) {
+          e.stopPropagation();
           // The clear button is visible and the overlay is closed, so clear the value.
@@ -597,3 +601,4 @@ this._clear();
           }
-        } else if (this.clearButtonVisible) {
+        } else if (this.clearButtonVisible && !!this.value) {
+          e.stopPropagation();
           // The clear button is visible and the overlay is closed, so clear the value.
@@ -612,3 +617,3 @@ this._clear();
         toggleElement.addEventListener('click', () => {
-          if (this.$.dropdown.touchDevice && !this.hasAttribute('focused')) {
+          if (isTouch && !this.hasAttribute('focused')) {
             document.activeElement.blur();
@@ -615,0 +620,0 @@ }

src/vaadin-combo-box.d.ts

@@ -6,5 +6,16 @@ /**
  */
+import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
+import { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import { PatternMixinClass } from '@vaadin/field-base/src/pattern-mixin.js';
+import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -66,20 +77,12 @@ import { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
 /**
- * `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
- * input field for filtering the list of items. If you want to replace the default
- * input field with a custom implementation, you should use the
- * [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
+ * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+ * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+ * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
  *
- * Items in the dropdown list must be provided as a list of `String` values.
- * Defining the items is done using the `items` property, which can be assigned
- * with data-binding, using an attribute or directly with the JavaScript property.
- *
  * ```html
- * <vaadin-combo-box
- *     label="Fruit"
- *     items="[[data]]">
- * </vaadin-combo-box>
+ * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
  * ```
  *
  * ```js
- * combobox.items = ['apple', 'orange', 'banana'];
+ * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
  * ```
@@ -91,20 +94,16 @@ *
  *
- * `<vaadin-combo-box>` supports using custom renderer callback function for defining the
- * content of `<vaadin-combo-box-item>`.
+ * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+ * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+ * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
  *
- * The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
- * Generate DOM content by using `model` object properties if needed, append it to the `root`
- * element and control the state of the host element by accessing `comboBox`. Before generating new
- * content, users are able to check if there is already content in `root` for reusing it.
+ * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+ * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+ * set combo-box properties in a `renderer` function.
  *
- * ```html
- * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
- * ```
  * ```js
  * const comboBox = document.querySelector('#combo-box');
  * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
- * comboBox.renderer = function(root, comboBox, model) {
- *   root.innerHTML = model.index + ': ' +
- *                    model.item.label + ' ' +
- *                    '<b>' + model.item.value + '</b>';
+ * comboBox.renderer = (root, comboBox, model) => {
+ *   const item = model.item;
+ *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
  * };
@@ -114,19 +113,18 @@ * ```
  * Renderer is called on the opening of the combo-box and each time the related model is updated.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
+ * Before creating new content, it is recommended to check if there is already an existing DOM
+ * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+ * infinite scrolling, reducing DOM operations might improve performance.
  *
  * The following properties are available in the `model` argument:
  *
- * Property name | Type | Description
- * --------------|------|------------
- * `index`| Number | Index of the item in the `items` array
- * `item` | String or Object | The item reference
- * `selected` | Boolean | True when item is selected
- * `focused` | Boolean | True when item is focused
+ * Property   | Type             | Description
+ * -----------|------------------|-------------
+ * `index`    | Number           | Index of the item in the `items` array
+ * `item`     | String or Object | The item reference
+ * `selected` | Boolean          | True when item is selected
+ * `focused`  | Boolean          | True when item is focused
  *
  * ### Lazy Loading with Function Data Provider
  *
- * In addition to assigning an array to the items property, you can alternatively
- * provide the `<vaadin-combo-box>` data through the
+ * In addition to assigning an array to the items property, you can alternatively use the
  * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
@@ -136,6 +134,2 @@ * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
  *
- * See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
- * the API reference below for the detailed data provider arguments description,
- * and the “Lazy Loading“ example on “Basics” page in the demos.
- *
  * __Note that when using function data providers, the total number of items
@@ -230,6 +224,17 @@ * needs to be set manually. The total number of items can be returned
     ComboBoxMixinClass<TItem>,
+    ValidateMixinClass,
     PatternMixinClass,
+    LabelMixinClass,
+    KeyboardMixinClass,
+    InputMixinClass,
     InputControlMixinClass,
+    InputConstraintsMixinClass,
+    FocusMixinClass,
+    FieldMixinClass,
+    DisabledMixinClass,
+    DelegateStateMixinClass,
+    DelegateFocusMixinClass,
     ThemableMixinClass,
-    ElementMixinClass {}
+    ElementMixinClass,
+    ControllerMixinClass {}
 
@@ -236,0 +241,0 @@ declare global {

src/vaadin-combo-box.js

@@ -10,5 +10,5 @@ /**
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
@@ -23,20 +23,12 @@ import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 /**
- * `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
- * input field for filtering the list of items. If you want to replace the default
- * input field with a custom implementation, you should use the
- * [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
+ * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+ * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+ * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
  *
- * Items in the dropdown list must be provided as a list of `String` values.
- * Defining the items is done using the `items` property, which can be assigned
- * with data-binding, using an attribute or directly with the JavaScript property.
- *
  * ```html
- * <vaadin-combo-box
- *     label="Fruit"
- *     items="[[data]]">
- * </vaadin-combo-box>
+ * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
  * ```
  *
  * ```js
- * combobox.items = ['apple', 'orange', 'banana'];
+ * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
  * ```
@@ -48,20 +40,16 @@ *
  *
- * `<vaadin-combo-box>` supports using custom renderer callback function for defining the
- * content of `<vaadin-combo-box-item>`.
+ * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+ * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+ * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
  *
- * The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
- * Generate DOM content by using `model` object properties if needed, append it to the `root`
- * element and control the state of the host element by accessing `comboBox`. Before generating new
- * content, users are able to check if there is already content in `root` for reusing it.
+ * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+ * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+ * set combo-box properties in a `renderer` function.
  *
- * ```html
- * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
- * ```
  * ```js
  * const comboBox = document.querySelector('#combo-box');
  * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
- * comboBox.renderer = function(root, comboBox, model) {
- *   root.innerHTML = model.index + ': ' +
- *                    model.item.label + ' ' +
- *                    '<b>' + model.item.value + '</b>';
+ * comboBox.renderer = (root, comboBox, model) => {
+ *   const item = model.item;
+ *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
  * };
@@ -71,19 +59,18 @@ * ```
  * Renderer is called on the opening of the combo-box and each time the related model is updated.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
+ * Before creating new content, it is recommended to check if there is already an existing DOM
+ * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+ * infinite scrolling, reducing DOM operations might improve performance.
  *
  * The following properties are available in the `model` argument:
  *
- * Property name | Type | Description
- * --------------|------|------------
- * `index`| Number | Index of the item in the `items` array
- * `item` | String or Object | The item reference
- * `selected` | Boolean | True when item is selected
- * `focused` | Boolean | True when item is focused
+ * Property   | Type             | Description
+ * -----------|------------------|-------------
+ * `index`    | Number           | Index of the item in the `items` array
+ * `item`     | String or Object | The item reference
+ * `selected` | Boolean          | True when item is selected
+ * `focused`  | Boolean          | True when item is focused
  *
  * ### Lazy Loading with Function Data Provider
  *
- * In addition to assigning an array to the items property, you can alternatively
- * provide the `<vaadin-combo-box>` data through the
+ * In addition to assigning an array to the items property, you can alternatively use the
  * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
@@ -93,6 +80,2 @@ * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
  *
- * See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
- * the API reference below for the detailed data provider arguments description,
- * and the “Lazy Loading“ example on “Basics” page in the demos.
- *
  * __Note that when using function data providers, the total number of items
@@ -267,3 +250,3 @@ * needs to be set manually. The total number of items can be returned
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
@@ -270,0 +253,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

130503

increased by0.46%

Worsened metrics

Lines of code

3316

decreased by-0.36%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@vaadin/item@22.0.0-rc1

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

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

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

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