@idds/js 1.2.2 → 1.2.3

package/dist/index.iife.js

@@ -297,6 +297,7 @@ var InaUI = (() => {
         this.index = this.group.registerItem(this);
       }
       this.toggle.addEventListener("click", (e) => this.handleClick(e));
+      this.toggle.addEventListener("keydown", (e) => this.handleKeyDown(e));
       if (this.group) {
         const isOpen = this.group.isItemOpen(this.index);
         this.setOpenState(isOpen);
@@ -325,6 +326,22 @@ var InaUI = (() => {
         this.setOpenState(nextState);
       }
     }
+    handleKeyDown(e) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const currentAccordion = this.element;
+        const container = currentAccordion.closest(".ina-accordion-group") || currentAccordion.parentElement;
+        if (!container) return;
+        const toggles = Array.from(
+          container.querySelectorAll(".ina-accordion__toggle:not([disabled])")
+        );
+        const currentIndex = toggles.indexOf(this.toggle);
+        if (currentIndex > -1) {
+          const nextIndex = e.key === "ArrowDown" ? (currentIndex + 1) % toggles.length : (currentIndex - 1 + toggles.length) % toggles.length;
+          toggles[nextIndex]?.focus();
+        }
+      }
+    }
     setOpenState(isOpen) {
       if (isOpen) {
         this.element.classList.add(`${PREFIX}-accordion--open`);
@@ -3114,6 +3131,10 @@ var InaUI = (() => {
           if (!normSelected.includes(finalValue)) {
             normSelected.push(finalValue);
           }
+        } else {
+          if (toggleVal) {
+            normSelected = normSelected.filter((v) => v !== toggleVal);
+          }
         }
         if (isMultiple) {
           selectedValue = normSelected.join(",");
@@ -3134,38 +3155,12 @@ var InaUI = (() => {
           const val = item.getAttribute("data-value");
           if (showCustomization && isToggleBtn(item)) {
             const normSelected = getNormalizedSelected();
-            let newSelected = [...normSelected];
             const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
             const customValues = normSelected.filter(
               (v) => !standardValues.includes(v) && v !== "" && v !== val
             );
-            const primaryCustomValue = customValues[customValues.length - 1];
             const isInputVisible = normSelected.includes(val) || customValues.length > 0;
-            if (isInputVisible) {
-              newSelected = newSelected.filter((v) => v !== val);
-              if (primaryCustomValue) {
-                if (isMultiple) {
-                  newSelected = newSelected.filter(
-                    (v) => v !== primaryCustomValue
-                  );
-                } else {
-                  newSelected = [];
-                }
-              }
-              if (isMultiple) {
-                selectedValue = newSelected.join(",");
-              } else {
-                selectedValue = newSelected.length ? newSelected[0] : "";
-              }
-              updateUI();
-              const changeEvent = new CustomEvent(`${PREFIX4}-chip:change`, {
-                detail: {
-                  value: isMultiple ? getNormalizedSelected() : selectedValue
-                },
-                bubbles: true
-              });
-              container.dispatchEvent(changeEvent);
-            } else {
+            if (!isInputVisible) {
               handleSelect(val);
             }
           } else {
@@ -3385,6 +3380,28 @@ var InaUI = (() => {
         lastBtn.addEventListener("click", () => {
           if (!isDisabled && currentPage < totalPages) goToPage(totalPages);
         });
+      if (navButtonsContainer && !navButtonsContainer.__inaKeyboardSet) {
+        navButtonsContainer.addEventListener("keydown", (e) => {
+          if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+            const focusable = Array.from(
+              navButtonsContainer.querySelectorAll("button:not([disabled])")
+            );
+            if (!focusable.length) return;
+            const currentIndex = focusable.indexOf(document.activeElement);
+            if (currentIndex >= 0) {
+              e.preventDefault();
+              const nextIndex = e.key === "ArrowRight" ? (currentIndex + 1) % focusable.length : (currentIndex - 1 + focusable.length) % focusable.length;
+              focusable[nextIndex]?.focus();
+            }
+          } else if (e.key === "Enter" || e.key === " ") {
+            if (document.activeElement && document.activeElement.tagName === "BUTTON") {
+              e.preventDefault();
+              document.activeElement.click();
+            }
+          }
+        });
+        navButtonsContainer.__inaKeyboardSet = true;
+      }
       if (pageSizeSelect) {
         pageSizeSelect.addEventListener("change", (e) => {
           if (isDisabled) return;
@@ -4589,13 +4606,39 @@ var InaUI = (() => {
           })
         );
       };
-      buttons.forEach((button) => {
+      buttons.forEach((button, index2) => {
         button.addEventListener("click", (e) => {
           if (button.type !== "submit") {
             e.preventDefault();
           }
           updateState(button);
         });
+        button.addEventListener("keydown", (e) => {
+          const isDisabled = button.hasAttribute("disabled") || button.classList.contains(`${PREFIX}-button-group__button--disabled`);
+          if (isDisabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            updateState(button);
+          } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            e.preventDefault();
+            let nextIndex = (index2 + 1) % buttons.length;
+            while ((buttons[nextIndex].hasAttribute("disabled") || buttons[nextIndex].classList.contains(
+              `${PREFIX}-button-group__button--disabled`
+            )) && nextIndex !== index2) {
+              nextIndex = (nextIndex + 1) % buttons.length;
+            }
+            buttons[nextIndex]?.focus();
+          } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            let prevIndex = (index2 - 1 + buttons.length) % buttons.length;
+            while ((buttons[prevIndex].hasAttribute("disabled") || buttons[prevIndex].classList.contains(
+              `${PREFIX}-button-group__button--disabled`
+            )) && prevIndex !== index2) {
+              prevIndex = (prevIndex - 1 + buttons.length) % buttons.length;
+            }
+            buttons[prevIndex]?.focus();
+          }
+        });
       });
       buttonGroup.__inaButtonGroupInitialized = true;
     });

package/dist/index.js

@@ -29,13 +29,39 @@ function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
         })
       );
     };
-    buttons.forEach((button) => {
+    buttons.forEach((button, index2) => {
       button.addEventListener("click", (e) => {
         if (button.type !== "submit") {
           e.preventDefault();
         }
         updateState(button);
       });
+      button.addEventListener("keydown", (e) => {
+        const isDisabled = button.hasAttribute("disabled") || button.classList.contains(`${PREFIX}-button-group__button--disabled`);
+        if (isDisabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          updateState(button);
+        } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+          e.preventDefault();
+          let nextIndex = (index2 + 1) % buttons.length;
+          while ((buttons[nextIndex].hasAttribute("disabled") || buttons[nextIndex].classList.contains(
+            `${PREFIX}-button-group__button--disabled`
+          )) && nextIndex !== index2) {
+            nextIndex = (nextIndex + 1) % buttons.length;
+          }
+          buttons[nextIndex]?.focus();
+        } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+          e.preventDefault();
+          let prevIndex = (index2 - 1 + buttons.length) % buttons.length;
+          while ((buttons[prevIndex].hasAttribute("disabled") || buttons[prevIndex].classList.contains(
+            `${PREFIX}-button-group__button--disabled`
+          )) && prevIndex !== index2) {
+            prevIndex = (prevIndex - 1 + buttons.length) % buttons.length;
+          }
+          buttons[prevIndex]?.focus();
+        }
+      });
     });
     buttonGroup.__inaButtonGroupInitialized = true;
   });
@@ -285,6 +311,7 @@ var Accordion = class {
       this.index = this.group.registerItem(this);
     }
     this.toggle.addEventListener("click", (e) => this.handleClick(e));
+    this.toggle.addEventListener("keydown", (e) => this.handleKeyDown(e));
     if (this.group) {
       const isOpen = this.group.isItemOpen(this.index);
       this.setOpenState(isOpen);
@@ -313,6 +340,22 @@ var Accordion = class {
       this.setOpenState(nextState);
     }
   }
+  handleKeyDown(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const currentAccordion = this.element;
+      const container = currentAccordion.closest(".ina-accordion-group") || currentAccordion.parentElement;
+      if (!container) return;
+      const toggles = Array.from(
+        container.querySelectorAll(".ina-accordion__toggle:not([disabled])")
+      );
+      const currentIndex = toggles.indexOf(this.toggle);
+      if (currentIndex > -1) {
+        const nextIndex = e.key === "ArrowDown" ? (currentIndex + 1) % toggles.length : (currentIndex - 1 + toggles.length) % toggles.length;
+        toggles[nextIndex]?.focus();
+      }
+    }
+  }
   setOpenState(isOpen) {
     if (isOpen) {
       this.element.classList.add(`${PREFIX}-accordion--open`);
@@ -3194,6 +3237,10 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         if (!normSelected.includes(finalValue)) {
           normSelected.push(finalValue);
         }
+      } else {
+        if (toggleVal) {
+          normSelected = normSelected.filter((v) => v !== toggleVal);
+        }
       }
       if (isMultiple) {
         selectedValue = normSelected.join(",");
@@ -3214,38 +3261,12 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         const val = item.getAttribute("data-value");
         if (showCustomization && isToggleBtn(item)) {
           const normSelected = getNormalizedSelected();
-          let newSelected = [...normSelected];
           const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
           const customValues = normSelected.filter(
             (v) => !standardValues.includes(v) && v !== "" && v !== val
           );
-          const primaryCustomValue = customValues[customValues.length - 1];
           const isInputVisible = normSelected.includes(val) || customValues.length > 0;
-          if (isInputVisible) {
-            newSelected = newSelected.filter((v) => v !== val);
-            if (primaryCustomValue) {
-              if (isMultiple) {
-                newSelected = newSelected.filter(
-                  (v) => v !== primaryCustomValue
-                );
-              } else {
-                newSelected = [];
-              }
-            }
-            if (isMultiple) {
-              selectedValue = newSelected.join(",");
-            } else {
-              selectedValue = newSelected.length ? newSelected[0] : "";
-            }
-            updateUI();
-            const changeEvent = new CustomEvent(`${PREFIX5}-chip:change`, {
-              detail: {
-                value: isMultiple ? getNormalizedSelected() : selectedValue
-              },
-              bubbles: true
-            });
-            container.dispatchEvent(changeEvent);
-          } else {
+          if (!isInputVisible) {
             handleSelect(val);
           }
         } else {
@@ -3465,6 +3486,28 @@ function initPagination() {
       lastBtn.addEventListener("click", () => {
         if (!isDisabled && currentPage < totalPages) goToPage(totalPages);
       });
+    if (navButtonsContainer && !navButtonsContainer.__inaKeyboardSet) {
+      navButtonsContainer.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+          const focusable = Array.from(
+            navButtonsContainer.querySelectorAll("button:not([disabled])")
+          );
+          if (!focusable.length) return;
+          const currentIndex = focusable.indexOf(document.activeElement);
+          if (currentIndex >= 0) {
+            e.preventDefault();
+            const nextIndex = e.key === "ArrowRight" ? (currentIndex + 1) % focusable.length : (currentIndex - 1 + focusable.length) % focusable.length;
+            focusable[nextIndex]?.focus();
+          }
+        } else if (e.key === "Enter" || e.key === " ") {
+          if (document.activeElement && document.activeElement.tagName === "BUTTON") {
+            e.preventDefault();
+            document.activeElement.click();
+          }
+        }
+      });
+      navButtonsContainer.__inaKeyboardSet = true;
+    }
     if (pageSizeSelect) {
       pageSizeSelect.addEventListener("change", (e) => {
         if (isDisabled) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "publishConfig": {
     "access": "public"
   },