@idds/js 1.2.1 → 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`);
@@ -3006,15 +3023,14 @@ var InaUI = (() => {
           );
         });
         if (showCustomization) {
-          const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+          const isToggleBtn2 = (i) => i.hasAttribute("data-customization-toggle") || i.textContent.trim() === customizationLabel;
+          const standardValues = Array.from(items).filter((item) => !isToggleBtn2(item)).map((item) => item.getAttribute("data-value"));
           const customValues = normSelected.filter(
             (val) => !standardValues.includes(val) && val !== ""
           );
           const isStandard = customValues.length === 0;
           const primaryCustomValue = customValues[customValues.length - 1] || "";
-          const toggleBtn = Array.from(items).find(
-            (i) => i.textContent.trim() === customizationLabel
-          );
+          const toggleBtn = Array.from(items).find(isToggleBtn2);
           const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
           if (showInput) {
             if (!customFieldContainer) {
@@ -3035,16 +3051,11 @@ var InaUI = (() => {
              `;
               input = customFieldContainer.querySelector("input");
               input.addEventListener("blur", (e) => {
-                const val = e.target.value;
-                if (val.trim()) {
-                  handleSelect(val.trim());
-                }
+                commitCustomValue(e.target);
               });
               input.addEventListener("keydown", (e) => {
                 if (e.key === "Enter") {
-                  if (e.target.value.trim()) {
-                    handleSelect(e.target.value.trim());
-                  }
+                  commitCustomValue(e.target);
                   e.target.blur();
                 }
               });
@@ -3103,14 +3114,55 @@ var InaUI = (() => {
           currentFocusedIndex = index2;
         }
       };
+      const commitCustomValue = (inputEl) => {
+        const finalValue = inputEl.value.trim();
+        let normSelected = getNormalizedSelected();
+        const toggleBtn = Array.from(items).find(isToggleBtn);
+        const toggleVal = toggleBtn ? toggleBtn.getAttribute("data-value") : null;
+        const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
+        const customValues = normSelected.filter(
+          (val) => !standardValues.includes(val) && val !== "" && val !== toggleVal
+        );
+        const primaryCustomValue = customValues[customValues.length - 1];
+        if (primaryCustomValue) {
+          normSelected = normSelected.filter((v) => v !== primaryCustomValue);
+        }
+        if (finalValue !== "") {
+          if (!normSelected.includes(finalValue)) {
+            normSelected.push(finalValue);
+          }
+        } else {
+          if (toggleVal) {
+            normSelected = normSelected.filter((v) => v !== toggleVal);
+          }
+        }
+        if (isMultiple) {
+          selectedValue = normSelected.join(",");
+        } else {
+          selectedValue = finalValue;
+        }
+        updateUI();
+        const changeEvent = new CustomEvent(`${PREFIX4}-chip:change`, {
+          detail: { value: isMultiple ? getNormalizedSelected() : selectedValue },
+          bubbles: true
+        });
+        container.dispatchEvent(changeEvent);
+      };
       items.forEach((item, index2) => {
         item.addEventListener("click", (e) => {
           if (item.hasAttribute("disabled")) return;
           currentFocusedIndex = index2;
           const val = item.getAttribute("data-value");
-          const label = item.textContent.trim();
-          if (showCustomization && label === customizationLabel) {
-            handleSelect(val);
+          if (showCustomization && isToggleBtn(item)) {
+            const normSelected = getNormalizedSelected();
+            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 isInputVisible = normSelected.includes(val) || customValues.length > 0;
+            if (!isInputVisible) {
+              handleSelect(val);
+            }
           } else {
             handleSelect(val);
           }
@@ -3134,22 +3186,7 @@ var InaUI = (() => {
           }
           if (e.key === " " || e.key === "Enter") {
             e.preventDefault();
-            const val = item.getAttribute("data-value");
-            const label = item.textContent.trim();
-            if (showCustomization && label === customizationLabel) {
-              handleSelect(val);
-              setTimeout(() => {
-                const customFieldContainer2 = container.querySelector(
-                  `.${PREFIX4}-chip__custom-field`
-                );
-                if (customFieldContainer2) {
-                  const inputEl = customFieldContainer2.querySelector("input");
-                  if (inputEl) inputEl.focus();
-                }
-              }, 50);
-            } else {
-              handleSelect(val);
-            }
+            item.click();
           }
         });
       });
@@ -3343,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;
@@ -4547,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`);
@@ -3086,15 +3129,14 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         );
       });
       if (showCustomization) {
-        const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+        const isToggleBtn2 = (i) => i.hasAttribute("data-customization-toggle") || i.textContent.trim() === customizationLabel;
+        const standardValues = Array.from(items).filter((item) => !isToggleBtn2(item)).map((item) => item.getAttribute("data-value"));
         const customValues = normSelected.filter(
           (val) => !standardValues.includes(val) && val !== ""
         );
         const isStandard = customValues.length === 0;
         const primaryCustomValue = customValues[customValues.length - 1] || "";
-        const toggleBtn = Array.from(items).find(
-          (i) => i.textContent.trim() === customizationLabel
-        );
+        const toggleBtn = Array.from(items).find(isToggleBtn2);
         const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
         if (showInput) {
           if (!customFieldContainer) {
@@ -3115,16 +3157,11 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
              `;
             input = customFieldContainer.querySelector("input");
             input.addEventListener("blur", (e) => {
-              const val = e.target.value;
-              if (val.trim()) {
-                handleSelect(val.trim());
-              }
+              commitCustomValue(e.target);
             });
             input.addEventListener("keydown", (e) => {
               if (e.key === "Enter") {
-                if (e.target.value.trim()) {
-                  handleSelect(e.target.value.trim());
-                }
+                commitCustomValue(e.target);
                 e.target.blur();
               }
             });
@@ -3183,14 +3220,55 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         currentFocusedIndex = index2;
       }
     };
