npm - @vaadin/component-base - Versions diffs - 24.0.0-alpha9 → 24.0.0-beta1 - Mend

@vaadin/component-base 24.0.0-alpha9 → 24.0.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/custom_typings/vaadin-usage-statistics.d.ts +2 -2
package/package.json +3 -3
package/src/async.d.ts +3 -0
package/src/async.js +2 -1
package/src/debounce.js +2 -2
package/src/dir-mixin.js +18 -18
package/src/element-mixin.js +1 -1
package/src/focus-mixin.js +1 -1
package/src/focus-trap-controller.js +21 -21
package/src/focus-utils.js +56 -56
package/src/gestures.d.ts +6 -12
package/src/gestures.js +5 -3
package/src/keyboard-direction-mixin.js +11 -11
package/src/list-mixin.d.ts +7 -0
package/src/list-mixin.js +47 -36
package/src/polylit-mixin.d.ts +2 -2
package/src/resize-mixin.js +10 -10
package/src/virtualizer-iron-list-adapter.js +2 -0
package/src/virtualizer.js +18 -18

package/custom_typings/vaadin-usage-statistics.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 declare module '@vaadin/vaadin-usage-statistics/vaadin-usage-statistics.js' {
-  export { usageStatistics };
   function usageStatistics(): void;
+  export { usageStatistics };
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

package/src/async.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@
  */
 export interface AsyncInterface {
+  // eslint-disable-next-line @typescript-eslint/ban-types
   run(fn: Function, delay?: number): number;
   cancel(handle: number): void;
 }
@@ -39,6 +40,7 @@ declare namespace timeOut {
    *
    * @returns Handle used for canceling task
    */
+  // eslint-disable-next-line @typescript-eslint/ban-types
   function run(fn: Function, delay?: number): number;
   /**
@@ -103,6 +105,7 @@ declare namespace microTask {
    *
    * @returns Handle used for canceling task
    */
+  // eslint-disable-next-line @typescript-eslint/ban-types
   function run(callback?: Function): number;
   /**

package/src/async.js CHANGED Viewed

@@ -27,7 +27,6 @@ const microtaskCallbacks = [];
 let microtaskNodeContent = 0;
 let microtaskScheduled = false;
 const microtaskNode = document.createTextNode('');
-new window.MutationObserver(microtaskFlush).observe(microtaskNode, { characterData: true });
 function microtaskFlush() {
   microtaskScheduled = false;
@@ -48,6 +47,8 @@ function microtaskFlush() {
   microtaskLastHandle += len;
 }
+new window.MutationObserver(microtaskFlush).observe(microtaskNode, { characterData: true });
 /**
  * Async interface wrapper around `setTimeout`.
  *

package/src/debounce.js CHANGED Viewed

@@ -8,6 +8,8 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
+const debouncerQueue = new Set();
 /**
  * @summary Collapse multiple callbacks into one invocation after a timer.
  */
@@ -133,8 +135,6 @@ export class Debouncer {
   }
 }
-let debouncerQueue = new Set();
 /**
  * Adds a `Debouncer` to a list of globally flushable tasks.
  *

package/src/dir-mixin.js CHANGED Viewed

@@ -9,16 +9,6 @@
  */
 const directionSubscribers = [];
-function directionUpdater() {
-  const documentDir = getDocumentDir();
-  directionSubscribers.forEach((element) => {
-    alignDirs(element, documentDir);
-  });
-}
-const directionObserver = new MutationObserver(directionUpdater);
-directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
 function alignDirs(element, documentDir, elementDir = element.getAttribute('dir')) {
   if (documentDir) {
     element.setAttribute('dir', documentDir);
@@ -31,6 +21,16 @@ function getDocumentDir() {
   return document.documentElement.getAttribute('dir');
 }
+function directionUpdater() {
+  const documentDir = getDocumentDir();
+  directionSubscribers.forEach((element) => {
+    alignDirs(element, documentDir);
+  });
+}
+const directionObserver = new MutationObserver(directionUpdater);
+directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
  *
@@ -59,6 +59,14 @@ export const DirMixin = (superClass) =>
       };
     }
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
@@ -100,14 +108,6 @@ export const DirMixin = (superClass) =>
       this.__unsubscribe();
     }
