@vaadin/component-base 24.0.0-alpha1 → 24.0.0-alpha10

package/src/slot-child-observe-controller.js

@@ -0,0 +1,176 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 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 SlotChildObserveController 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) {
+            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.nodeType === Node.ELEMENT_NODE && (customElements.get(node.localName) || node.children.length > 0)) ||
+      (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) {
+    // When in multiple mode, only set ID attribute on the element in default slot.
+    const isFirstNode = !this.nodes || node === this.nodes[0];
+    if (node.nodeType === Node.ELEMENT_NODE && isFirstNode && !node.id) {
+      node.id = this.defaultId;
+    }
+  }
+}

package/src/slot-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';
@@ -16,8 +16,16 @@ export class SlotController extends EventTarget implements ReactiveController {
    */
   node: HTMLElement;
 
+  /**
+   * The list of slotted nodes managed by the controller.
+   * Only used when `multiple` property is set to `true`.
+   */
+  nodes: HTMLElement[];
+
   protected initialized: boolean;
 
+  protected multiple: boolean;
+
   protected defaultNode: Node;
 
   protected defaultId: string;
@@ -25,20 +33,40 @@ export class SlotController extends EventTarget implements ReactiveController {
   constructor(
     host: HTMLElement,
     slotName: string,
-    slotFactory?: () => HTMLElement,
-    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
-    useUniqueId?: boolean,
+    tagName?: string,
+    config?: {
+      multiple?: boolean;
+      observe?: boolean;
+      useUniqueId?: boolean;
+      initializer?(host: HTMLElement, node: HTMLElement): void;
+    },
   );
 
   hostConnected(): void;
 
+  /**
+   * Return the list of nodes matching the slot managed by the controller.
+   */
+  getSlotChildren(): Node[];
+
   /**
    * Return a reference to the node managed by the controller.
    */
   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;
 
   /**
@@ -54,5 +82,5 @@ export class SlotController extends EventTarget implements ReactiveController {
   /**
    * Setup the observer to manage slot content changes.
    */
-  protected observe(): void;
+  protected observeSlot(): void;
 }

package/src/slot-controller.js

@@ -1,9 +1,10 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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 { isEmptyTextNode } from './dom-utils.js';
 import { generateUniqueId } from './unique-id-utils.js';
 
 /**
@@ -13,64 +14,97 @@ export class SlotController extends EventTarget {
   /**
    * Ensure that every instance has unique ID.
    *
-   * @param {string} slotName
    * @param {HTMLElement} host
+   * @param {string} slotName
    * @return {string}
    * @protected
    */
-  static generateId(slotName, host) {
+  static generateId(host, slotName) {
     const prefix = slotName || 'default';
     return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
 
-  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
+  constructor(host, slotName, tagName, config = {}) {
     super();
 
+    const { initializer, multiple, observe, useUniqueId } = config;
+
     this.host = host;
     this.slotName = slotName;
-    this.slotFactory = slotFactory;
-    this.slotInitializer = slotInitializer;
+    this.tagName = tagName;
+    this.observe = typeof observe === 'boolean' ? observe : true;
+    this.multiple = typeof multiple === 'boolean' ? multiple : false;
+    this.slotInitializer = initializer;
+
+    if (multiple) {
+      this.nodes = [];
+    }
 
     // Only generate the default ID if requested by the controller.
     if (useUniqueId) {
-      this.defaultId = SlotController.generateId(slotName, host);
+      this.defaultId = this.constructor.generateId(host, slotName);
     }
   }
 
   hostConnected() {
     if (!this.initialized) {
-      let node = this.getSlotChild();
-
-      if (!node) {
-        node = this.attachDefaultNode();
+      if (this.multiple) {
+        this.initMultiple();
       } else {
-        this.node = node;
-        this.initCustomNode(node);
+        this.initSingle();
       }
 
-      this.initNode(node);
-
-      // TODO: Consider making this behavior opt-in to improve performance.
-      this.observe();
+      if (this.observe) {
+        this.observeSlot();
+      }
 
       this.initialized = true;
     }
   }
 
+  /** @protected */
+  initSingle() {
+    let node = this.getSlotChild();
+
+    if (!node) {
+      node = this.attachDefaultNode();
+      this.initNode(node);
+    } else {
+      this.node = node;
+      this.initAddedNode(node);
+    }
+  }
+
+  /** @protected */
+  initMultiple() {
+    const children = this.getSlotChildren();
+
+    if (children.length === 0) {
+      const defaultNode = this.attachDefaultNode();
+      this.nodes = [defaultNode];
+      this.initNode(defaultNode);
+    } else {
+      this.nodes = children;
+      children.forEach((node) => {
+        this.initAddedNode(node);
+      });
+    }
+  }
+
   /**
-   * 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
    */
   attachDefaultNode() {
-    const { host, slotName, slotFactory } = this;
+    const { host, slotName, tagName } = this;
 
     // 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.
-    if (!node && slotFactory) {
-      node = slotFactory(host);
+    // Tag name is optional, sometimes we don't init default content.
+    if (!node && tagName) {
+      node = document.createElement(tagName);
       if (node instanceof Element) {
         if (slotName !== '') {
           node.setAttribute('slot', slotName);
@@ -88,12 +122,12 @@ export class SlotController extends EventTarget {
   }
 
   /**
-   * Return a reference to the node managed by the controller.
+   * Return the list of nodes matching the slot managed by the controller.
    * @return {Node}
    */
-  getSlotChild() {
+  getSlotChildren() {
     const { slotName } = this;
-    return Array.from(this.host.childNodes).find((node) => {
+    return Array.from(this.host.childNodes).filter((node) => {
       // Either an element (any slot) or a text node (only un-named slot).
       return (
         (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
@@ -103,6 +137,16 @@ export class SlotController extends EventTarget {
   }
 
   /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    return this.getSlotChildren()[0];
+  }
+
+  /**
+   * Run `slotInitializer` for the node managed by the controller.
+   *
    * @param {Node} node
    * @protected
    */
@@ -111,7 +155,7 @@ export class SlotController extends EventTarget {
     // Don't try to bind `this` to initializer (normally it's arrow function).
     // Instead, pass the host as a first argument to access component's state.
     if (slotInitializer) {
-      slotInitializer(this.host, node);
+      slotInitializer(node, this.host);
     }
   }
 
@@ -131,19 +175,34 @@ export class SlotController extends EventTarget {
    */
   teardownNode(_node) {}
 
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      this.initCustomNode(node);
+      this.initNode(node);
+    }
+  }
+
   /**
    * Setup the observer to manage slot content changes.
    * @protected
    */
-  observe() {
+  observeSlot() {
     const { slotName } = this;
     const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
     const slot = this.host.shadowRoot.querySelector(selector);
 
     this.__slotObserver = new FlattenedNodesObserver(slot, (info) => {
-      // TODO: support default slot with multiple nodes (e.g. confirm-dialog)
-      const current = this.node;
-      const newNode = info.addedNodes.find((node) => node !== current);
+      const current = this.multiple ? this.nodes : [this.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) => {
@@ -151,18 +210,22 @@ export class SlotController extends EventTarget {
         });
       }
 
-      if (newNode) {
+      if (newNodes && newNodes.length > 0) {
         // Custom node is added, remove the current one.
-        if (current && current.isConnected) {
-          this.host.removeChild(current);
-        }
-
-        this.node = newNode;
-
-        if (newNode !== this.defaultNode) {
-          this.initCustomNode(newNode);
+        current.forEach((node) => {
+          if (node && node.isConnected) {
+            node.parentNode.removeChild(node);
+          }
+        });
 
-          this.initNode(newNode);
+        if (this.multiple) {
+          this.nodes = newNodes;
+          newNodes.forEach((node) => {
+            this.initAddedNode(node);
+          });
+        } else {
+          this.node = newNodes[0];
+          this.initAddedNode(this.node);
         }
       }
     });

package/src/tabindex-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 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';

package/src/tabindex-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DisabledMixin } from './disabled-mixin.js';

package/src/templates.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/tooltip-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';

package/src/tooltip-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';

package/src/unique-id-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/unique-id-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/virtualizer-iron-list-adapter.js

@@ -1,8 +1,10 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+/* eslint-disable @typescript-eslint/member-ordering */
+// https://github.com/vaadin/eslint-config-vaadin/issues/33
 import { animationFrame, timeOut } from './async.js';
 import { isSafari } from './browser-utils.js';
 import { Debouncer, flush } from './debounce.js';
@@ -34,6 +36,7 @@ export class IronListAdapter {
     this.timeouts = {
       SCROLL_REORDER: 500,
       IGNORE_WHEEL: 500,
+      FIX_INVALID_ITEM_POSITIONING: 100,
     };
 
     this.__resizeObserver = new ResizeObserver(() => this._resizeHandler());
@@ -121,6 +124,9 @@ export class IronListAdapter {
     this._resizeHandler();
     flush();
     this._scrollHandler();
+    if (this.__fixInvalidItemPositioningDebouncer) {
+      this.__fixInvalidItemPositioningDebouncer.flush();
+    }
     if (this.__scrollReorderDebouncer) {
       this.__scrollReorderDebouncer.flush();
     }
@@ -184,6 +190,14 @@ export class IronListAdapter {
     if (size === this.size) {
       return;
     }
+    // Cancel active debouncers
+    if (this.__fixInvalidItemPositioningDebouncer) {
+      this.__fixInvalidItemPositioningDebouncer.cancel();
+    }
+    if (this._debouncers && this._debouncers._increasePoolIfNeeded) {
+      // Avoid creating unnecessary elements on the following flush()
+      this._debouncers._increasePoolIfNeeded.cancel();
+    }
 
     // Prevent element update while the scroll position is being restored
     this.__preventElementUpdates = true;
@@ -199,10 +213,6 @@ export class IronListAdapter {
     // Change the size
     this.__size = size;
 
-    // Flush before invoking items change to avoid
-    // creating excess elements on the following flush()
-    flush();
-
     this._itemsChanged({
       path: 'items',
     });
@@ -344,6 +354,15 @@ export class IronListAdapter {
       }
     }
 
+    if (delta) {
+      // There was a change in scroll top. Schedule a check for invalid item positioning.
+      this.__fixInvalidItemPositioningDebouncer = Debouncer.debounce(
+        this.__fixInvalidItemPositioningDebouncer,
+        timeOut.after(this.timeouts.FIX_INVALID_ITEM_POSITIONING),
+        () => this.__fixInvalidItemPositioning(),
+      );
+    }
+
     if (this.reorderElements) {
       this.__scrollReorderDebouncer = Debouncer.debounce(
         this.__scrollReorderDebouncer,
@@ -355,9 +374,46 @@ export class IronListAdapter {
     this.__previousScrollTop = this._scrollTop;
 
     // If the first visible index is not 0 when scrolled to the top,
-    // add some scroll offset to enable the user to continue scrolling.
-    if (this._scrollTop === 0 && this.firstVisibleIndex !== 0) {
-      this._scrollTop = 1;
+    // scroll to index 0 to fix the issue.
+    if (this._scrollTop === 0 && this.firstVisibleIndex !== 0 && Math.abs(delta) > 0) {
+      this.scrollToIndex(0);
+    }
+  }
+
+  /**
+   * Work around an iron-list issue with invalid item positioning.
+   * See https://github.com/vaadin/flow-components/issues/4306
+   * @private
+   */
+  __fixInvalidItemPositioning() {
+    if (!this.scrollTarget.isConnected) {
+      return;
+    }
+
+    // Check if the first physical item element is below the top of the viewport
+    const physicalTopBelowTop = this._physicalTop > this._scrollTop;
+    // Check if the last physical item element is above the bottom of the viewport
+    const physicalBottomAboveBottom = this._physicalBottom < this._scrollBottom;
+
+    // Check if the first index is visible
+    const firstIndexVisible = this.adjustedFirstVisibleIndex === 0;
+    // Check if the last index is visible
+    const lastIndexVisible = this.adjustedLastVisibleIndex === this.size - 1;
+
+    if ((physicalTopBelowTop && !firstIndexVisible) || (physicalBottomAboveBottom && !lastIndexVisible)) {
+      // Invalid state! Try to recover.
+
+      const isScrollingDown = physicalBottomAboveBottom;
+      // Set the "_ratio" property temporarily to 0 to make iron-list's _getReusables
+      // place all the free physical items on one side of the viewport.
+      const originalRatio = this._ratio;
+      this._ratio = 0;
+      // Fake a scroll change to make _scrollHandler place the physical items
+      // on the desired side.
+      this._scrollPosition = this._scrollTop + (isScrollingDown ? -1 : 1);
+      this._scrollHandler();
+      // Restore the original "_ratio" value.
+      this._ratio = originalRatio;
     }
   }
 
@@ -376,7 +432,9 @@ export class IronListAdapter {
       deltaY *= this._scrollPageHeight;
     }
 
-    this._deltaYAcc = this._deltaYAcc || 0;
+    if (!this._deltaYAcc) {
+      this._deltaYAcc = 0;
+    }
 
     if (this._wheelAnimationFrame) {
       // Accumulate wheel delta while a frame is being processed