@vaadin/combo-box 24.0.0-alpha8 → 24.0.0-beta1

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

@@ -4,17 +4,16 @@
  * 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';
-import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
-import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
-import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
+import { ComboBoxScrollerMixin } from './vaadin-combo-box-scroller-mixin.js';
 
 /**
- * Element for internal use only.
+ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
  * @extends HTMLElement
+ * @mixes ComboBoxScrollerMixin
  * @private
  */
-export class ComboBoxScroller extends PolymerElement {
+export class ComboBoxScroller extends ComboBoxScrollerMixin(PolymerElement) {
   static get is() {
     return 'vaadin-combo-box-scroller';
   }
@@ -40,7 +39,7 @@ export class ComboBoxScroller extends PolymerElement {
         #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);
+          border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
         }
       </style>
       <div id="selector">
@@ -48,345 +47,6 @@ export class ComboBoxScroller extends PolymerElement {
       </div>
     `;
   }
-
-  static get properties() {
-    return {
-      /**
-       * A full set of items to filter the visible options from.
-       * Set to an empty array when combo-box is not opened.
-       */
-      items: {
-        type: Array,
-        observer: '__itemsChanged',
-      },
-
-      /**
-       * Index of an item that has focus outline and is scrolled into view.
-       * The actual focus still remains in the input field.
-       */
-      focusedIndex: {
-        type: Number,
-        observer: '__focusedIndexChanged',
-      },
-
-      /**
-       * Set to true while combo-box fetches new page from the data provider.
-       */
-      loading: {
-        type: Boolean,
-        observer: '__loadingChanged',
-      },
-
-      /**
-       * Whether the combo-box is currently opened or not. If set to false,
-       * calling `scrollIntoView` does not have any effect.
-       */
-      opened: {
-        type: Boolean,
-        observer: '__openedChanged',
-      },
-
-      /**
-       * The selected item from the `items` array.
-       */
-      selectedItem: {
-        type: Object,
-        observer: '__selectedItemChanged',
-      },
-
-      /**
-       * Path for the id of the item, used to detect whether the item is selected.
-       */
-      itemIdPath: {
-        type: String,
-      },
-
-      /**
-       * Reference to the combo-box, used by the item elements.
-       */
-      comboBox: {
-        type: Object,
-      },
-
-      /**
-       * Function used to set a label for every combo-box item.
-       */
-      getItemLabel: {
-        type: Object,
-      },
-
-      /**
-       * Function used to render the content of every combo-box item.
-       */
-      renderer: {
-        type: Object,
-        observer: '__rendererChanged',
-      },
-
-      /**
-       * Used to propagate the `theme` attribute from the host element.
-       */
-      theme: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.__boundOnItemClick = this.__onItemClick.bind(this);
-  }
-
-  __openedChanged(opened) {
-    if (opened) {
-      this.requestContentUpdate();
-    }
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // Ensure every instance has unique ID
-    this.id = `${this.localName}-${generateUniqueId()}`;
-
-    // Allow extensions to customize tag name for the items
-    this.__hostTagName = this.constructor.is.replace('-scroller', '');
-
-    this.setAttribute('role', 'listbox');
-
-    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,
-    });
-  }
-
-  requestContentUpdate() {
-    this.__virtualizer.update();
-  }
-
-  scrollIntoView(index) {
-    if (!(this.opened && index >= 0)) {
-      return;
-    }
-
-    const visibleItemsCount = this._visibleItemsCount();
-
-    let targetIndex = index;
-
-    if (index > this.__virtualizer.lastVisibleIndex - 1) {
-      // Index is below the bottom, scrolling down. Make the item appear at the bottom.
-      // First scroll to target (will be at the top of the scroller) to make sure it's rendered.
-      this.__virtualizer.scrollToIndex(index);
-      // Then calculate the index for the following scroll (to get the target to bottom of the scroller).
-      targetIndex = index - visibleItemsCount + 1;
-    } else if (index > this.__virtualizer.firstVisibleIndex) {
-      // The item is already visible, scrolling is unnecessary per se. But we need to trigger iron-list to set
-      // the correct scrollTop on the scrollTarget. Scrolling to firstVisibleIndex.
-      targetIndex = this.__virtualizer.firstVisibleIndex;
-    }
-    this.__virtualizer.scrollToIndex(Math.max(0, targetIndex));
-
-    // Sometimes the item is partly below the bottom edge, detect and adjust.
-    const lastPhysicalItem = [...this.children].find(
-      (el) => !el.hidden && el.index === this.__virtualizer.lastVisibleIndex,
-    );
-    if (!lastPhysicalItem || index !== lastPhysicalItem.index) {
-      return;
-    }
-    const lastPhysicalItemRect = lastPhysicalItem.getBoundingClientRect();
-    const scrollerRect = this.getBoundingClientRect();
-    const scrollTopAdjust = lastPhysicalItemRect.bottom - scrollerRect.bottom + this._viewportTotalPaddingBottom;
-    if (scrollTopAdjust > 0) {
-      this.scrollTop += scrollTopAdjust;
-    }
-  }
-
-  /** @private */
-  __getAriaRole(itemIndex) {
-    return itemIndex !== undefined ? 'option' : false;
-  }
-
-  /** @private */
-  __getAriaSelected(focusedIndex, itemIndex) {
-    return this.__isItemFocused(focusedIndex, itemIndex).toString();
-  }
-
-  /** @private */
-  __isItemFocused(focusedIndex, itemIndex) {
-    return !this.loading && focusedIndex === itemIndex;
-  }
-
-  /** @private */
-  __isItemSelected(item, selectedItem, itemIdPath) {
-    if (item instanceof ComboBoxPlaceholder) {
-      return false;
-    } else if (itemIdPath && item !== undefined && selectedItem !== undefined) {
-      return this.get(itemIdPath, item) === this.get(itemIdPath, selectedItem);
-    }
-    return item === selectedItem;
-  }
-
-  /** @private */
-  __itemsChanged(items) {
-    if (this.__virtualizer && items) {
-      this.__virtualizer.size = items.length;
-      this.__virtualizer.flush();
-      // Ensure the total count of items is properly announced.
-      this.setAttribute('aria-setsize', items.length);
-      this.requestContentUpdate();
-    }
-  }
-
-  /** @private */
-  __loadingChanged() {
-    this.requestContentUpdate();
-  }
-
-  /** @private */
-  __selectedItemChanged() {
-    this.requestContentUpdate();
-  }
-
-  /** @private */
-  __focusedIndexChanged(index, oldIndex) {
-    if (index !== oldIndex) {
-      this.requestContentUpdate();
-    }
-
-    // Do not jump back to the previously focused item while loading
-    // when requesting next page from the data provider on scroll.
-    if (index >= 0 && !this.loading) {
-      this.scrollIntoView(index);
-    }
-  }
-
-  /** @private */
-  __rendererChanged(renderer, oldRenderer) {
-    if (renderer || oldRenderer) {
-      this.requestContentUpdate();
-    }
-  }
-
-  /** @private */
-  __createElements(count) {
-    return [...Array(count)].map(() => {
-      const item = document.createElement(`${this.__hostTagName}-item`);
-      item.addEventListener('click', this.__boundOnItemClick);
-      // Negative tabindex prevents the item content from being focused.
-      item.tabIndex = '-1';
-      item.style.width = '100%';
-      return item;
-    });
-  }
-
-  /** @private */
-  __updateElement(el, index) {
-    const item = this.items[index];
-    const focusedIndex = this.focusedIndex;
-
-    el.setProperties({
-      item,
-      index,
-      label: this.getItemLabel(item),
-      selected: this.__isItemSelected(item, this.selectedItem, this.itemIdPath),
-      renderer: this.renderer,
-      focused: this.__isItemFocused(focusedIndex, index),
-    });
-
-    el.id = `${this.__hostTagName}-item-${index}`;
-    el.setAttribute('role', this.__getAriaRole(index));
-    el.setAttribute('aria-selected', this.__getAriaSelected(focusedIndex, index));
-    el.setAttribute('aria-posinset', index + 1);
-
-    if (this.theme) {
-      el.setAttribute('theme', this.theme);
-    } else {
-      el.removeAttribute('theme');
-    }
-
-    if (item instanceof ComboBoxPlaceholder) {
-      this.__requestItemByIndex(index);
-    }
-  }
-
-  /** @private */
-  __onItemClick(e) {
-    this.dispatchEvent(new CustomEvent('selection-changed', { detail: { item: e.currentTarget.item } }));
-  }
-
-  /**
-   * We want to prevent the kinetic scrolling energy from being transferred from the overlay contents over to the parent.
-   * Further improvement ideas: after the contents have been scrolled to the top or bottom and scrolling has stopped, it could allow
-   * scrolling the parent similarly to touch scrolling.
-   */
-  __patchWheelOverScrolling() {
-    this.$.selector.addEventListener('wheel', (e) => {
-      const scrolledToTop = this.scrollTop === 0;
-      const scrolledToBottom = this.scrollHeight - this.scrollTop - this.clientHeight <= 1;
-      if (scrolledToTop && e.deltaY < 0) {
-        e.preventDefault();
-      } else if (scrolledToBottom && e.deltaY > 0) {
-        e.preventDefault();
-      }
-    });
-  }
-
-  get _viewportTotalPaddingBottom() {
-    if (this._cachedViewportTotalPaddingBottom === undefined) {
-      const itemsStyle = window.getComputedStyle(this.$.selector);
-      this._cachedViewportTotalPaddingBottom = [itemsStyle.paddingBottom, itemsStyle.borderBottomWidth]
-        .map((v) => {
-          return parseInt(v, 10);
-        })
-        .reduce((sum, v) => {
-          return sum + v;
-        });
-    }
-
-    return this._cachedViewportTotalPaddingBottom;
-  }
-
-  /**
-   * Dispatches an `index-requested` event for the given index to notify
-   * the data provider that it should start loading the page containing the requested index.
-   *
-   * The event is dispatched asynchronously to prevent an immediate page request and therefore
-   * a possible infinite recursion in case the data provider implements page request cancelation logic
-   * by invoking data provider page callbacks with an empty array.
-   * The infinite recursion may occur otherwise since invoking a data provider page callback with an empty array
-   * triggers a synchronous scroller update and, if the callback corresponds to the currently visible page,
-   * the scroller will synchronously request the page again which may lead to looping in the end.
-   * That was the case for the Flow counterpart:
-   * https://github.com/vaadin/flow-components/issues/3553#issuecomment-1239344828
-   */
-  __requestItemByIndex(index) {
-    requestAnimationFrame(() => {
-      this.dispatchEvent(
-        new CustomEvent('index-requested', {
-          detail: {
-            index,
-            currentScrollerPos: this._oldScrollerPosition,
-          },
-        }),
-      );
-    });
-  }
-
-  /** @private */
-  _visibleItemsCount() {
-    // Ensure items are positioned
-    this.__virtualizer.scrollToIndex(this.__virtualizer.firstVisibleIndex);
-    const hasItems = this.__virtualizer.size > 0;
-    return hasItems ? this.__virtualizer.lastVisibleIndex - this.__virtualizer.firstVisibleIndex + 1 : 0;
-  }
 }
 
 customElements.define(ComboBoxScroller.is, ComboBoxScroller);

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

@@ -10,6 +10,7 @@ import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mix
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -148,21 +149,17 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
  * needs to be set manually. The total number of items can be returned
  * in the second argument of the data provider callback:__
  *
- * ```javascript
- * comboBox.dataProvider = function(params, callback) {
- *   var url = 'https://api.example/data' +
- *       '?page=' + params.page +        // the requested page index
- *       '&per_page=' + params.pageSize; // number of items on the page
- *   var xhr = new XMLHttpRequest();
- *   xhr.onload = function() {
- *     var response = JSON.parse(xhr.responseText);
- *     callback(
- *       response.employees, // requested page of items
- *       response.totalSize  // total number of items
- *     );
- *   };
- *   xhr.open('GET', url, true);
- *   xhr.send();
+ * ```js
+ * comboBox.dataProvider = async (params, callback) => {
+ *   const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';
+ *   const { filter, page, pageSize } = params;
+ *   const index = page * pageSize;
+ *
+ *   const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);
+ *   if (res.ok) {
+ *     const { result, size } = await res.json();
+ *     callback(result, size);
+ *   }
  * };
  * ```
  *
@@ -239,6 +236,7 @@ interface ComboBox<TItem = ComboBoxDefaultItem>
     PatternMixinClass,
     LabelMixinClass,
     KeyboardMixinClass,
+    OverlayClassMixinClass,
     InputMixinClass,
     InputControlMixinClass,
     InputConstraintsMixinClass,

package/src/vaadin-combo-box.js

@@ -80,21 +80,17 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * needs to be set manually. The total number of items can be returned
  * in the second argument of the data provider callback:__
  *
- * ```javascript
- * comboBox.dataProvider = function(params, callback) {
- *   var url = 'https://api.example/data' +
- *       '?page=' + params.page +        // the requested page index
- *       '&per_page=' + params.pageSize; // number of items on the page
- *   var xhr = new XMLHttpRequest();
- *   xhr.onload = function() {
- *     var response = JSON.parse(xhr.responseText);
- *     callback(
- *       response.employees, // requested page of items
- *       response.totalSize  // total number of items
- *     );
- *   };
- *   xhr.open('GET', url, true);
- *   xhr.send();
+ * ```js
+ * comboBox.dataProvider = async (params, callback) => {
+ *   const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';
+ *   const { filter, page, pageSize } = params;
+ *   const index = page * pageSize;
+ *
+ *   const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);
+ *   if (res.ok) {
+ *     const { result, size } = await res.json();
+ *     callback(result, size);
+ *   }
  * };
  * ```
  *
@@ -282,7 +278,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
    */
   _shouldRemoveFocus(event) {
     // Do not blur when focus moves to the overlay
-    if (event.relatedTarget === this.$.overlay) {
+    if (event.relatedTarget === this._overlayElement) {
       event.composedPath()[0].focus();
       return false;
     }

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

@@ -21,3 +21,5 @@ const comboBoxItem = css`
 registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
   moduleId: 'lumo-combo-box-item',
 });
+
+export { comboBoxItem };

package/theme/lumo/vaadin-combo-box-light.js

@@ -1,3 +1,3 @@
-import './vaadin-combo-box-dropdown-styles.js';
 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-dropdown-styles.js → vaadin-combo-box-overlay-styles.js}

