@vaadin/component-base 24.0.0-alpha4 → 24.0.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-alpha4",
+  "version": "24.0.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "66be46e82c4d0a673859fbc9bdb1581dd89f360c"
+  "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
 }

package/src/element-mixin.js

@@ -39,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-alpha4';
+      return '24.0.0-alpha6';
     }
 
     /** @protected */

package/src/list-mixin.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 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 { KeyboardDirectionMixinClass } from './keyboard-direction-mixin.js';
+import type { KeyboardMixinClass } from './keyboard-mixin.js';
+
+/**
+ * A mixin for list elements, facilitating navigation and selection of items.
+ */
+export declare function ListMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<KeyboardDirectionMixinClass> & Constructor<KeyboardMixinClass> & Constructor<ListMixinClass> & T;
+
+export declare class ListMixinClass {
+  /**
+   * Used for mixin detection because `instanceof` does not work with mixins.
+   */
+  _hasVaadinListMixin: boolean;
+
+  /**
+   * The index of the item selected in the items array.
+   * Note: Not updated when used in `multiple` selection mode.
+   */
+  selected: number | null | undefined;
+
+  /**
+   * Define how items are disposed in the dom.
+   * Possible values are: `horizontal|vertical`.
+   * It also changes navigation keys from left/right to up/down.
+   */
+  orientation: 'horizontal' | 'vertical';
+
+  /**
+   * The list of items from which a selection can be made.
+   * It is populated from the elements passed to the light DOM,
+   * and updated dynamically when adding or removing items.
+   *
+   * The item elements must implement `Vaadin.ItemMixin`.
+   *
+   * Note: unlike `<vaadin-combo-box>`, this property is read-only,
+   * so if you want to provide items by iterating array of data,
+   * you have to use `dom-repeat` and place it to the light DOM.
+   */
+  readonly items: Element[] | undefined;
+
+  protected readonly _scrollerElement: HTMLElement;
+}

package/src/list-mixin.js

