@vaadin/combo-box 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

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

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import { get } from '@vaadin/component-base/src/path-utils.js';
@@ -21,6 +21,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
          */
         items: {
           type: Array,
+          sync: true,
           observer: '__itemsChanged',
         },
 
@@ -30,6 +31,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
          */
         focusedIndex: {
           type: Number,
+          sync: true,
           observer: '__focusedIndexChanged',
         },
 
@@ -38,6 +40,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
          */
         loading: {
           type: Boolean,
+          sync: true,
           observer: '__loadingChanged',
         },
 
@@ -47,6 +50,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
          */
         opened: {
           type: Boolean,
+          sync: true,
           observer: '__openedChanged',
         },
 
@@ -55,9 +59,21 @@ export const ComboBoxScrollerMixin = (superClass) =>
          */
         selectedItem: {
           type: Object,
+          sync: true,
           observer: '__selectedItemChanged',
         },
 
+        /**
+         * A function used to generate CSS class names for dropdown
+         * items based on the item. The return value should be the
+         * generated class name as a string, or multiple class names
+         * separated by whitespace characters.
+         */
+        itemClassNameGenerator: {
+          type: Object,
+          observer: '__itemClassNameGeneratorChanged',
+        },
+
         /**
          * Path for the id of the item, used to detect whether the item is selected.
          */
@@ -84,6 +100,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
          */
         renderer: {
           type: Object,
+          sync: true,
           observer: '__rendererChanged',
         },
 
@@ -132,21 +149,21 @@ export const ComboBoxScrollerMixin = (superClass) =>
       this.addEventListener('click', (e) => e.stopPropagation());
 
       this.__patchWheelOverScrolling();
