@vaadin/combo-box - npm Package Compare versions

Comparing version 24.4.0-dev.223e39f050 to 24.4.0-dev.4b20a0c55

package.json

 {
   "name": "@vaadin/combo-box",
-  "version": "24.4.0-dev.223e39f050",
+  "version": "24.4.0-dev.4b20a0c55",
   "publishConfig": {
@@ -41,12 +41,12 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-dev.223e39f050",
-    "@vaadin/component-base": "24.4.0-dev.223e39f050",
-    "@vaadin/field-base": "24.4.0-dev.223e39f050",
-    "@vaadin/input-container": "24.4.0-dev.223e39f050",
-    "@vaadin/item": "24.4.0-dev.223e39f050",
-    "@vaadin/lit-renderer": "24.4.0-dev.223e39f050",
-    "@vaadin/overlay": "24.4.0-dev.223e39f050",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.223e39f050",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.223e39f050",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.223e39f050"
+    "@vaadin/a11y-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/component-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/field-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/input-container": "24.4.0-dev.4b20a0c55",
+    "@vaadin/item": "24.4.0-dev.4b20a0c55",
+    "@vaadin/lit-renderer": "24.4.0-dev.4b20a0c55",
+    "@vaadin/overlay": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55"
   },
@@ -56,3 +56,3 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.6.0",
-    "@vaadin/text-field": "24.4.0-dev.223e39f050",
+    "@vaadin/text-field": "24.4.0-dev.4b20a0c55",
     "lit": "^3.0.0",
@@ -65,3 +65,3 @@ "sinon": "^13.0.2"
   ],
-  "gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354"
+  "gitHead": "b79c81e5f6fd24684b34ee0dc434e94d943ea13e"
 }

README.md