@@ -0,0 +1,344 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { timeOut } from './async.js';
+import { Debouncer } from './debounce.js';
+import { DirHelper } from './dir-helper.js';
+import { KeyboardDirectionMixin } from './keyboard-direction-mixin.js';
+
+/**
+ * A mixin for list elements, facilitating navigation and selection of items.
+ *
+ * @polymerMixin
+ * @mixes KeyboardDirectionMixin
+ */
+export const ListMixin = (superClass) =>
+  class ListMixinClass extends KeyboardDirectionMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * Used for mixin detection because `instanceof` does not work with mixins.
+         * @type {boolean}
+         */
+        _hasVaadinListMixin: {
+          value: true,
+        },
+
+        /**
+         * The index of the item selected in the items array.
+         * Note: Not updated when used in `multiple` selection mode.
+         */
+        selected: {
+          type: Number,
+          reflectToAttribute: true,
+          notify: true,
+        },
+
+        /**
+         * Define how items are disposed in the dom.
+         * Possible values are: `horizontal|vertical`.
+         * It also changes navigation keys from left/right to up/down.
+         * @type {!ListOrientation}
+         */
+        orientation: {
+          type: String,
+          reflectToAttribute: true,
+          value: '',
+        },
+
+        /**
+         * The list of items from which a selection can be made.
+         * It is populated from the elements passed to the light DOM,
+         * and updated dynamically when adding or removing items.
+         *
+         * The item elements must implement `Vaadin.ItemMixin`.
+         *
+         * Note: unlike `<vaadin-combo-box>`, this property is read-only,
+         * so if you want to provide items by iterating array of data,
+         * you have to use `dom-repeat` and place it to the light DOM.
+         * @type {!Array<!Element> | undefined}
+         */
+        items: {
+          type: Array,
+          readOnly: true,
+          notify: true,
+        },
+
+        /**
+         * The search buffer for the keyboard selection feature.
+         * @private
+         */
+        _searchBuf: {
+          type: String,
+          value: '',
+        },
+      };
+    }
+
+    static get observers() {
+      return ['_enhanceItems(items, orientation, selected, disabled)'];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addEventListener('click', (e) => this._onClick(e));
+
+      this._observer = new FlattenedNodesObserver(this, () => {
+        this._setItems(this._filterItems(FlattenedNodesObserver.getFlattenedNodes(this)));
+      });
+    }
+
+    /**
+     * Override method inherited from `KeyboardDirectionMixin`
+     * to use the stored list of item elements.
+     *
+     * @return {Element[]}
+     * @protected
+     * @override
+     */
+    _getItems() {
+      return this.items;
+    }
+
+    /** @private */
+    _enhanceItems(items, orientation, selected, disabled) {
+      if (!disabled) {
+        if (items) {
+          this.setAttribute('aria-orientation', orientation || 'vertical');
+          this.items.forEach((item) => {
+            if (orientation) {
+              item.setAttribute('orientation', orientation);
+            } else {
+              item.removeAttribute('orientation');
+            }
+          });
+
+          this._setFocusable(selected || 0);
+
+          const itemToSelect = items[selected];
+          items.forEach((item) => {
+            item.selected = item === itemToSelect;
+          });
+          if (itemToSelect && !itemToSelect.disabled) {
+            this._scrollToItem(selected);
+          }
+        }
+      }
+    }
+
+    /**
+     * @param {!Array<!Element>} array
+     * @return {!Array<!Element>}
+     * @protected
+     */
+    _filterItems(array) {
+      return array.filter((e) => e._hasVaadinItemMixin);
+    }
+
+    /**
+     * @param {!MouseEvent} event
+     * @protected
+     */
+    _onClick(event) {
+      if (event.metaKey || event.shiftKey || event.ctrlKey || event.defaultPrevented) {
+        return;
+      }
+
+      const item = this._filterItems(event.composedPath())[0];
+      let idx;
+      if (item && !item.disabled && (idx = this.items.indexOf(item)) >= 0) {
+        this.selected = idx;
+      }
+    }
+
+    /**
+     * @param {number} currentIdx
+     * @param {string} key
+     * @return {number}
+     * @protected
+     */
+    _searchKey(currentIdx, key) {
+      this._searchReset = Debouncer.debounce(this._searchReset, timeOut.after(500), () => {
+        this._searchBuf = '';
+      });
+      this._searchBuf += key.toLowerCase();
+
+      if (!this.items.some((item) => this.__isMatchingKey(item))) {
+        this._searchBuf = key.toLowerCase();
+      }
+
+      const idx = this._searchBuf.length === 1 ? currentIdx + 1 : currentIdx;
+      return this._getAvailableIndex(
+        this.items,
+        idx,
+        1,
+        (item) => this.__isMatchingKey(item) && getComputedStyle(item).display !== 'none',
+      );
+    }
+
+    /** @private */
+    __isMatchingKey(item) {
+      return item.textContent
+        .replace(/[^\p{L}\p{Nd}]/gu, '')
+        .toLowerCase()
+        .startsWith(this._searchBuf);
+    }
+
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get _isRTL() {
+      return !this._vertical && this.getAttribute('dir') === 'rtl';
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`
+     * to search items by key.
+     *
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      if (event.metaKey || event.ctrlKey) {
+        return;
+      }
+
+      const key = event.key;
+
+      const currentIdx = this.items.indexOf(this.focused);
+      if (/[a-zA-Z0-9]/.test(key) && key.length === 1) {
+        const idx = this._searchKey(currentIdx, key);
+        if (idx >= 0) {
+          this._focus(idx);
+        }
+        return;
+      }
+
+      super._onKeyDown(event);
+    }
+
+    /**
+     * @param {!Element} item
+     * @return {boolean}
+     * @protected
+     */
+    _isItemHidden(item) {
+      return getComputedStyle(item).display === 'none';
+    }
+
+    /**
+     * @param {number} idx
+     * @protected
+     */
+    _setFocusable(idx) {
+      idx = this._getAvailableIndex(this.items, idx, 1);
+      const item = this.items[idx];
+      this.items.forEach((e) => {
+        e.tabIndex = e === item ? 0 : -1;
+      });
+    }
+
+    /**
+     * @param {number} idx
+     * @protected
+     */
+    _focus(idx) {
+      this.items.forEach((e, index) => {
+        e.focused = index === idx;
+      });
+      this._setFocusable(idx);
+      this._scrollToItem(idx);
+      super._focus(idx);
+    }
+
+    focus() {
+      // In initialization (e.g vaadin-select) observer might not been run yet.
+      if (this._observer) {
+        this._observer.flush();
+      }
+      const firstItem = this.querySelector('[tabindex="0"]') || (this.items ? this.items[0] : null);
+      this._focusItem(firstItem);
+    }
+
+    /**
+     * @return {!HTMLElement}
+     * @protected
+     */
+    get _scrollerElement() {
+      // Returning scroller element of the component
+      console.warn(`Please implement the '_scrollerElement' property in <${this.localName}>`);
+      return this;
+    }
+
+    /**
+     * Scroll the container to have the next item by the edge of the viewport.
+     * @param {number} idx
+     * @protected
+     */
+    _scrollToItem(idx) {
+      const item = this.items[idx];
+      if (!item) {
+        return;
+      }
+
+      const props = this._vertical ? ['top', 'bottom'] : this._isRTL ? ['right', 'left'] : ['left', 'right'];
+
+      const scrollerRect = this._scrollerElement.getBoundingClientRect();
+      const nextItemRect = (this.items[idx + 1] || item).getBoundingClientRect();
+      const prevItemRect = (this.items[idx - 1] || item).getBoundingClientRect();
+
+      let scrollDistance = 0;
+      if (
+        (!this._isRTL && nextItemRect[props[1]] >= scrollerRect[props[1]]) ||
+        (this._isRTL && nextItemRect[props[1]] <= scrollerRect[props[1]])
+      ) {
+        scrollDistance = nextItemRect[props[1]] - scrollerRect[props[1]];
+      } else if (
+        (!this._isRTL && prevItemRect[props[0]] <= scrollerRect[props[0]]) ||
+        (this._isRTL && prevItemRect[props[0]] >= scrollerRect[props[0]])
+      ) {
+        scrollDistance = prevItemRect[props[0]] - scrollerRect[props[0]];
+      }
+
+      this._scroll(scrollDistance);
+    }
+
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get _vertical() {
+      return this.orientation !== 'horizontal';
+    }
+
+    /**
+     * @param {number} pixels
+     * @protected
+     */
+    _scroll(pixels) {
+      if (this._vertical) {
+        this._scrollerElement.scrollTop += pixels;
+      } else {
+        const dir = this.getAttribute('dir') || 'ltr';
+        const scrollType = DirHelper.detectScrollType();
+        const scrollLeft = DirHelper.getNormalizedScrollLeft(scrollType, dir, this._scrollerElement) + pixels;
+        DirHelper.setNormalizedScrollLeft(scrollType, dir, this._scrollerElement, scrollLeft);
+      }
+    }
+
+    /**
+     * Fired when the selection is changed.
+     * Not fired when used in `multiple` selection mode.
+     *
+     * @event selected-changed
+     * @param {Object} detail
+     * @param {Object} detail.value the index of the item selected in the items array.
+     */
+  };

package/src/slot-controller.d.ts

@@ -54,10 +54,19 @@ export class SlotController extends EventTarget implements ReactiveController {
    */
   getSlotChild(): Node;
 
+  /**
+   * Create and attach default node using the provided tag name, if any.
+   */
   protected attachDefaultNode(): Node | undefined;
 
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   */
   protected initAddedNode(node: Node): void;
 
+  /**
+   * Run `slotInitializer` for the node managed by the controller.
+   */
   protected initNode(node: Node): void;
 
   /**

package/src/slot-controller.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { isEmptyTextNode } from './dom-utils.js';
 import { generateUniqueId } from './unique-id-utils.js';
 
 /**
@@ -91,7 +92,7 @@ export class SlotController extends EventTarget {
   }
 
   /**
-   * Create and attach default node using the slot factory.
+   * Create and attach default node using the provided tag name, if any.
    * @return {Node | undefined}
    * @protected
    */
@@ -101,7 +102,7 @@ export class SlotController extends EventTarget {
     // Check if the node was created previously and if so, reuse it.
     let node = this.defaultNode;
 
-    // Slot factory is optional, some slots don't have default content.
+    // Tag name is optional, sometimes we don't init default content.
     if (!node && tagName) {
       node = document.createElement(tagName);
       if (node instanceof Element) {
@@ -144,6 +145,8 @@ export class SlotController extends EventTarget {
   }
 
   /**
+   * Run `slotInitializer` for the node managed by the controller.
+   *
    * @param {Node} node
    * @protected
    */
@@ -172,7 +175,12 @@ export class SlotController extends EventTarget {
    */
   teardownNode(_node) {}
 
-  /** @protected */
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   *
+   * @param {Node} node
+   * @protected
+   */
   initAddedNode(node) {
     if (node !== this.defaultNode) {
       this.initCustomNode(node);
@@ -191,7 +199,10 @@ export class SlotController extends EventTarget {
 
     this.__slotObserver = new FlattenedNodesObserver(slot, (info) => {
       const current = this.multiple ? this.nodes : [this.node];
-      const newNodes = info.addedNodes.filter((node) => !current.includes(node));
+
+      // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
+      // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
+      const newNodes = info.addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
 
       if (info.removedNodes.length) {
         info.removedNodes.forEach((node) => {

package/src/slot-observe-controller.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+/**
+ * A controller that observes slotted element mutations, especially ID attribute
+ * and the text content, and fires an event to notify host element about those.
+ */
+export class SlotObserveController extends SlotController {
+  /**
+   * Setup the mutation observer on the node to update ID and notify host.
+   * Node doesn't get observed automatically until this method is called.
+   */
+  protected observeNode(node: Node): void;
+
+  /**
+   * Override to restore default node when a custom one is removed.
+   */
+  protected restoreDefaultNode(): void;
+
+  /**
+   * Override to update default node text on property change.
+   */
+  protected updateDefaultNode(node: Node): void;
+}

package/src/slot-observe-controller.js

@@ -0,0 +1,175 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+/**
+ * A controller that observes slotted element mutations, especially ID attribute
+ * and the text content, and fires an event to notify host element about those.
+ */
+export class SlotObserveController extends SlotController {
+  constructor(host, slot, tagName, config = {}) {
+    super(host, slot, tagName, { ...config, useUniqueId: true });
+  }
+
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initCustomNode(node) {
+    this.__updateNodeId(node);
+    this.__notifyChange(node);
+  }
+
+  /**
+   * Override to notify the controller host about removal of
+   * the custom node, and to apply the default one if needed.
+   *
+   * @param {Node} _node
+   * @protected
+   * @override
+   */
+  teardownNode(_node) {
+    const node = this.getSlotChild();
+
+    // Custom node is added to the slot
+    if (node && node !== this.defaultNode) {
+      this.__notifyChange(node);
+    } else {
+      this.restoreDefaultNode();
+      this.updateDefaultNode(this.node);
+    }
+  }
+
+  /**
+   * Override method inherited from `SlotMixin`
+   * to set ID attribute on the default node.
+   *
+   * @return {Node}
+   * @protected
+   * @override
+   */
+  attachDefaultNode() {
+    const node = super.attachDefaultNode();
+
+    if (node) {
+      this.__updateNodeId(node);
+    }
+
+    return node;
+  }
+
+  /**
+   * Override to restore default node when a custom one is removed.
+   *
+   * @protected
+   */
+  restoreDefaultNode() {
+    // To be implemented
+  }
+
+  /**
+   * Override to update default node text on property change.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  updateDefaultNode(node) {
+    this.__notifyChange(node);
+  }
+
+  /**
+   * Setup the mutation observer on the node to update ID and notify host.
+   * Node doesn't get observed automatically until this method is called.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  observeNode(node) {
+    // Stop observing the previous node, if any.
+    if (this.__nodeObserver) {
+      this.__nodeObserver.disconnect();
+    }
+
+    this.__nodeObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const target = mutation.target;
+
+        // Ensure the mutation target is the currently connected node
+        // to ignore async mutations dispatched for removed element.
+        const isCurrentNodeMutation = target === this.node;
+
+        if (mutation.type === 'attributes') {
+          // We use attributeFilter to only observe ID mutation,
+          // no need to check for attribute name separately.
+          if (isCurrentNodeMutation && target.id !== this.defaultId) {
+            this.__updateNodeId(target);
+          }
+        } else if (isCurrentNodeMutation || target.parentElement === this.node) {
+          // Node text content has changed.
+          this.__notifyChange(this.node);
+        }
+      });
+    });
+
+    // Observe changes to node ID attribute, text content and children.
+    this.__nodeObserver.observe(node, {
+      attributes: true,
+      attributeFilter: ['id'],
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+  }
+
+  /**
+   * Returns true if a node is an HTML element with children,
+   * or is a defined custom element, or has non-empty text.
+   *
+   * @param {Node} node
+   * @return {boolean}
+   * @private
+   */
+  __hasContent(node) {
+    if (!node) {
+      return false;
+    }
+
+    return (
+      node.children.length > 0 ||
+      (node.nodeType === Node.ELEMENT_NODE && customElements.get(node.localName)) ||
+      (node.textContent && node.textContent.trim() !== '')
+    );
+  }
+
+  /**
+   * Fire an event to notify the controller host about node changes.
+   *
+   * @param {Node} node
+   * @private
+   */
+  __notifyChange(node) {
+    this.dispatchEvent(
+      new CustomEvent('slot-content-changed', {
+        detail: { hasContent: this.__hasContent(node), node },
+      }),
+    );
+  }
+
+  /**
+   * Set default ID on the node in case it is an HTML element.
+   *
+   * @param {Node} node
+   * @private
+   */
+  __updateNodeId(node) {
+    if (node.nodeType === Node.ELEMENT_NODE && !node.id) {
+      node.id = this.defaultId;
+    }
+  }
+}