@vaadin/vaadin-list-mixin - npm Package Compare versions

Comparing version 23.2.0 to 23.3.0-alpha1

package.json

 {
   "name": "@vaadin/vaadin-list-mixin",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
@@ -36,3 +36,3 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.2.0"
+    "@vaadin/component-base": "23.3.0-alpha1"
   },
@@ -44,3 +44,3 @@ "devDependencies": {
   },
-  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

vaadin-list-mixin.d.ts

@@ -7,2 +7,4 @@ /**
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { KeyboardDirectionMixinClass } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
 
@@ -12,3 +14,5 @@ /**
  */
-export declare function ListMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ListMixinClass> & T;
+export declare function ListMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<KeyboardDirectionMixinClass> & Constructor<KeyboardMixinClass> & Constructor<ListMixinClass> & T;
 
@@ -47,5 +51,3 @@ export declare class ListMixinClass {
 
-  protected readonly focused: Element | null;
-
   protected readonly _scrollerElement: HTMLElement;
 }

vaadin-list-mixin.js

@@ -10,3 +10,3 @@ /**
 import { DirHelper } from '@vaadin/component-base/src/dir-helper.js';
-import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
+import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 
@@ -17,5 +17,6 @@ /**
  * @polymerMixin
+ * @mixes KeyboardDirectionMixin
  */
 export const ListMixin = (superClass) =>
-  class VaadinListMixin extends superClass {
+  class ListMixinClass extends KeyboardDirectionMixin(superClass) {
     static get properties() {
@@ -89,3 +90,3 @@ return {
       super.ready();
-      this.addEventListener('keydown', (e) => this._onKeydown(e));
+
       this.addEventListener('click', (e) => this._onClick(e));
@@ -98,2 +99,14 @@
 
+    /**
+     * Override method inherited from `KeyboardDirectionMixin`
+     * to use the stored list of item elements.
+     *
+     * @return {Element[]}
+     * @protected
+     * @override
+     */
+    _getItems() {
+      return this.items;
+    }
+
     /** @private */
@@ -126,9 +139,2 @@ _enhanceItems(items, orientation, selected, disabled) {
     /**
-     * @return {Element}
-     */
-    get focused() {
-      return (this.items || []).find(isElementFocused);
-    }
-
-    /**
      * @param {!Array<!Element>} array
@@ -169,19 +175,4 @@ * @return {!Array<!Element>}
       this._searchBuf += key.toLowerCase();
-      const increment = 1;
-      const condition = (item) =>
-        !(item.disabled || this._isItemHidden(item)) &&
-        item.textContent
-          .replace(/[^\p{L}\p{Nd}]/gu, '')
-          .toLowerCase()
-          .indexOf(this._searchBuf) === 0;
 
-      if (
-        !this.items.some(
-          (item) =>
-            item.textContent
-              .replace(/[^\p{L}\p{Nd}]/gu, '')
-              .toLowerCase()
-              .indexOf(this._searchBuf) === 0,
-        )
-      ) {
+      if (!this.items.some((item) => this.__isMatchingKey(item))) {
         this._searchBuf = key.toLowerCase();
@@ -191,5 +182,18 @@ }
       const idx = this._searchBuf.length === 1 ? currentIdx + 1 : currentIdx;
-      return this._getAvailableIndex(idx, increment, condition);
+      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);
+    }
+
     /**
@@ -204,6 +208,10 @@ * @return {boolean}
     /**
+     * Override an event listener from `KeyboardMixin`
+     * to search items by key.
+     *
      * @param {!KeyboardEvent} event
      * @protected
+     * @override
      */
-    _onKeydown(event) {
+    _onKeyDown(event) {
       if (event.metaKey || event.ctrlKey) {
@@ -216,3 +224,2 @@ return;
       const currentIdx = this.items.indexOf(this.focused);
-
       if (/[a-zA-Z0-9]/.test(key) && key.length === 1) {
@@ -226,54 +233,6 @@ const idx = this._searchKey(currentIdx, key);
 
-      const condition = (item) => !(item.disabled || this._isItemHidden(item));
-      let idx, increment;
-
-      const dirIncrement = this._isRTL ? -1 : 1;
-
-      if ((this._vertical && key === 'ArrowUp') || (!this._vertical && key === 'ArrowLeft')) {
-        increment = -dirIncrement;
-        idx = currentIdx - dirIncrement;
-      } else if ((this._vertical && key === 'ArrowDown') || (!this._vertical && key === 'ArrowRight')) {
-        increment = dirIncrement;
-        idx = currentIdx + dirIncrement;
-      } else if (key === 'Home') {
-        increment = 1;
-        idx = 0;
-      } else if (key === 'End') {
-        increment = -1;
-        idx = this.items.length - 1;
-      }
-
-      idx = this._getAvailableIndex(idx, increment, condition);
-      if (idx >= 0) {
-        this._focus(idx);
-        event.preventDefault();
-      }
+      super._onKeyDown(event);
     }
 
     /**
-     * @param {number} idx
-     * @param {number} increment
-     * @param {function(!Element):boolean} condition
-     * @return {number}
-     * @protected
-     */
-    _getAvailableIndex(idx, increment, condition) {
-      const totalItems = this.items.length;
-      for (let i = 0; typeof idx === 'number' && i < totalItems; i++, idx += increment || 1) {
-        if (idx < 0) {
-          idx = totalItems - 1;
-        } else if (idx >= totalItems) {
-          idx = 0;
-        }
-
-        const item = this.items[idx];
-
-        if (condition(item)) {
-          return idx;
-        }
-      }
-      return -1;
-    }
-
-    /**
      * @param {!Element} item
@@ -292,3 +251,3 @@ * @return {boolean}
     _setFocusable(idx) {
-      idx = this._getAvailableIndex(idx, 1, (item) => !item.disabled);
+      idx = this._getAvailableIndex(this.items, idx, 1);
       const item = this.items[idx];
@@ -305,24 +264,10 @@ this.items.forEach((e) => {
     _focus(idx) {
-      const item = this.items[idx];
-      this.items.forEach((e) => {
-        e.focused = e === item;
+      this.items.forEach((e, index) => {
+        e.focused = index === idx;
       });
       this._setFocusable(idx);
       this._scrollToItem(idx);
-      this._focusItem(item);
+      super._focus(idx);
     }
 
-    /**
-     * Always set focus-ring on the item managed by the list-box
-     * for backwards compatibility with the old implementation.
-     * @param {HTMLElement} item
-     * @protected
-     */
-    _focusItem(item) {
-      if (item) {
-        item.focus();
-        item.setAttribute('focus-ring', '');
-      }
-    }
-
     focus() {
@@ -329,0 +274,0 @@ // In initialization (e.g vaadin-select) observer might not been run yet.

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

28229

decreased by-4.79%

Lines of code

481

decreased by-8.73%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/component-base@23.3.0-alpha1(transitive)

• - Removed@vaadin/component-base@23.5.12(transitive)

• Updated@vaadin/component-base@23.3.0-alpha1