-    /**
-     * @return {boolean}
-     * @protected
-     */
-    get __isRTL() {
-      return this.getAttribute('dir') === 'rtl';
-    }
     /** @protected */
     _valueToNodeAttribute(node, value, attribute) {
       // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property

package/src/element-mixin.js CHANGED Viewed

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

package/src/focus-mixin.js CHANGED Viewed

@@ -39,7 +39,7 @@ export const FocusMixin = dedupingMixin(
         // In super.ready() other 'focusin' and 'focusout' listeners might be
         // added, so we call it after our own ones to ensure they execute first.
         // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
-        // input field on iOS after “Done” is pressed.
+        // input field on iOS after "Done" is pressed.
         super.ready();
       }

package/src/focus-trap-controller.js CHANGED Viewed

@@ -33,6 +33,27 @@ export class FocusTrapController {
     this.__onKeyDown = this.__onKeyDown.bind(this);
   }
+  /**
+   * An array of tab-ordered focusable elements inside the trap node.
+   *
+   * @return {HTMLElement[]}
+   * @private
+   */
+  get __focusableElements() {
+    return getFocusableElements(this.__trapNode);
+  }
+  /**
+   * The index of the element inside the trap node that currently has focus.
+   *
+   * @return {HTMLElement | undefined}
+   * @private
+   */
+  get __focusedElementIndex() {
+    const focusableElements = this.__focusableElements;
+    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
+  }
   hostConnected() {
     document.addEventListener('keydown', this.__onKeyDown);
   }
@@ -131,25 +152,4 @@ export class FocusTrapController {
       element.select();
     }
   }
-  /**
-   * An array of tab-ordered focusable elements inside the trap node.
-   *
-   * @return {HTMLElement[]}
-   * @private
-   */
-  get __focusableElements() {
-    return getFocusableElements(this.__trapNode);
-  }
-  /**
-   * The index of the element inside the trap node that currently has focus.
-   *
-   * @return {HTMLElement | undefined}
-   * @private
-   */
-  get __focusedElementIndex() {
-    const focusableElements = this.__focusableElements;
-    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
-  }
 }

package/src/focus-utils.js CHANGED Viewed

@@ -61,24 +61,6 @@ function isElementHiddenDirectly(element) {
   return false;
 }
