@dreamworld/dw-chip-select - npm Package Compare versions

Comparing version 1.0.0-support-keyboard-navigation.1 to 1.0.0-support-keyboard-navigation.2

dw-chip-select.js

@@ -239,31 +239,43 @@ import { css, html, LitElement, nothing } from "lit";
   _onKeyDown(e) {
+    if (!this.focused) {
+      return;
+    }
     const { keyCode } = e;
-    if (this.focused) {
-      if (
-        KeyCode.ARROW_DOWN === keyCode ||
-        KeyCode.ARROW_LEFT === keyCode ||
-        KeyCode.ARROW_RIGHT === keyCode ||
-        KeyCode.ARROW_UP === keyCode
-      ) {
+    switch (keyCode) {
+      case KeyCode.ARROW_DOWN:
+      case KeyCode.ARROW_LEFT:
+      case KeyCode.ARROW_RIGHT:
+      case KeyCode.ARROW_UP:
+      case KeyCode.ENTER:
         e.stopPropagation();
         e.preventDefault();
-      }
-      if (KeyCode.ARROW_DOWN === keyCode || KeyCode.ARROW_LEFT === keyCode) {
-        if (this.items && this.items.length > 0) {
-          if (this.items.length - 1 === this._activatedIndex) {
-            this._activatedIndex = 0;
-          } else {
-            this._activatedIndex++;
-          }
+        break;
+      default:
+        break;
+    }
+
+    const itemsLength = this.items ? this.items.length : 0;
+
+    switch (keyCode) {
+      case KeyCode.ARROW_DOWN:
+      case KeyCode.ARROW_RIGHT:
+        if (itemsLength > 0) {
+          this._activatedIndex = (this._activatedIndex + 1) % itemsLength;
         }
-      }
-      if (KeyCode.ARROW_RIGHT === keyCode || KeyCode.ARROW_UP === keyCode) {
-        if (this.items && this.items.length > 0) {
-          if (this._activatedIndex === 0) {
-            this._activatedIndex = this.items.length - 1;
-          } else {
-            this._activatedIndex--;
-          }
+        break;
+      case KeyCode.ARROW_UP:
+      case KeyCode.ARROW_LEFT:
+        if (itemsLength > 0) {
+          this._activatedIndex = (this._activatedIndex - 1 + itemsLength) % itemsLength;
         }
-      }
+        break;
+      case KeyCode.ENTER:
+        if (this._activatedIndex > -1) {
+          const activatedItem = this.items[this._activatedIndex];
+          const isSelected = this.#_isSelected(activatedItem);
+          this._onChipToggle(activatedItem, isSelected);
+        }
+        break;
+      default:
+        break;
     }
@@ -270,0 +282,0 @@ }

package.json

 {
   "name": "@dreamworld/dw-chip-select",
-  "version": "1.0.0-support-keyboard-navigation.1",
+  "version": "1.0.0-support-keyboard-navigation.2",
   "description": "Chips are compact elements that represent an input, attribute, or action.",
@@ -5,0 +5,0 @@ "main": "dw-chip-select.js",

No alert changes

Improved metrics

Total package byte prevSize

18672

increased by1.15%

Lines of code

483

increased by2.11%

No dependency changes