@@ -12,14 +12,6 @@ const comboBoxOverlay = css`
     padding: 0;
   }
 
-  :host {
-    --_vaadin-combo-box-items-container-border-width: var(--lumo-space-xs);
-    --_vaadin-combo-box-items-container-border-style: solid;
-    --_vaadin-combo-box-items-container-border-color: transparent;
-  }
-
-  /* Loading state */
-
   /* When items are empty, the spinner needs some room */
   :host(:not([closing])) [part~='content'] {
     min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
@@ -36,7 +28,9 @@ const comboBoxOverlay = css`
   :host([bottom-aligned]) [part~='overlay'] {
     margin-bottom: var(--lumo-space-xs);
   }
+`;
 
+const comboBoxLoader = css`
   [part~='loader'] {
     position: absolute;
     z-index: 1;
@@ -48,8 +42,6 @@ const comboBoxOverlay = css`
     margin-inline-end: 0;
   }
 
-  /* RTL specific styles */
-
   :host([dir='rtl']) [part~='loader'] {
     left: auto;
     margin-left: 0;
@@ -59,6 +51,22 @@ const comboBoxOverlay = css`
   }
 `;
 
-registerStyles('vaadin-combo-box-overlay', [overlay, menuOverlayCore, comboBoxOverlay, loader], {
-  moduleId: 'lumo-combo-box-overlay',
-});
+registerStyles(
+  'vaadin-combo-box-overlay',
+  [
+    overlay,
+    menuOverlayCore,
+    comboBoxOverlay,
+    loader,
+    comboBoxLoader,
+    css`
+      :host {
+        --_vaadin-combo-box-items-container-border-width: var(--lumo-space-xs);
+        --_vaadin-combo-box-items-container-border-style: solid;
+      }
+    `,
+  ],
+  { moduleId: 'lumo-combo-box-overlay' },
+);
+
+export { comboBoxLoader, comboBoxOverlay };

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

@@ -1,5 +1,5 @@
 import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
-import './vaadin-combo-box-dropdown-styles.js';
 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.js

@@ -16,3 +16,5 @@ const comboBoxItem = css`
 registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
   moduleId: 'material-combo-box-item',
 });