-/**
- * Returns the normalized element tabindex. If not focusable, returns -1.
- * It checks for the attribute "tabindex" instead of the element property
- * `tabIndex` since browsers assign different values to it.
- * e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
- *
- * @param {HTMLElement} element
- * @return {number}
- */
-function normalizeTabIndex(element) {
-  if (!isElementFocusable(element)) {
-    return -1;
-  }
-  const tabIndex = element.getAttribute('tabindex') || 0;
-  return Number(tabIndex);
-}
 /**
  * Returns if element `a` has lower tab order compared to element `b`
  * (both elements are assumed to be focusable and tabbable).
@@ -138,42 +120,6 @@ function sortElementsByTabIndex(elements) {
   return mergeSortByTabIndex(left, right);
 }
-/**
- * Searches for nodes that are tabbable and adds them to the `result` array.
- * Returns if the `result` array needs to be sorted by tabindex.
- *
- * @param {Node} node The starting point for the search; added to `result` if tabbable.
- * @param {HTMLElement[]} result
- * @return {boolean}
- * @private
- */
-function collectFocusableNodes(node, result) {
-  if (node.nodeType !== Node.ELEMENT_NODE || isElementHiddenDirectly(node)) {
-    // Don't traverse children if the node is not an HTML element or not visible.
-    return false;
-  }
-  const element = /** @type {HTMLElement} */ (node);
-  const tabIndex = normalizeTabIndex(element);
-  let needsSort = tabIndex > 0;
-  if (tabIndex >= 0) {
-    result.push(element);
-  }
-  let children = [];
-  if (element.localName === 'slot') {
-    children = element.assignedNodes({ flatten: true });
-  } else {
-    // Use shadow root if possible, will check for distributed nodes.
-    children = (element.shadowRoot || element).children;
-  }
-  [...children].forEach((child) => {
-    // Ensure method is always invoked to collect focusable children.
-    needsSort = collectFocusableNodes(child, result) || needsSort;
-  });
-  return needsSort;
-}
 /**
  * Returns true if the element is hidden, false otherwise.
  *
@@ -239,6 +185,60 @@ export function isElementFocused(element) {
   return element.getRootNode().activeElement === element;
 }
+/**
+ * Returns the normalized element tabindex. If not focusable, returns -1.
+ * It checks for the attribute "tabindex" instead of the element property
+ * `tabIndex` since browsers assign different values to it.
+ * e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
+ *
+ * @param {HTMLElement} element
+ * @return {number}
+ */
+function normalizeTabIndex(element) {
+  if (!isElementFocusable(element)) {
+    return -1;
+  }
+  const tabIndex = element.getAttribute('tabindex') || 0;
+  return Number(tabIndex);
+}
+/**
+ * Searches for nodes that are tabbable and adds them to the `result` array.
+ * Returns if the `result` array needs to be sorted by tabindex.
+ *
+ * @param {Node} node The starting point for the search; added to `result` if tabbable.
+ * @param {HTMLElement[]} result
+ * @return {boolean}
+ * @private
+ */
+function collectFocusableNodes(node, result) {
+  if (node.nodeType !== Node.ELEMENT_NODE || isElementHiddenDirectly(node)) {
+    // Don't traverse children if the node is not an HTML element or not visible.
+    return false;
+  }
+  const element = /** @type {HTMLElement} */ (node);
+  const tabIndex = normalizeTabIndex(element);
+  let needsSort = tabIndex > 0;
+  if (tabIndex >= 0) {
+    result.push(element);
+  }
+  let children = [];
+  if (element.localName === 'slot') {
+    children = element.assignedNodes({ flatten: true });
+  } else {
+    // Use shadow root if possible, will check for distributed nodes.
+    children = (element.shadowRoot || element).children;
+  }
+  [...children].forEach((child) => {
+    // Ensure method is always invoked to collect focusable children.
+    needsSort = collectFocusableNodes(child, result) || needsSort;
+  });
+  return needsSort;
+}
 /**
  * Returns a tab-ordered array of focusable elements for a root element.
  * The resulting array will include the root element if it is focusable.
@@ -251,8 +251,8 @@ export function isElementFocused(element) {
 export function getFocusableElements(element) {
   const focusableElements = [];
   const needsSortByTabIndex = collectFocusableNodes(element, focusableElements);
-  // If there is at least one element with tabindex > 0, we need to sort
-  // the final array by tabindex.≈
+  // If there is at least one element with tabindex > 0,
+  // we need to sort the final array by tabindex.
   if (needsSortByTabIndex) {
     return sortElementsByTabIndex(focusableElements);
   }

package/src/gestures.d.ts CHANGED Viewed

@@ -8,8 +8,6 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
-export { deepTargetFind };
 /**
  * Finds the element rendered on the screen at the provided coordinates.
  *
@@ -20,8 +18,7 @@ export { deepTargetFind };
  * found at the screen position given.
  */
 declare function deepTargetFind(x: number, y: number): Element | null;
-export { addListener };
+export { deepTargetFind };
 /**
  * Adds an event listener to a node for the given gesture type.
@@ -29,8 +26,7 @@ export { addListener };
  * @returns Returns true if a gesture event listener was added.
  */
 declare function addListener(node: EventTarget, evType: string, handler: (p0: Event) => void): boolean;
