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

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

@@ -4,8 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
-import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
 
 registerStyles(
   'vaadin-combo-box-overlay',
@@ -29,9 +29,10 @@ let memoizedTemplate;
  * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
  * @extends Overlay
+ * @mixes ComboBoxOverlayMixin
  * @private
  */
-export class ComboBoxOverlay extends PositionMixin(Overlay) {
+export class ComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {
   static get is() {
     return 'vaadin-combo-box-overlay';
   }
@@ -39,57 +40,23 @@ export class ComboBoxOverlay extends PositionMixin(Overlay) {
   static get template() {
     if (!memoizedTemplate) {
       memoizedTemplate = super.template.cloneNode(true);
-      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
-    }
 
-    return memoizedTemplate;
-  }
+      const overlay = memoizedTemplate.content.querySelector('[part~="overlay"]');
+      overlay.removeAttribute('tabindex');
 
-  static get observers() {
-    return ['_setOverlayWidth(positionTarget, opened)'];
-  }
+      const loader = document.createElement('div');
+      loader.setAttribute('part', 'loader');
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    const comboBox = this._comboBox;
-
-    const hostDir = comboBox && comboBox.getAttribute('dir');
-    if (hostDir) {
-      this.setAttribute('dir', hostDir);
+      overlay.insertBefore(loader, overlay.firstElementChild);
     }
-  }
 
-  ready() {
-    super.ready();
-    const loader = document.createElement('div');
-    loader.setAttribute('part', 'loader');
-    const content = this.shadowRoot.querySelector('[part~="content"]');
-    content.parentNode.insertBefore(loader, content);
-  }
-
-  _outsideClickListener(event) {
-    const eventPath = event.composedPath();
-    if (!eventPath.includes(this.positionTarget) && !eventPath.includes(this)) {
-      this.close();
-    }
+    return memoizedTemplate;
   }
 
-  _setOverlayWidth(positionTarget, opened) {
-    if (positionTarget && opened) {
-      const propPrefix = this.localName;
-      this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
+  constructor() {
+    super();
 
-      const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
-
-      if (customWidth === '') {
-        this.style.removeProperty(`--${propPrefix}-width`);
-      } else {
-        this.style.setProperty(`--${propPrefix}-width`, customWidth);
-      }
-
-      this._updatePosition();
-    }
+    this.requiredVerticalSpace = 200;
   }
 }
 

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

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ComboBoxItemRenderer } from './vaadin-combo-box-item-mixin.js';
+
+export declare function ComboBoxScrollerMixin<TItem, TOwner, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ComboBoxScrollerMixinClass<TItem, TOwner>> & T;
+
+export declare class ComboBoxScrollerMixinClass<TItem, TOwner> {
+  /**
+   * Index of an item that has focus outline and is scrolled into view.
+   * The actual focus still remains in the input field.
+   */
+  focusedIndex: number;
+
+  /**
+   * Path for the id of the item, used to detect whether the item is selected.
+   */
+  itemIdPath: string | null | undefined;
+
+  /**
+   * A full set of items to filter the visible options from.
+   * Set to an empty array when combo-box is not opened.
+   */
+  items: TItem[];
+
+  /**
+   * Set to true while combo-box fetches new page from the data provider.
+   */
+  loading: boolean;
+
+  /**
+   * Whether the combo-box is currently opened or not. If set to false,
+   * calling `scrollIntoView` does not have any effect.
+   */
+  opened: boolean;
+
+  /**
+   * Reference to the owner (combo-box owner), used by the item elements.
+   */
+  owner: TOwner;
+
+  /**
+   * Set true to prevent the overlay from opening automatically.
+   * @attr {boolean} auto-open-disabled
+   */
+  renderer: ComboBoxItemRenderer<TItem, TOwner> | null | undefined;
+
+  /**
+   * The selected item from the `items` array.
+   */
+  selectedItem: TItem;
+
+  /**
+   * Used to propagate the `theme` attribute from the host element.
+   */
+  theme: string;
+
+  /**
+   * Function used to set a label for every combo-box item.
+   */
+  getItemLabel: (item: TItem) => string;
+
+  /**
+   * Requests an update for the virtualizer to re-render items.
+   */
+  requestContentUpdate(): void;
+
+  /**
+   * Scrolls an item at given index into view and adjusts `scrollTop`
+   * so that the element gets fully visible on Arrow Down key press.
+   */
+  scrollIntoView(index: number): void;
+
+  protected _isItemSelected(item: TItem, selectedItem: TItem, itemIdPath: string | null | undefined): void;
+
+  protected _updateElement(el: HTMLElement, index: number): void;
+}

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

@@ -0,0 +1,361 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+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';
+
+/**
+ * @polymerMixin
+ */
+export const ComboBoxScrollerMixin = (superClass) =>
+  class ComboBoxScrollerMixin extends superClass {
+    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 owner (combo-box owner), used by the item elements.
+         */
+        owner: {
+          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);
+    }
+
+    /** @private */
+    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;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.setAttribute('role', 'listbox');
+
+      // 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.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.
+     */
+    requestContentUpdate() {
+      if (this.__virtualizer) {
+        this.__virtualizer.update();
+      }
+    }
+
+    /**
+     * Scrolls an item at given index into view and adjusts `scrollTop`
+     * so that the element gets fully visible on Arrow Down key press.
+     * @param {number} index
+     */
+    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;
+      }
+    }
+
+    /**
+     * @param {string | object} item
+     * @param {string | object} selectedItem
+     * @param {string} itemIdPath
+     * @protected
+     */
+    _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();
+        this.requestContentUpdate();
+      }
+    }
+
+    /** @private */
+    __loadingChanged() {
+      this.requestContentUpdate();
+    }
+
+    /** @private */
+    __openedChanged(opened) {
+      if (opened) {
+        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;
+      });
+    }
+
+    /**
+     * @param {HTMLElement} el
+     * @param {number} index
+     * @protected
+     */
+    _updateElement(el, index) {
+      const item = this.items[index];
+      const focusedIndex = this.focusedIndex;
+      const selected = this._isItemSelected(item, this.selectedItem, this.itemIdPath);
+
+      el.setProperties({
+        item,
+        index,
+        label: this.getItemLabel(item),
+        selected,
+        renderer: this.renderer,
+        focused: !this.loading && focusedIndex === index,
+      });
+
+      el.id = `${this.__hostTagName}-item-${index}`;
+      el.setAttribute('role', index !== undefined ? 'option' : false);
+      el.setAttribute('aria-selected', selected.toString());
+      el.setAttribute('aria-posinset', index + 1);
+      el.setAttribute('aria-setsize', this.items.length);
+
+      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.
+     * @private
+     */
+    __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();
+        }
+      });
+    }
+
+    /**
+     * 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
+     * @private
+     */
+    __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;
+    }
+  };

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 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';
+
+/**
+ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
+ */
+declare class ComboBoxScroller extends ComboBoxScrollerMixin(HTMLElement) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-combo-box-scroller': ComboBoxScroller;
+  }
+}
+
+export { ComboBoxScroller };