-
-      this.__virtualizer = new Virtualizer({
-        createElements: this.__createElements.bind(this),
-        updateElement: this._updateElement.bind(this),
-        elementsContainer: this,
-        scrollTarget: this,
-        scrollContainer: this.$.selector,
-      });
     }
 
     /**
-     * Requests an update for the virtualizer to re-render items.
+     * Updates the virtualizer's size and items.
      */
     requestContentUpdate() {
-      if (this.__virtualizer) {
+      if (!this.__virtualizer) {
+        return;
+      }
+
+      if (this.items) {
+        this.__virtualizer.size = this.items.length;
+      }
+
+      if (this.opened) {
         this.__virtualizer.update();
       }
     }
@@ -157,7 +174,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
      * @param {number} index
      */
     scrollIntoView(index) {
-      if (!(this.opened && index >= 0)) {
+      if (!this.__virtualizer || !(this.opened && index >= 0)) {
         return;
       }
 
@@ -208,11 +225,21 @@ export const ComboBoxScrollerMixin = (superClass) =>
       return item === selectedItem;
     }
 
+    /** @private */
+    __initVirtualizer() {
+      this.__virtualizer = new Virtualizer({
+        createElements: this.__createElements.bind(this),
+        updateElement: this._updateElement.bind(this),
+        elementsContainer: this,
+        scrollTarget: this,
+        scrollContainer: this.$.selector,
+        reorderElements: true,
+      });
+    }
+
     /** @private */
     __itemsChanged(items) {
-      if (this.__virtualizer && items) {
-        this.__virtualizer.size = items.length;
-        this.__virtualizer.flush();
+      if (items && this.__virtualizer) {
         this.requestContentUpdate();
       }
     }
@@ -225,6 +252,10 @@ export const ComboBoxScrollerMixin = (superClass) =>
     /** @private */
     __openedChanged(opened) {
       if (opened) {
+        if (!this.__virtualizer) {
+          this.__initVirtualizer();
+        }
+
         this.requestContentUpdate();
       }
     }
@@ -234,6 +265,13 @@ export const ComboBoxScrollerMixin = (superClass) =>
       this.requestContentUpdate();
     }
 
+    /** @private */
+    __itemClassNameGeneratorChanged(generator, oldGenerator) {
+      if (generator || oldGenerator) {
+        this.requestContentUpdate();
+      }
+    }
+
     /** @private */
     __focusedIndexChanged(index, oldIndex) {
       if (index !== oldIndex) {
@@ -285,6 +323,18 @@ export const ComboBoxScrollerMixin = (superClass) =>
         focused: !this.loading && focusedIndex === index,
       });
 
+      if (typeof this.itemClassNameGenerator === 'function') {
+        el.className = this.itemClassNameGenerator(item);
+      } else if (el.className !== '') {
+        el.className = '';
+      }
+
+      // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set.
+      // However, this causes issues with virtualizer. So we enforce sync update.
+      if (el.performUpdate && !el.hasUpdated) {
+        el.performUpdate();
+      }
+
       el.id = `${this.__hostTagName}-item-${index}`;
       el.setAttribute('role', index !== undefined ? 'option' : false);
       el.setAttribute('aria-selected', selected.toString());
@@ -345,7 +395,6 @@ export const ComboBoxScrollerMixin = (superClass) =>
           new CustomEvent('index-requested', {
             detail: {
               index,
-              currentScrollerPos: this._oldScrollerPosition,
             },
           }),
         );

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

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import { ComboBoxScrollerMixin } from './vaadin-combo-box-overlay-mixin.js';

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

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

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

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';

package/src/vaadin-combo-box.js

@@ -1,6 +1,6 @@
 /**
  * @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/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';

package/src/vaadin-lit-combo-box-item.js

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-combo-box-item>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+export class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-combo-box-item';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(ComboBoxItem);

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-combo-box-item.js';
+import './vaadin-lit-combo-box-overlay.js';
+import './vaadin-lit-combo-box-scroller.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ComboBoxLightMixin } from './vaadin-combo-box-light-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-combo-box-light>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class ComboBoxLight extends ComboBoxLightMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-combo-box-light';
+  }
+
+  static get styles() {
+    return css`
+      :host([opened]) {
+        pointer-events: auto;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot></slot>
+
+      <vaadin-combo-box-overlay
+        id="overlay"
+        .opened="${this._overlayOpened}"
+        ?loading="${this.loading}"
+        theme="${ifDefined(this._theme)}"
+        .positionTarget="${this.inputElement}"
+        .restoreFocusNode="${this.inputElement}"
+        no-vertical-overlap
+      ></vaadin-combo-box-overlay>
+    `;
+  }
+}
+
+defineCustomElement(ComboBoxLight);
+
+export { ComboBoxLight };

package/src/vaadin-lit-combo-box-overlay.js

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
+
+const comboBoxOverlayStyles = css`
+  #overlay {
+    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;
+
+/**
+ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ComboBoxOverlayMixin
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+export class ComboBoxOverlay extends ComboBoxOverlayMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
+  static get is() {
+    return 'vaadin-combo-box-overlay';
+  }
+
+  static get styles() {
+    return [overlayStyles, comboBoxOverlayStyles, comboBoxOverlayStyles];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * When true, the overlay is visible and attached to body.
+       * This property config is overridden to set `sync: true`.
+       */
+      opened: {
+        type: Boolean,
+        notify: true,
+        observer: '_openedChanged',
+        reflectToAttribute: true,
+        sync: true,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="loader"></div>
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(ComboBoxOverlay);

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

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ComboBoxScrollerMixin } from './vaadin-combo-box-scroller-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ComboBoxScrollerMixin
+ * @private
+ */
+export class ComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-combo-box-scroller';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        min-height: 1px;
+        overflow: auto;
+
+        /* Fixes item background from getting on top of scrollbars on Safari */
+        transform: translate3d(0, 0, 0);
+
+        /* Enable momentum scrolling on iOS */
+        -webkit-overflow-scrolling: touch;
+
+        /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+        box-shadow: 0 0 0 white;
+      }
+
+      #selector {
+        border-width: var(--_vaadin-combo-box-items-container-border-width);
+        border-style: var(--_vaadin-combo-box-items-container-border-style);
+        border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
+        position: relative;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="selector">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(ComboBoxScroller);

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

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/input-container/src/vaadin-lit-input-container.js';
+import './vaadin-lit-combo-box-item.js';
+import './vaadin-lit-combo-box-overlay.js';
+import './vaadin-lit-combo-box-scroller.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-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';
+import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.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';
+
+/**
+ * LitElement based version of `<vaadin-combo-box>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class ComboBox extends ComboBoxDataProviderMixin(
+  ComboBoxMixin(PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))))),
+) {
+  static get is() {
+    return 'vaadin-combo-box';
+  }
+
+  static get styles() {
+    return [
+      inputFieldShared,
+      css`
+        :host([opened]) {
+          pointer-events: auto;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * @protected
+       */
+      _positionTarget: {
+        type: Object,
+      },
+    };
+  }
+
+  /**
+   * Used by `InputControlMixin` as a reference to the clear button element.
+   * @protected
+   * @return {!HTMLElement}
+   */
+  get clearElement() {
+    return this.$.clearButton;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div class="vaadin-combo-box-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
+        </div>
+
+        <vaadin-input-container
+          part="input-field"
+          .readonly="${this.readonly}"
+          .disabled="${this.disabled}"
+          .invalid="${this.invalid}"
+          theme="${ifDefined(this._theme)}"
+        >
+          <slot name="prefix" slot="prefix"></slot>
+          <slot name="input"></slot>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
+        </vaadin-input-container>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+
+      <vaadin-combo-box-overlay
+        id="overlay"
+        .opened="${this._overlayOpened}"
+        ?loading="${this.loading}"
+        theme="${ifDefined(this._theme)}"
+        .positionTarget="${this._positionTarget}"
+        .restoreFocusNode="${this.inputElement}"
+        no-vertical-overlap
+      ></vaadin-combo-box-overlay>
+
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.addController(
+      new InputController(this, (input) => {
+        this._setInputElement(input);
+        this._setFocusElement(input);
+        this.stateTarget = input;
+        this.ariaTarget = input;
+      }),
+    );
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+    this._tooltipController.setPosition('top');
+    this._tooltipController.setShouldShow((target) => !target.opened);
+
+    this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+    this._toggleElement = this.$.toggleButton;
+  }
+
+  /**
+   * Override the method from `InputControlMixin`
+   * to stop event propagation to prevent `ComboBoxMixin`
+   * from handling this click event also on its own.
+   *
+   * @param {Event} event
+   * @protected
+   * @override
+   */
+  _onClearButtonClick(event) {
+    event.stopPropagation();
+    super._onClearButtonClick(event);
+  }
+
+  /**
+   * @param {Event} event
+   * @protected
+   */
+  _onHostClick(event) {
+    const path = event.composedPath();
+
+    // Open dropdown only when clicking on the label or input field
+    if (path.includes(this._labelNode) || path.includes(this._positionTarget)) {
+      super._onHostClick(event);
+    }
+  }
+}
+
+defineCustomElement(ComboBox);
+
+export { ComboBox };

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

@@ -0,0 +1,5 @@
+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-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-light.d.ts

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,4 @@
+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/lumo/vaadin-lit-combo-box-light.d.ts

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