-export { removeListener };
+export { addListener };
 /**
  * Removes an event listener from a node for the given gesture type.
@@ -38,16 +34,14 @@ export { removeListener };
  * @returns Returns true if a gesture event listener was removed.
  */
 declare function removeListener(node: EventTarget, evType: string, handler: (p0: Event) => void): boolean;
-export { register };
+export { removeListener };
 /**
  * Registers a new gesture event recognizer for adding new custom
  * gesture event types.
  */
 declare function register(recog: GestureRecognizer): void;
-export { setTouchAction };
+export { register };
 /**
  * Sets scrolling direction on node.
@@ -56,13 +50,13 @@ export { setTouchAction };
  * adding event listeners.
  */
 declare function setTouchAction(node: EventTarget, value: string): void;
-export { prevent };
+export { setTouchAction };
 /**
  * Prevents the dispatch and default action of the given event name.
  */
 declare function prevent(evName: string): void;
+export { prevent };
 export interface GestureRecognizer {
   reset(): void;

package/src/gestures.js CHANGED Viewed

@@ -8,6 +8,8 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 /**
  * @fileoverview
  *
@@ -468,9 +470,9 @@ function _remove(node, evType, handler) {
  */
 export function register(recog) {
   recognizers.push(recog);
-  for (let i = 0; i < recog.emits.length; i++) {
-    gestures[recog.emits[i]] = recog;
-  }
+  recog.emits.forEach((emit) => {
+    gestures[emit] = recog;
+  });
 }
 /**

package/src/keyboard-direction-mixin.js CHANGED Viewed

@@ -14,17 +14,6 @@ import { KeyboardMixin } from './keyboard-mixin.js';
  */
 export const KeyboardDirectionMixin = (superclass) =>
   class KeyboardDirectionMixinClass extends KeyboardMixin(superclass) {
-    /** @protected */
-    focus() {
-      const items = this._getItems();
-      if (Array.isArray(items)) {
-        const idx = this._getAvailableIndex(items, 0, null, (item) => !isElementHidden(item));
-        if (idx >= 0) {
-          items[idx].focus();
-        }
-      }
-    }
     /**
      * @return {Element | null}
      * @protected
@@ -41,6 +30,17 @@ export const KeyboardDirectionMixin = (superclass) =>
       return true;
     }
+    /** @protected */
+    focus() {
+      const items = this._getItems();
+      if (Array.isArray(items)) {
+        const idx = this._getAvailableIndex(items, 0, null, (item) => !isElementHidden(item));
+        if (idx >= 0) {
+          items[idx].focus();
+        }
+      }
+    }
     /**
      * Get the list of items participating in keyboard navigation.
      * By default, it treats all the light DOM children as items.

package/src/list-mixin.d.ts CHANGED Viewed

@@ -20,6 +20,13 @@ export declare class ListMixinClass {
    */
   _hasVaadinListMixin: boolean;
+  /**
+   * If true, the user cannot interact with this element.
+   * When the element is disabled, the selected item is
+   * not updated when `selected` property is changed.
+   */
+  disabled: boolean;
   /**
    * The index of the item selected in the items array.
    * Note: Not updated when used in `multiple` selection mode.

package/src/list-mixin.js CHANGED Viewed

@@ -27,6 +27,17 @@ export const ListMixin = (superClass) =>
           value: true,
         },
+        /**
+         * If true, the user cannot interact with this element.
+         * When the element is disabled, the selected item is
+         * not updated when `selected` property is changed.
+         */
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
         /**
          * The index of the item selected in the items array.
          * Note: Not updated when used in `multiple` selection mode.
@@ -82,6 +93,41 @@ export const ListMixin = (superClass) =>
       return ['_enhanceItems(items, orientation, selected, disabled)'];
     }
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get _isRTL() {
+      return !this._vertical && this.getAttribute('dir') === 'rtl';
+    }
+    /**
+     * @return {!HTMLElement}
+     * @protected
+     */
+    get _scrollerElement() {
+      // Returning scroller element of the component
+      console.warn(`Please implement the '_scrollerElement' property in <${this.localName}>`);
+      return this;
+    }
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get _vertical() {
+      return this.orientation !== 'horizontal';
+    }
+    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);
+    }
     /** @protected */
     ready() {
       super.ready();
@@ -110,7 +156,7 @@ export const ListMixin = (superClass) =>
       if (!disabled) {
         if (items) {
           this.setAttribute('aria-orientation', orientation || 'vertical');
-          this.items.forEach((item) => {
+          items.forEach((item) => {
             if (orientation) {
               item.setAttribute('orientation', orientation);
             } else {
@@ -189,14 +235,6 @@ export const ListMixin = (superClass) =>
         .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.
@@ -258,25 +296,6 @@ export const ListMixin = (superClass) =>
       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
@@ -310,14 +329,6 @@ export const ListMixin = (superClass) =>
       this._scroll(scrollDistance);
     }
-    /**
-     * @return {boolean}
-     * @protected
-     */
-    get _vertical() {
-      return this.orientation !== 'horizontal';
-    }
     /**
      * @param {number} pixels
      * @protected

package/src/polylit-mixin.d.ts CHANGED Viewed

@@ -14,10 +14,10 @@ export declare class PolylitMixinClass {
   /**
    * Reads a value from a path.
    */
-  protected _get(root: Object, path: String): any;
+  protected _get(root: object, path: string): any;
   /**
    * Sets a value to a path.
    */
-  protected _set(root: Object, path: String, value: any): void;
+  protected _set(root: object, path: string, value: any): void;
 }

package/src/resize-mixin.js CHANGED Viewed

@@ -28,6 +28,16 @@ const observer = new ResizeObserver((entries) => {
 export const ResizeMixin = dedupingMixin(
   (superclass) =>
     class ResizeMixinClass extends superclass {
+      /**
+       * When true, the parent element resize will be also observed.
+       * Override this getter and return `true` to enable this.
+       *
+       * @protected
+       */
+      get _observeParent() {
+        return false;
+      }
       /** @protected */
       connectedCallback() {
         super.connectedCallback();
@@ -67,16 +77,6 @@ export const ResizeMixin = dedupingMixin(
         }
       }
-      /**
-       * When true, the parent element resize will be also observed.
-       * Override this getter and return `true` to enable this.
-       *
-       * @protected
-       */
-      get _observeParent() {
-        return false;
-      }
       /**
        * A handler invoked on host resize. By default, it does nothing.
        * Override the method to implement your own behavior.

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

@@ -3,6 +3,8 @@
  * 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';

package/src/virtualizer.js CHANGED Viewed

@@ -15,6 +15,24 @@ export class Virtualizer {
     this.__adapter = new IronListAdapter(config);
   }
+  /**
+   * Gets the index of the first visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get firstVisibleIndex() {
+    return this.__adapter.adjustedFirstVisibleIndex;
+  }
+  /**
+   * Gets the index of the last visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get lastVisibleIndex() {
+    return this.__adapter.adjustedLastVisibleIndex;
+  }
   /**
    * The size of the virtualizer
    * @return {number | undefined} The size of the virtualizer
@@ -62,22 +80,4 @@ export class Virtualizer {
   flush() {
     this.__adapter.flush();
   }
-  /**
-   * Gets the index of the first visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get firstVisibleIndex() {
-    return this.__adapter.adjustedFirstVisibleIndex;
-  }
-  /**
-   * Gets the index of the last visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get lastVisibleIndex() {
-    return this.__adapter.adjustedLastVisibleIndex;
-  }
 }