@vaadin/component-base 24.0.5 → 24.1.0-alpha10

package/index.d.ts

@@ -1,11 +1,6 @@
-export { ActiveMixin } from './src/active-mixin.js';
 export { ControllerMixin } from './src/controller-mixin.js';
+export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
-export { DisabledMixin } from './src/disabled-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';
-export { FocusMixin } from './src/focus-mixin.js';
-export { FocusTrapController } from './src/focus-trap-controller.js';
-export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
-export { TabindexMixin } from './src/tabindex-mixin.js';

package/index.js

@@ -1,10 +1,6 @@
-export { ActiveMixin } from './src/active-mixin.js';
 export { ControllerMixin } from './src/controller-mixin.js';
+export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
-export { DisabledMixin } from './src/disabled-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';
-export { FocusMixin } from './src/focus-mixin.js';
-export { FocusTrapController } from './src/focus-trap-controller.js';
-export { KeyboardMixin } from './src/keyboard-mixin.js';
+export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
-export { TabindexMixin } from './src/tabindex-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "e384c1b5c02e01a4382a433f727d075de9a4ee97"
+  "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
 }

package/src/async.js

@@ -20,13 +20,10 @@
  * asynchronous tasks.
  */
 
-// Microtask implemented using Mutation Observer
 let microtaskCurrHandle = 0;
 let microtaskLastHandle = 0;
 const microtaskCallbacks = [];
-let microtaskNodeContent = 0;
 let microtaskScheduled = false;
