@vaadin/combo-box 24.4.0-alpha9 → 24.4.0-dev.4b20a0c55

package/src/vaadin-combo-box-light.js

@@ -6,14 +6,10 @@
 import './vaadin-combo-box-item.js';
 import './vaadin-combo-box-overlay.js';
 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';
 
 /**
  * `<vaadin-combo-box-light>` is a customizable version of the `<vaadin-combo-box>` providing
@@ -63,12 +59,10 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
  *
  * @customElement
  * @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() {
     return 'vaadin-combo-box-light';
   }
@@ -94,124 +88,6 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
       ></vaadin-combo-box-overlay>
     `;
   }
-
-  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);
-  }
 }
 
 defineCustomElement(ComboBoxLight);

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

@@ -259,7 +259,7 @@ export const ComboBoxMixin = (subclass) =>
     static get observers() {
       return [
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-        '_openedOrItemsChanged(opened, _dropdownItems, loading)',
+        '_openedOrItemsChanged(opened, _dropdownItems, loading, _keepOverlayOpened)',
         '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
       ];
     }
@@ -487,10 +487,10 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /** @private */
-    _openedOrItemsChanged(opened, items, loading) {
+    _openedOrItemsChanged(opened, items, loading, keepOverlayOpened) {
       // Close the overlay if there are no items to display.
       // See https://github.com/vaadin/vaadin-combo-box/pull/964
-      this._overlayOpened = !!(opened && (loading || (items && items.length)));
+      this._overlayOpened = !!(opened && (keepOverlayOpened || loading || (items && items.length)));
     }
 
     /** @private */
@@ -542,7 +542,6 @@ export const ComboBoxMixin = (subclass) =>
       }
 
       if (opened) {
-        this._openedWithFocusRing = this.hasAttribute('focus-ring');
         // For touch devices, we don't want to popup virtual keyboard
         // unless input element is explicitly focused by the user.
         if (!this._isInputFocused() && !isTouch) {
@@ -554,9 +553,6 @@ export const ComboBoxMixin = (subclass) =>
         this._overlayElement.restoreFocusOnClose = true;
       } else {
         this._onClosed();
-        if (this._openedWithFocusRing && this._isInputFocused()) {
-          this.setAttribute('focus-ring', '');
-        }
       }
 
       const input = this._nativeInput;
@@ -1130,6 +1126,10 @@ export const ComboBoxMixin = (subclass) =>
         this.items = oldItems;
       });
 
+      if (this.dataProvider) {
+        return;
+      }
+
       if (items) {
         this.filteredItems = items.slice(0);
       } else if (oldItems) {

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

@@ -139,6 +139,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
         elementsContainer: this,
         scrollTarget: this,
         scrollContainer: this.$.selector,
+        reorderElements: true,
       });
     }
 

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

@@ -13,10 +13,8 @@ const comboBoxItem = css`
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
-  @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);
   }
 `;
 

package/theme/lumo/vaadin-combo-box-item-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-declare const comboBoxItem: import("lit").CSSResult;
-export { comboBoxItem };

package/theme/lumo/vaadin-combo-box-light.d.ts

@@ -1,3 +0,0 @@
-import './vaadin-combo-box-item-styles.js';
-import './vaadin-combo-box-overlay-styles.js';
-import '../../src/vaadin-combo-box-light.js';

package/theme/lumo/vaadin-combo-box-overlay-styles.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-declare const comboBoxOverlay: import("lit").CSSResult;
-declare const comboBoxLoader: import("lit").CSSResult;
-export { comboBoxLoader, comboBoxOverlay };

package/theme/lumo/vaadin-combo-box-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';

package/theme/lumo/vaadin-combo-box.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-combo-box-item-styles.js';
-import './vaadin-combo-box-overlay-styles.js';
-import './vaadin-combo-box-styles.js';
-import '../../src/vaadin-combo-box.js';

package/theme/material/vaadin-combo-box-item-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-declare const comboBoxItem: import("lit").CSSResult;
-export { comboBoxItem };

package/theme/material/vaadin-combo-box-light.d.ts

@@ -1,3 +0,0 @@
-import './vaadin-combo-box-item-styles.js';
-import './vaadin-combo-box-overlay-styles.js';
-import '../../src/vaadin-combo-box-light.js';

package/theme/material/vaadin-combo-box-overlay-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-declare const comboBoxOverlay: import("lit").CSSResult;
-declare const comboBoxLoader: import("lit").CSSResult;
-export { comboBoxLoader, comboBoxOverlay };

package/theme/material/vaadin-combo-box-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';

package/theme/material/vaadin-combo-box.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-combo-box-item-styles.js';
-import './vaadin-combo-box-overlay-styles.js';
-import './vaadin-combo-box-styles.js';
-import '../../src/vaadin-combo-box.js';