@vaadin/combo-box 24.4.0-alpha2 → 24.4.0-alpha20

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

@@ -71,6 +71,7 @@ export const ComboBoxMixin = (subclass) =>
           notify: true,
           value: false,
           reflectToAttribute: true,
+          sync: true,
           observer: '_openedChanged',
         },
 
@@ -80,6 +81,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         autoOpenDisabled: {
           type: Boolean,
+          sync: true,
         },
 
         /**
@@ -104,7 +106,10 @@ export const ComboBoxMixin = (subclass) =>
          *   - `model.item` The item.
          * @type {ComboBoxRenderer | undefined}
          */
-        renderer: Function,
+        renderer: {
+          type: Object,
+          sync: true,
+        },
 
         /**
          * A full set of items to filter the visible options from.
@@ -113,6 +118,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         items: {
           type: Array,
+          sync: true,
           observer: '_itemsChanged',
         },
 
@@ -138,6 +144,7 @@ export const ComboBoxMixin = (subclass) =>
         filteredItems: {
           type: Array,
           observer: '_filteredItemsChanged',
+          sync: true,
         },
 
         /**
@@ -154,6 +161,7 @@ export const ComboBoxMixin = (subclass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -164,6 +172,7 @@ export const ComboBoxMixin = (subclass) =>
           type: Number,
           observer: '_focusedIndexChanged',
           value: -1,
+          sync: true,
         },
 
         /**
@@ -174,6 +183,7 @@ export const ComboBoxMixin = (subclass) =>
           type: String,
           value: '',
           notify: true,
+          sync: true,
         },
 
         /**
@@ -183,6 +193,7 @@ export const ComboBoxMixin = (subclass) =>
         selectedItem: {
           type: Object,
           notify: true,
+          sync: true,
         },
 
         /**
@@ -199,6 +210,7 @@ export const ComboBoxMixin = (subclass) =>
           type: String,
           value: 'label',
           observer: '_itemLabelPathChanged',
+          sync: true,
         },
 
         /**
@@ -214,6 +226,7 @@ export const ComboBoxMixin = (subclass) =>
         itemValuePath: {
           type: String,
           value: 'value',
+          sync: true,
         },
 
         /**
@@ -223,7 +236,10 @@ export const ComboBoxMixin = (subclass) =>
          * `dataProvider` callback).
          * @attr {string} item-id-path
          */
-        itemIdPath: String,
+        itemIdPath: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * @type {!HTMLElement | undefined}
@@ -240,17 +256,22 @@ export const ComboBoxMixin = (subclass) =>
          */
         _dropdownItems: {
           type: Array,
+          sync: true,
         },
 
         /** @private */
         _closeOnBlurIsPrevented: Boolean,
 
         /** @private */
-        _scroller: Object,
+        _scroller: {
+          type: Object,
+          sync: true,
+        },
 
         /** @private */
         _overlayOpened: {
           type: Boolean,
+          sync: true,
           observer: '_overlayOpenedChanged',
         },
       };
@@ -260,7 +281,7 @@ export const ComboBoxMixin = (subclass) =>
       return [
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
         '_openedOrItemsChanged(opened, _dropdownItems, loading)',
-        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
+        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, _theme)',
       ];
     }
 