+
+export { comboBoxItem };

package/theme/material/vaadin-combo-box-light.js

@@ -1,3 +1,3 @@
-import './vaadin-combo-box-dropdown-styles.js';
 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-dropdown-styles.js → vaadin-combo-box-overlay-styles.js}

@@ -5,12 +5,6 @@ import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const comboBoxOverlay = css`
-  :host {
-    --_vaadin-combo-box-items-container-border-width: 8px 0;
-    --_vaadin-combo-box-items-container-border-style: solid;
-    --_vaadin-combo-box-items-container-border-color: transparent;
-  }
-
   [part='overlay'] {
     position: relative;
     overflow: visible;
@@ -21,7 +15,9 @@ const comboBoxOverlay = css`
   [part='content'] {
     padding: 0;
   }
+`;
 
+const comboBoxLoader = css`
   [part~='loader'] {
     position: absolute;
     z-index: 1;
@@ -31,6 +27,21 @@ const comboBoxOverlay = css`
   }
 `;
 
-registerStyles('vaadin-combo-box-overlay', [menuOverlay, comboBoxOverlay, loader], {
-  moduleId: 'material-combo-box-overlay',
-});
+registerStyles(
+  'vaadin-combo-box-overlay',
+  [
+    menuOverlay,
+    comboBoxOverlay,
+    loader,
+    comboBoxLoader,
+    css`
+      :host {
+        --_vaadin-combo-box-items-container-border-width: 8px 0;
+        --_vaadin-combo-box-items-container-border-style: solid;
+      }
+    `,
+  ],
+  { moduleId: 'material-combo-box-overlay' },
+);
+
+export { comboBoxLoader, comboBoxOverlay };

package/theme/material/vaadin-combo-box.js

@@ -1,5 +1,5 @@
 import '@vaadin/input-container/theme/material/vaadin-input-container.js';
-import './vaadin-combo-box-dropdown-styles.js';
 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';