-const microtaskNode = document.createTextNode('');
 
 function microtaskFlush() {
   microtaskScheduled = false;
@@ -47,8 +44,6 @@ function microtaskFlush() {
   microtaskLastHandle += len;
 }
 
-new window.MutationObserver(microtaskFlush).observe(microtaskNode, { characterData: true });
-
 /**
  * Async interface wrapper around `setTimeout`.
  *
@@ -166,12 +161,6 @@ export { idlePeriod };
 /**
  * Async interface for enqueuing callbacks that run at microtask timing.
  *
- * Note that microtask timing is achieved via a single `MutationObserver`,
- * and thus callbacks enqueued with this API will all run in a single
- * batch, and not interleaved with other microtasks such as promises.
- * Promises are avoided as an implementation choice for the time being
- * due to Safari bugs that cause Promises to lack microtask guarantees.
- *
  * @namespace
  * @summary Async interface for enqueuing callbacks that run at microtask
  *   timing.
@@ -187,8 +176,7 @@ const microTask = {
   run(callback) {
     if (!microtaskScheduled) {
       microtaskScheduled = true;
-      microtaskNode.textContent = microtaskNodeContent;
-      microtaskNodeContent += 1;
+      queueMicrotask(() => microtaskFlush());
     }
     microtaskCallbacks.push(callback);
     const result = microtaskCurrHandle;

package/src/dom-utils.d.ts

@@ -13,6 +13,16 @@
  */
 export function getAncestorRootNodes(node: Node): Node[];
 
+/**
+ * Takes a string with values separated by space and returns a set the values
+ */
+export function deserializeAttributeValue(value: string): Set<string>;
+
+/**
+ * Takes a set of string values and returns a string with values separated by space
+ */
+export function serializeAttributeValue(values: Set<string>): string;
+
 /**
  * Adds a value to an attribute containing space-delimited values.
  */

package/src/dom-utils.js

@@ -41,10 +41,12 @@ export function getAncestorRootNodes(node) {
 }
 
 /**
+ * Takes a string with values separated by space and returns a set the values
+ *
  * @param {string} value
  * @return {Set<string>}
  */
-function deserializeAttributeValue(value) {
+export function deserializeAttributeValue(value) {
   if (!value) {
     return new Set();
   }
@@ -53,11 +55,13 @@ function deserializeAttributeValue(value) {
 }
 
 /**
+ * Takes a set of string values and returns a string with values separated by space
+ *
  * @param {Set<string>} values
  * @return {string}
  */
-function serializeAttributeValue(values) {
-  return [...values].join(' ');
+export function serializeAttributeValue(values) {
+  return values ? [...values].join(' ') : '';
 }
 
 /**

package/src/element-mixin.js

@@ -45,7 +45,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.5';
+      return '24.1.0-alpha10';
     }
 
     /** @protected */

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

@@ -136,11 +136,15 @@ export class IronListAdapter {
   }
 
   update(startIndex = 0, endIndex = this.size - 1) {
+    const updatedElements = [];
     this.__getVisibleElements().forEach((el) => {
       if (el.__virtualIndex >= startIndex && el.__virtualIndex <= endIndex) {
         this.__updateElement(el, el.__virtualIndex, true);
+        updatedElements.push(el);
       }
     });
+
+    this.__afterElementsUpdated(updatedElements);
   }
 
   /**
@@ -203,28 +207,40 @@ export class IronListAdapter {
       this.updateElement(el, index);
       el.__lastUpdatedIndex = index;
     }
+  }
 
-    const elementHeight = el.offsetHeight;
-    if (elementHeight === 0) {
-      // If the elements have 0 height after update (for example due to lazy rendering),
-      // it results in iron-list requesting to create an unlimited count of elements.
-      // Assign a temporary placeholder sizing to elements that would otherwise end up having
-      // no height.
-      el.style.paddingTop = `${this.__placeholderHeight}px`;
-
-      // Manually schedule the resize handler to make sure the placeholder padding is
-      // cleared in case the resize observer never triggers.
-      requestAnimationFrame(() => this._resizeHandler());
-    } else {
-      // Add element height to the queue
-      this.__elementHeightQueue.push(elementHeight);
-      this.__elementHeightQueue.shift();
-
-      // Calcualte new placeholder height based on the average of the defined values in the
-      // element height queue
-      const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
-      this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
-    }
+  /**
+   * Called synchronously right after elements have been updated.
+   * This is a good place to do any post-update work.
+   *
+   * @param {!Array<!HTMLElement>} updatedElements
+   */
+  __afterElementsUpdated(updatedElements) {
+    updatedElements.forEach((el) => {
+      const elementHeight = el.offsetHeight;
+      if (elementHeight === 0) {
+        // If the elements have 0 height after update (for example due to lazy rendering),
+        // it results in iron-list requesting to create an unlimited count of elements.
+        // Assign a temporary placeholder sizing to elements that would otherwise end up having
+        // no height.
+        el.style.paddingTop = `${this.__placeholderHeight}px`;
+
+        // Manually schedule the resize handler to make sure the placeholder padding is
+        // cleared in case the resize observer never triggers.
+        this.__placeholderClearDebouncer = Debouncer.debounce(this.__placeholderClearDebouncer, animationFrame, () =>
+          this._resizeHandler(),
+        );
+      } else {
+        // Add element height to the queue
+        this.__elementHeightQueue.push(elementHeight);
+        this.__elementHeightQueue.shift();
+
+        // Calculate new placeholder height based on the average of the defined values in the
+        // element height queue
+        const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
+        this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
+      }
+    });
   }
 
   __getIndexScrollOffset(index) {
@@ -249,42 +265,28 @@ export class IronListAdapter {
       this._debouncers._increasePoolIfNeeded.cancel();
     }
 
-    // Prevent element update while the scroll position is being restored
-    this.__preventElementUpdates = true;
-
-    // Record the scroll position before changing the size
-    let fvi; // First visible index
-    let fviOffsetBefore; // Scroll offset of the first visible index
-    if (size > 0) {
-      fvi = this.adjustedFirstVisibleIndex;
-      fviOffsetBefore = this.__getIndexScrollOffset(fvi);
-    }
-
     // Change the size
     this.__size = size;
 
-    this._itemsChanged({
-      path: 'items',
-    });
-    flush();
-
-    // Try to restore the scroll position if the new size is larger than 0
-    if (size > 0) {
-      fvi = Math.min(fvi, size - 1);
-      this.scrollToIndex(fvi);
-
-      const fviOffsetAfter = this.__getIndexScrollOffset(fvi);
-      if (fviOffsetBefore !== undefined && fviOffsetAfter !== undefined) {
-        this._scrollTop += fviOffsetBefore - fviOffsetAfter;
-      }
+    if (!this._physicalItems) {
+      // Not initialized yet
+      this._itemsChanged({
+        path: 'items',
+      });
+      this.__preventElementUpdates = true;
+      flush();
+      this.__preventElementUpdates = false;
+    } else {
+      // Already initialized, just update _virtualCount
+      this._virtualCount = this.items.length;
     }
 
     if (!this.elementsContainer.children.length) {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
-    this.__preventElementUpdates = false;
-    // Schedule and flush a resize handler
+    // Schedule and flush a resize handler. This will cause a
+    // re-render for the elements.
     this._resizeHandler();
     flush();
   }
@@ -349,16 +351,20 @@ export class IronListAdapter {
 
   /** @private */
   _assignModels(itemSet) {
+    const updatedElements = [];
     this._iterateItems((pidx, vidx) => {
       const el = this._physicalItems[pidx];
       el.hidden = vidx >= this.size;
       if (!el.hidden) {
         el.__virtualIndex = vidx + (this._vidxOffset || 0);
         this.__updateElement(el, el.__virtualIndex);
+        updatedElements.push(el);
       } else {
         delete el.__lastUpdatedIndex;
       }
     }, itemSet);
+
+    this.__afterElementsUpdated(updatedElements);
   }
 
   /** @private */
@@ -557,6 +563,29 @@ export class IronListAdapter {
     );
   }
 
+  /**
+   * Increases the pool size.
+   * @override
+   */
+  _increasePoolIfNeeded(count) {
+    if (this._physicalCount > 2 && count) {
+      // The iron-list logic has already created some physical items and
+      // has decided to create more. Since each item creation round is
+      // expensive, let's try to create the remaining items in one go.
+
+      // Calculate the total item count that would be needed to fill the viewport
+      // plus the buffer assuming rest of the items to be of the average size
+      // of the items already created.
+      const totalItemCount = Math.ceil(this._optPhysicalSize / this._physicalAverage);
+      const missingItemCount = totalItemCount - this._physicalCount;
+      // Create the remaining items in one go. Use a maximum of 100 items
+      // as a safety measure.
+      super._increasePoolIfNeeded(Math.max(count, Math.min(100, missingItemCount)));
+    } else {
+      super._increasePoolIfNeeded(count);
+    }
+  }
+
   /**
    * @returns {Number|undefined} - The browser's default font-size in pixels
    * @private

package/src/a11y-announcer.d.ts

@@ -1,10 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Cause a text string to be announced by screen readers.
- */
-export function announce(text: string, options?: { mode?: 'alert' | 'assertive' | 'polite'; timeout?: number }): void;

package/src/a11y-announcer.js

@@ -1,47 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { animationFrame } from './async.js';
-import { Debouncer } from './debounce.js';
-
-const region = document.createElement('div');
-
-region.style.position = 'fixed';
-region.style.clip = 'rect(0px, 0px, 0px, 0px)';
-region.setAttribute('aria-live', 'polite');
-
-document.body.appendChild(region);
-
-let alertDebouncer;
-/**
- * Cause a text string to be announced by screen readers.
- *
- * @param {string} text The text that should be announced by the screen reader.
- * @param {{mode?: string, timeout?: number}} options Additional options.
- */
-export function announce(text, options = {}) {
-  const mode = options.mode || 'polite';
-  const timeout = options.timeout === undefined ? 150 : options.timeout;
-
-  if (mode === 'alert') {
-    region.removeAttribute('aria-live');
-    region.removeAttribute('role');
-    alertDebouncer = Debouncer.debounce(alertDebouncer, animationFrame, () => {
-      region.setAttribute('role', 'alert');
-    });
-  } else {
-    if (alertDebouncer) {
-      alertDebouncer.cancel();
-    }
-    region.removeAttribute('role');
-    region.setAttribute('aria-live', mode);
-  }
-
-  region.textContent = '';
-
-  setTimeout(() => {
-    region.textContent = text;
-  }, timeout);
-}

package/src/active-mixin.d.ts

@@ -1,41 +0,0 @@
-/**
- * @license
- * 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';
-import type { DisabledMixinClass } from './disabled-mixin.js';
-import type { KeyboardMixinClass } from './keyboard-mixin.js';
-
-/**
- * A mixin to toggle the `active` attribute.
- *
- * The attribute is set whenever the user activates the element by a pointer
- * or presses an activation key on the element from the keyboard.
- *
- * The attribute is removed as soon as the element is deactivated
- * by the pointer or by releasing the activation key.
- */
-export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass> & T;
-
-export declare class ActiveMixinClass {
-  /**
-   * An array of activation keys.
-   *
-   * See possible values here:
-   * https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/key/Key_Values
-   */
-  protected readonly _activeKeys: string[];
-
-  /**
-   * Override to define if the component needs to be activated.
-   */
-  protected _shouldSetFocus(event: KeyboardEvent | MouseEvent): boolean;
-
-  /**
-   * Toggles the `active` attribute on the element.
-   */
-  protected _setActive(active: boolean): void;
-}

package/src/active-mixin.js

@@ -1,106 +0,0 @@
-/**
- * @license
- * 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';
-import { addListener } from './gestures.js';
-import { KeyboardMixin } from './keyboard-mixin.js';
-
-/**
- * A mixin to toggle the `active` attribute.
- *
- * The attribute is set whenever the user activates the element by a pointer
- * or presses an activation key on the element from the keyboard.
- *
- * The attribute is removed as soon as the element is deactivated
- * by the pointer or by releasing the activation key.
- *
- * @polymerMixin
- */
-export const ActiveMixin = (superclass) =>
-  class ActiveMixinClass extends DisabledMixin(KeyboardMixin(superclass)) {
-    /**
-     * An array of activation keys.
-     *
-     * See possible values here:
-     * https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/key/Key_Values
-     *
-     * @protected
-     * @return {!Array<!string>}
-     */
-    get _activeKeys() {
-      return [' '];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      addListener(this, 'down', (event) => {
-        if (this._shouldSetActive(event)) {
-          this._setActive(true);
-        }
-      });
-
-      addListener(this, 'up', () => {
-        this._setActive(false);
-      });
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      // When the element is disconnecting from the DOM at the moment being active,
-      // the `active` attribute needs to be manually removed from the element.
-      // Otherwise, it will preserve on the element until the element is activated once again.
-      // The case reproduces for `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-      this._setActive(false);
-    }
-
-    /**
-     * @param {KeyboardEvent | MouseEvent} _event
-     * @protected
-     */
-    _shouldSetActive(_event) {
-      return !this.disabled;
-    }
-
-    /**
-     * Sets the `active` attribute on the element if an activation key is pressed.
-     *
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (this._shouldSetActive(event) && this._activeKeys.includes(event.key)) {
-        this._setActive(true);
-
-        // Element can become hidden before the `keyup` event, e.g. on button click.
-        // Use document listener to ensure `active` attribute is removed correctly.
-        document.addEventListener(
-          'keyup',
-          (e) => {
-            if (this._activeKeys.includes(e.key)) {
-              this._setActive(false);
-            }
-          },
-          { once: true },
-        );
-      }
-    }
-
-    /**
-     * Toggles the `active` attribute on the element.
-     *
-     * @param {boolean} active
-     * @protected
-     */
-    _setActive(active) {
-      this.toggleAttribute('active', active);
-    }
-  };

package/src/delegate-focus-mixin.d.ts

@@ -1,48 +0,0 @@
-/**
- * @license
- * 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';
-import type { DisabledMixinClass } from './disabled-mixin.js';
-import type { FocusMixinClass } from './focus-mixin.js';
-import type { TabindexMixinClass } from './tabindex-mixin.js';
-
-/**
- * A mixin to forward focus to an element in the light DOM.
- */
-export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<DelegateFocusMixinClass> &
-  Constructor<DisabledMixinClass> &
-  Constructor<FocusMixinClass> &
-  Constructor<TabindexMixinClass> &
-  T;
-
-export declare class DelegateFocusMixinClass {
-  /**
-   * Specify that this control should have input focus when the page loads.
-   */
-  autofocus: boolean;
-
-  /**
-   * A reference to the focusable element controlled by the mixin.
-   * It can be an input, textarea, button or any element with tabindex > -1.
-   *
-   * Any component implementing this mixin is expected to provide it
-   * by using `this._setFocusElement(input)` Polymer API.
-   */
-  readonly focusElement: HTMLElement | null | undefined;
-
-  protected _addFocusListeners(element: HTMLElement): void;
-
-  protected _removeFocusListeners(element: HTMLElement): void;
-
-  protected _focusElementChanged(element: HTMLElement, oldElement: HTMLElement): void;
-
-  protected _onBlur(event: FocusEvent): void;
-
-  protected _onFocus(event: FocusEvent): void;
-
-  protected _setFocusElement(element: HTMLElement): void;
-}