@@ -8,3 +8,2 @@ # @vaadin/combo-box
 [![npm version](https://badgen.net/npm/v/@vaadin/combo-box)](https://www.npmjs.com/package/@vaadin/combo-box)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
@@ -11,0 +10,0 @@ ```html

src/lit/renderer-directives.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/lit/renderer-directives.js

 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-data-provider-mixin.d.ts

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-data-provider-mixin.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -65,2 +65,8 @@ */
         },
+
+        /** @private */
+        _hasData: {
+          type: Boolean,
+          value: false,
+        },
       };
@@ -96,3 +102,2 @@ }
       this._dataProviderController.addEventListener('page-requested', this.__onDataProviderPageRequested.bind(this));
-      this._dataProviderController.addEventListener('page-received', this.__onDataProviderPageReceived.bind(this));
       this._dataProviderController.addEventListener('page-loaded', this.__onDataProviderPageLoaded.bind(this));
@@ -155,3 +160,3 @@
 
-      if (opened && !this._dataProviderController.hasData) {
+      if (opened && !this._hasData) {
         this._dataProviderController.loadFirstPage();
@@ -176,15 +181,10 @@ }
     /** @private */
-    __onDataProviderPageReceived() {
+    __onDataProviderPageLoaded() {
+      this._hasData = true;
+
       this.requestContentUpdate();
-    }
 
-    /** @private */
-    __onDataProviderPageLoaded() {
       if (!this.opened && !this._isInputFocused()) {
         this._commitValue();
       }
-
-      if (!this._dataProviderController.isLoading()) {
-        this.loading = false;
-      }
     }
@@ -202,2 +202,4 @@
 
+      this._hasData = false;
+
       this.requestContentUpdate();
@@ -204,0 +206,0 @@

src/vaadin-combo-box-item-mixin.d.ts

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-item-mixin.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

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

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-item.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

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

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -14,2 +14,3 @@ */
 import type { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
+import type { ComboBoxLightMixinClass } from './vaadin-combo-box-light-mixin.js';
 import type { ComboBoxDefaultItem, ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
@@ -130,9 +131,2 @@ export {
 declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
-  /**
-   * Name of the two-way data-bindable property representing the
-   * value of the custom input field.
-   * @attr {string} attr-for-value
-   */
-  attrForValue: string;
-
   addEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
@@ -153,2 +147,3 @@ type: K,
   extends ComboBoxDataProviderMixinClass<TItem>,
+    ComboBoxLightMixinClass,
     ComboBoxMixinClass<TItem>,
@@ -155,0 +150,0 @@ KeyboardMixinClass,

src/vaadin-combo-box-light.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -9,10 +9,6 @@ */
 import './vaadin-combo-box-scroller.js';
-import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
-import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
+import { ComboBoxLightMixin } from './vaadin-combo-box-light-mixin.js';
 
@@ -67,8 +63,6 @@ /**
  * @extends HTMLElement
- * @mixes ComboBoxDataProviderMixin
- * @mixes ComboBoxMixin
+ * @mixes ComboBoxLightMixin
  * @mixes ThemableMixin
- * @mixes ValidateMixin
  */
-class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixin(ThemableMixin(PolymerElement)))) {
+class ComboBoxLight extends ComboBoxLightMixin(ThemableMixin(PolymerElement)) {
   static get is() {
@@ -99,120 +93,2 @@ return 'vaadin-combo-box-light';
   }
-
-  static get properties() {
-    return {
-      /**
-       * Name of the two-way data-bindable property representing the
-       * value of the custom input field.
-       * @attr {string} attr-for-value
-       * @type {string}
-       */
-      attrForValue: {
-        type: String,
-        value: 'value',
-      },
-    };
-  }
-
-  /**
-   * Used by `InputControlMixin` as a reference to the clear button element.
-   * @protected
-   * @return {!HTMLElement}
-   */
-  get clearElement() {
-    return this.querySelector('.clear-button');
-  }
-
-  /**
-   * Override this getter from `InputMixin` to allow using
-   * an arbitrary property name instead of `value`
-   * for accessing the input element's value.
-   *
-   * @protected
-   * @override
-   * @return {string}
-   */
-  get _inputElementValueProperty() {
-    return dashToCamelCase(this.attrForValue);
-  }
-
-  /**
-   * @protected
-   * @override
-   * @return {HTMLInputElement | undefined}
-   */
-  get _nativeInput() {
-    const input = this.inputElement;
-
-    if (input) {
-      // Support `<input class="input">`
-      if (input instanceof HTMLInputElement) {
-        return input;
-      }
-
-      // Support `<input>` in light DOM (e.g. `vaadin-text-field`)
-      const slottedInput = input.querySelector('input');
-      if (slottedInput) {
-        return slottedInput;
-      }
-
-      if (input.shadowRoot) {
-        // Support `<input>` in Shadow DOM (e.g. `mwc-textfield`)
-        const shadowInput = input.shadowRoot.querySelector('input');
-        if (shadowInput) {
-          return shadowInput;
-        }
-      }
-    }
-
-    return undefined;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._toggleElement = this.querySelector('.toggle-button');
-
-    // Wait until the slotted input DOM is ready
-    afterNextRender(this, () => {
-      this._setInputElement(this.querySelector('vaadin-text-field,.input'));
-      this._revertInputValue();
-    });
-  }
-
-  /**
-   * Returns true if the current input value satisfies all constraints (if any).
-   * @return {boolean}
-   */
-  checkValidity() {
-    if (this.inputElement && this.inputElement.validate) {
-      return this.inputElement.validate();
-    }
-    return super.checkValidity();
-  }
-
-  /** @protected */
-  _isClearButton(event) {
-    return (
-      super._isClearButton(event) ||
-      (event.type === 'input' && !event.isTrusted) || // Fake input event dispatched by clear button
-      event.composedPath()[0].getAttribute('part') === 'clear-button'
-    );
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  _shouldRemoveFocus(event) {
-    const isBlurringControlButtons = event.target === this._toggleElement || event.target === this.clearElement;
-    const isFocusingInputElement = event.relatedTarget && event.relatedTarget === this._nativeInput;
-
-    // prevent closing the overlay when moving focus from clear or toggle buttons to the internal input
-    if (isBlurringControlButtons && isFocusingInputElement) {
-      return false;
-    }
-
-    return super._shouldRemoveFocus(event);
-  }
 }
@@ -219,0 +95,0 @@

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

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-mixin.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -545,3 +545,2 @@ */
       if (opened) {
-        this._openedWithFocusRing = this.hasAttribute('focus-ring');
         // For touch devices, we don't want to popup virtual keyboard
@@ -558,5 +557,2 @@ // unless input element is explicitly focused by the user.
         this._onClosed();
-        if (this._openedWithFocusRing && this._isInputFocused()) {
-          this.setAttribute('focus-ring', '');
-        }
       }
@@ -777,7 +773,3 @@
       // still contains an invalid value
-      const hasInvalidOption =
-        this._focusedIndex < 0 &&
-        this._inputElementValue !== '' &&
-        this._getItemLabel(this.selectedItem) !== this._inputElementValue;
-      if (!this.allowCustomValue && hasInvalidOption) {
+      if (!this._hasValidInputValue()) {
         // Do not submit the surrounding form.
@@ -803,2 +795,14 @@ e.preventDefault();
     /**
+     * @protected
+     */
+    _hasValidInputValue() {
+      const hasInvalidOption =
+        this._focusedIndex < 0 &&
+        this._inputElementValue !== '' &&
+        this._getItemLabel(this.selectedItem) !== this._inputElementValue;
+
+      return this.allowCustomValue || !hasInvalidOption;
+    }
+
+    /**
      * Override an event listener from `KeyboardMixin`.
@@ -875,2 +879,11 @@ * Do not call `super` in order to override clear
     /**
+     * Clears the current filter. Should be used instead of setting the property
+     * directly in order to allow overriding this in multi-select combo box.
+     * @protected
+     */
+    _clearFilter() {
+      this.filter = '';
+    }
+
+    /**
      * Reverts back to original value.
@@ -946,3 +959,3 @@ */
           // Revert the input value
-          this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : this.value || '';
+          this._revertInputValueToValue();
         }
@@ -955,3 +968,3 @@ }
 
-      this.filter = '';
+      this._clearFilter();
     }
@@ -1097,3 +1110,3 @@
 
-      this.filter = '';
+      this._clearFilter();
 
@@ -1100,0 +1113,0 @@ // In the next _detectAndDispatchChange() call, the change detection should pass

src/vaadin-combo-box-overlay-mixin.d.ts

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-overlay-mixin.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

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

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-overlay.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-placeholder.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-scroller-mixin.d.ts

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-scroller-mixin.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -142,2 +142,3 @@ */
         scrollContainer: this.$.selector,
+        reorderElements: true,
       });
@@ -144,0 +145,0 @@ }

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

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box-scroller.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box.d.ts

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-combo-box.js

 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

theme/lumo/vaadin-combo-box-item-styles.js

@@ -16,6 +16,4 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-  @media (any-hover: hover) {
-    :host([focused]:not([disabled])) {
-      box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
-    }
+  :host([focused]:not([disabled])) {
+    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
@@ -22,0 +20,0 @@ `;

No alert changes

Improved metrics

Total package byte prevSize

149311

0.95%

Number of package files

44

4.76%

Lines of code

3717

1.23%

Worsened metrics

Number of lines in readme file

75

-1.32%

Dependency changes

• + Added

  @vaadin/a11y-base@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/component-base@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/field-base@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/icon@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/input-container@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/item@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/lit-renderer@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/overlay@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/vaadin-lumo-styles@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/vaadin-material-styles@24.4.0-dev.4b20a0c55
  (transitive)

• + Added

  @vaadin/vaadin-themable-mixin@24.4.0-dev.4b20a0c55
  (transitive)

• - Removed

  @vaadin/a11y-base@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/component-base@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/field-base@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/icon@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/input-container@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/item@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/lit-renderer@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/overlay@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/vaadin-lumo-styles@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/vaadin-material-styles@24.4.0-dev.223e39f050
  (transitive)

• - Removed

  @vaadin/vaadin-themable-mixin@24.4.0-dev.223e39f050
  (transitive)

• Updated

  @vaadin/a11y-base@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/component-base@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/field-base@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/input-container@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/item@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/lit-renderer@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/overlay@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/vaadin-lumo-styles@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/vaadin-material-styles@24.4.0-dev.4b20a0c55

• Updated

  @vaadin/vaadin-themable-mixin@24.4.0-dev.4b20a0c55