+    const commitCustomValue = (inputEl) => {
+      const finalValue = inputEl.value.trim();
+      let normSelected = getNormalizedSelected();
+      const toggleBtn = Array.from(items).find(isToggleBtn);
+      const toggleVal = toggleBtn ? toggleBtn.getAttribute("data-value") : null;
+      const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
+      const customValues = normSelected.filter(
+        (val) => !standardValues.includes(val) && val !== "" && val !== toggleVal
+      );
+      const primaryCustomValue = customValues[customValues.length - 1];
+      if (primaryCustomValue) {
+        normSelected = normSelected.filter((v) => v !== primaryCustomValue);
+      }
+      if (finalValue !== "") {
+        if (!normSelected.includes(finalValue)) {
+          normSelected.push(finalValue);
+        }
+      } else {
+        if (toggleVal) {
+          normSelected = normSelected.filter((v) => v !== toggleVal);
+        }
+      }
+      if (isMultiple) {
+        selectedValue = normSelected.join(",");
+      } else {
+        selectedValue = finalValue;
+      }
+      updateUI();
+      const changeEvent = new CustomEvent(`${PREFIX5}-chip:change`, {
+        detail: { value: isMultiple ? getNormalizedSelected() : selectedValue },
+        bubbles: true
+      });
+      container.dispatchEvent(changeEvent);
+    };
     items.forEach((item, index2) => {
       item.addEventListener("click", (e) => {
         if (item.hasAttribute("disabled")) return;
         currentFocusedIndex = index2;
         const val = item.getAttribute("data-value");
-        const label = item.textContent.trim();
-        if (showCustomization && label === customizationLabel) {
-          handleSelect(val);
+        if (showCustomization && isToggleBtn(item)) {
+          const normSelected = getNormalizedSelected();
+          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 isInputVisible = normSelected.includes(val) || customValues.length > 0;
+          if (!isInputVisible) {
+            handleSelect(val);
+          }
         } else {
           handleSelect(val);
         }
@@ -3214,22 +3292,7 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
         }
         if (e.key === " " || e.key === "Enter") {
           e.preventDefault();
-          const val = item.getAttribute("data-value");
-          const label = item.textContent.trim();
-          if (showCustomization && label === customizationLabel) {
-            handleSelect(val);
-            setTimeout(() => {
-              const customFieldContainer2 = container.querySelector(
-                `.${PREFIX5}-chip__custom-field`
-              );
-              if (customFieldContainer2) {
-                const inputEl = customFieldContainer2.querySelector("input");
-                if (inputEl) inputEl.focus();
-              }
-            }, 50);
-          } else {
-            handleSelect(val);
-          }
+          item.click();
         }
       });
     });
@@ -3423,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.1",
+  "version": "1.2.3",
   "publishConfig": {
     "access": "public"
   },