@@ -413,6 +434,18 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * Override LitElement lifecycle callback to handle filter property change.
+     * @param {Object} props
+     */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('filter')) {
+        this._filterChanged(this.filter);
+      }
+    }
+
     /** @private */
     _initOverlay() {
       const overlay = this.$.overlay;
@@ -441,25 +474,23 @@ export const ComboBoxMixin = (subclass) =>
      * @protected
      */
     _initScroller(host) {
-      const scrollerTag = `${this._tagNamePrefix}-scroller`;
+      const scroller = document.createElement(`${this._tagNamePrefix}-scroller`);
+
+      scroller.owner = host || this;
+      scroller.getItemLabel = this._getItemLabel.bind(this);
+      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
 
       const overlay = this._overlayElement;
 
       overlay.renderer = (root) => {
-        if (!root.firstChild) {
-          root.appendChild(document.createElement(scrollerTag));
+        if (!root.innerHTML) {
+          root.appendChild(scroller);
         }
       };
 
       // Ensure the scroller is rendered
       overlay.requestContentUpdate();
 
-      const scroller = overlay.querySelector(scrollerTag);
-
-      scroller.owner = host || this;
-      scroller.getItemLabel = this._getItemLabel.bind(this);
-      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
-
       // Trigger the observer to set properties
       this._scroller = scroller;
     }
@@ -483,6 +514,17 @@ export const ComboBoxMixin = (subclass) =>
           renderer,
           theme,
         });
+
+        // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set.
+        // This means for the first opening, properties won't be set synchronously.
+        // Call `performUpdate()` in this case to mimic the Polymer version logic.
+        if (scroller.performUpdate && !scroller.hasUpdated) {
+          try {
+            scroller.performUpdate();
+          } catch (_) {
+            // Suppress errors in synchronous tests for pre-opened combo-box.
+          }
+        }
       }
     }
 
@@ -542,7 +584,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 +595,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;
@@ -772,11 +810,7 @@ export const ComboBoxMixin = (subclass) =>
       // Do not commit value when custom values are disallowed and input value is not a valid option
       // also stop propagation of the event, otherwise the user could submit a form while the input
       // 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.
         e.preventDefault();
         // Do not trigger global listeners
@@ -796,6 +830,18 @@ export const ComboBoxMixin = (subclass) =>
       this._closeOrCommit();
     }
 
+    /**
+     * @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`.
      * Do not call `super` in order to override clear
@@ -867,6 +913,15 @@ export const ComboBoxMixin = (subclass) =>
       this._detectAndDispatchChange();
     }
 
+    /**
+     * 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.
      */
@@ -938,7 +993,7 @@ export const ComboBoxMixin = (subclass) =>
           this.value = this._getItemValue(itemMatchingInputValue);
         } else {
           // Revert the input value
-          this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : this.value || '';
+          this._revertInputValueToValue();
         }
       }
 
@@ -946,7 +1001,7 @@ export const ComboBoxMixin = (subclass) =>
 
       this._clearSelectionRange();
 
-      this.filter = '';
+      this._clearFilter();
     }
 
     /**
@@ -1087,7 +1142,7 @@ export const ComboBoxMixin = (subclass) =>
         this.selectedItem = null;
       }
 
-      this.filter = '';
+      this._clearFilter();
 
       // In the next _detectAndDispatchChange() call, the change detection should pass
       this._lastCommittedValue = undefined;

package/src/vaadin-combo-box-scroller-mixin.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,6 +59,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
          */
         selectedItem: {
           type: Object,
+          sync: true,
           observer: '__selectedItemChanged',
         },
 
@@ -84,6 +89,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
          */
         renderer: {
           type: Object,
+          sync: true,
           observer: '__rendererChanged',
         },
 
@@ -139,6 +145,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
         elementsContainer: this,
         scrollTarget: this,
         scrollContainer: this.$.selector,
+        reorderElements: true,
       });
     }
 
@@ -157,7 +164,7 @@ export const ComboBoxScrollerMixin = (superClass) =>
      * @param {number} index
      */
     scrollIntoView(index) {
-      if (!(this.opened && index >= 0)) {
+      if (!this.__virtualizer || !(this.opened && index >= 0)) {
         return;
       }
 
@@ -285,6 +292,12 @@ export const ComboBoxScrollerMixin = (superClass) =>
         focused: !this.loading && focusedIndex === index,
       });
 
+      // 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 +358,6 @@ export const ComboBoxScrollerMixin = (superClass) =>
           new CustomEvent('index-requested', {
             detail: {
               index,
-              currentScrollerPos: this._oldScrollerPosition,
             },
           }),
         );

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);