@idds/js 1.0.99 → 1.2.1

package/dist/index.iife.js

@@ -2956,34 +2956,66 @@ var InaUI = (() => {
       if (container.__inaChipInitialized) return;
       const showCustomization = container.getAttribute("data-show-customization") === "true";
       const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
+      const isMultiple = container.getAttribute("data-multiple") === "true";
       let selectedValue = container.getAttribute("data-selected") || "";
       const list = container.querySelector(`.${PREFIX4}-chip__list`);
       const items = list ? list.querySelectorAll(`.${PREFIX4}-chip__item`) : [];
       let customFieldContainer = container.querySelector(
         `.${PREFIX4}-chip__custom-field`
       );
+      const getNormalizedSelected = () => {
+        if (!selectedValue) return [];
+        return isMultiple ? selectedValue.split(",").map((s) => s.trim()).filter(Boolean) : [selectedValue];
+      };
       const updateUI = () => {
-        items.forEach((item) => {
+        const normSelected = getNormalizedSelected();
+        const getInitialFocusIndex = () => {
+          if (normSelected.length > 0) {
+            const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+            const hasCustomVal = normSelected.some(
+              (val) => !standardValues.includes(val) && val !== ""
+            );
+            if (hasCustomVal && showCustomization) {
+              return items.length - 1;
+            }
+            const firstSelectedIndex = Array.from(items).findIndex(
+              (opt) => normSelected.includes(opt.getAttribute("data-value"))
+            );
+            if (firstSelectedIndex !== -1) return firstSelectedIndex;
+          }
+          return 0;
+        };
+        const focusedIndex = getInitialFocusIndex();
+        items.forEach((item, index2) => {
           const itemValue = item.getAttribute("data-value");
-          const isSelected = itemValue === selectedValue;
+          const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
+            (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
+          );
+          const isDisabled = item.hasAttribute("disabled");
           if (isSelected) {
             item.classList.add(`${PREFIX4}-chip__item--selected`);
           } else {
             item.classList.remove(`${PREFIX4}-chip__item--selected`);
           }
+          if (isDisabled) {
+            item.classList.add(`${PREFIX4}-chip__item--disabled`);
+          }
+          item.setAttribute(
+            "tabindex",
+            index2 === focusedIndex && !isDisabled ? "0" : "-1"
+          );
         });
         if (showCustomization) {
-          const isCustomToggleSelected = selectedValue === customizationLabel;
-          let isStandard = false;
-          items.forEach((item) => {
-            if (item.getAttribute("data-value") === selectedValue && item.textContent.trim() !== customizationLabel) {
-              isStandard = true;
-            }
-          });
+          const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).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 showInput = toggleBtn && selectedValue === toggleBtn.getAttribute("data-value") || !isStandard && selectedValue !== "";
+          const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
           if (showInput) {
             if (!customFieldContainer) {
               customFieldContainer = document.createElement("div");
@@ -2997,7 +3029,7 @@ var InaUI = (() => {
               customFieldContainer.innerHTML = `
                <div class="${PREFIX4}-text-field ${PREFIX4}-text-field--size-medium ${PREFIX4}-text-field--variant-outline ${PREFIX4}-chip__input">
                  <div class="${PREFIX4}-text-field__wrapper">
-                   <input type="text" class="${PREFIX4}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
+                   <input type="text" class="${PREFIX4}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
                  </div>
                </div>
              `;
@@ -3005,21 +3037,21 @@ var InaUI = (() => {
               input.addEventListener("blur", (e) => {
                 const val = e.target.value;
                 if (val.trim()) {
-                  handleSelect(val);
-                } else {
-                  handleSelect("");
+                  handleSelect(val.trim());
                 }
               });
               input.addEventListener("keydown", (e) => {
                 if (e.key === "Enter") {
-                  handleSelect(e.target.value);
+                  if (e.target.value.trim()) {
+                    handleSelect(e.target.value.trim());
+                  }
                   e.target.blur();
                 }
               });
             } else {
               const inputEl = customFieldContainer.querySelector("input");
               if (inputEl && document.activeElement !== inputEl) {
-                inputEl.value = !isStandard ? selectedValue : "";
+                inputEl.value = !isStandard ? primaryCustomValue : "";
               }
             }
             customFieldContainer.style.display = "block";
@@ -3031,18 +3063,50 @@ var InaUI = (() => {
         }
       };
       const handleSelect = (val) => {
-        selectedValue = val;
-        container.setAttribute("data-selected", val);
+        if (!val) return;
+        let finalVal = val;
+        if (isMultiple) {
+          const normSelected = getNormalizedSelected();
+          let newSelected;
+          if (normSelected.includes(val)) {
+            newSelected = normSelected.filter((v) => v !== val);
+          } else {
+            newSelected = [...normSelected, val];
+          }
+          finalVal = newSelected;
+          selectedValue = newSelected.join(",");
+        } else {
+          const normSelected = getNormalizedSelected();
+          if (normSelected.includes(val)) {
+            selectedValue = "";
+            finalVal = "";
+          } else {
+            selectedValue = val;
+          }
+        }
+        container.setAttribute("data-selected", selectedValue);
         updateUI();
         container.dispatchEvent(
           new CustomEvent("chip:select", {
-            detail: { value: val },
+            detail: { value: finalVal },
             bubbles: true
           })
         );
       };
-      items.forEach((item) => {
+      let currentFocusedIndex = -1;
+      const setItemFocus = (index2) => {
+        items.forEach((item, i) => {
+          item.setAttribute("tabindex", i === index2 ? "0" : "-1");
+        });
+        if (items[index2]) {
+          items[index2].focus();
+          currentFocusedIndex = index2;
+        }
+      };
+      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) {
@@ -3051,6 +3115,43 @@ var InaUI = (() => {
             handleSelect(val);
           }
         });
+        item.addEventListener("keydown", (e) => {
+          if (item.hasAttribute("disabled")) return;
+          if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            e.preventDefault();
+            let nextIndex = (index2 + 1) % items.length;
+            while (items[nextIndex].hasAttribute("disabled") && nextIndex !== index2) {
+              nextIndex = (nextIndex + 1) % items.length;
+            }
+            setItemFocus(nextIndex);
+          } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            let prevIndex = (index2 - 1 + items.length) % items.length;
+            while (items[prevIndex].hasAttribute("disabled") && prevIndex !== index2) {
+              prevIndex = (prevIndex - 1 + items.length) % items.length;
+            }
+            setItemFocus(prevIndex);
+          }
+          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);
+            }
+          }
+        });
       });
       updateUI();
       container.__inaChipInitialized = true;

package/dist/index.js

@@ -3036,34 +3036,66 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
     if (container.__inaChipInitialized) return;
     const showCustomization = container.getAttribute("data-show-customization") === "true";
     const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
+    const isMultiple = container.getAttribute("data-multiple") === "true";
     let selectedValue = container.getAttribute("data-selected") || "";
     const list = container.querySelector(`.${PREFIX5}-chip__list`);
     const items = list ? list.querySelectorAll(`.${PREFIX5}-chip__item`) : [];
     let customFieldContainer = container.querySelector(
       `.${PREFIX5}-chip__custom-field`
     );
+    const getNormalizedSelected = () => {
+      if (!selectedValue) return [];
+      return isMultiple ? selectedValue.split(",").map((s) => s.trim()).filter(Boolean) : [selectedValue];
+    };
     const updateUI = () => {
-      items.forEach((item) => {
+      const normSelected = getNormalizedSelected();
+      const getInitialFocusIndex = () => {
+        if (normSelected.length > 0) {
+          const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
+          const hasCustomVal = normSelected.some(
+            (val) => !standardValues.includes(val) && val !== ""
+          );
+          if (hasCustomVal && showCustomization) {
+            return items.length - 1;
+          }
+          const firstSelectedIndex = Array.from(items).findIndex(
+            (opt) => normSelected.includes(opt.getAttribute("data-value"))
+          );
+          if (firstSelectedIndex !== -1) return firstSelectedIndex;
+        }
+        return 0;
+      };
+      const focusedIndex = getInitialFocusIndex();
+      items.forEach((item, index2) => {
         const itemValue = item.getAttribute("data-value");
-        const isSelected = itemValue === selectedValue;
+        const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
+          (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
+        );
+        const isDisabled = item.hasAttribute("disabled");
         if (isSelected) {
           item.classList.add(`${PREFIX5}-chip__item--selected`);
         } else {
           item.classList.remove(`${PREFIX5}-chip__item--selected`);
         }
+        if (isDisabled) {
+          item.classList.add(`${PREFIX5}-chip__item--disabled`);
+        }
+        item.setAttribute(
+          "tabindex",
+          index2 === focusedIndex && !isDisabled ? "0" : "-1"
+        );
       });
       if (showCustomization) {
-        const isCustomToggleSelected = selectedValue === customizationLabel;
-        let isStandard = false;
-        items.forEach((item) => {
-          if (item.getAttribute("data-value") === selectedValue && item.textContent.trim() !== customizationLabel) {
-            isStandard = true;
-          }
-        });
+        const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).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 showInput = toggleBtn && selectedValue === toggleBtn.getAttribute("data-value") || !isStandard && selectedValue !== "";
+        const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
         if (showInput) {
           if (!customFieldContainer) {
             customFieldContainer = document.createElement("div");
@@ -3077,7 +3109,7 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
             customFieldContainer.innerHTML = `
                <div class="${PREFIX5}-text-field ${PREFIX5}-text-field--size-medium ${PREFIX5}-text-field--variant-outline ${PREFIX5}-chip__input">
                  <div class="${PREFIX5}-text-field__wrapper">
-                   <input type="text" class="${PREFIX5}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
+                   <input type="text" class="${PREFIX5}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
                  </div>
                </div>
              `;
@@ -3085,21 +3117,21 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
             input.addEventListener("blur", (e) => {
               const val = e.target.value;
               if (val.trim()) {
-                handleSelect(val);
-              } else {
-                handleSelect("");
+                handleSelect(val.trim());
               }
             });
             input.addEventListener("keydown", (e) => {
               if (e.key === "Enter") {
-                handleSelect(e.target.value);
+                if (e.target.value.trim()) {
+                  handleSelect(e.target.value.trim());
+                }
                 e.target.blur();
               }
             });
           } else {
             const inputEl = customFieldContainer.querySelector("input");
             if (inputEl && document.activeElement !== inputEl) {
-              inputEl.value = !isStandard ? selectedValue : "";
+              inputEl.value = !isStandard ? primaryCustomValue : "";
             }
           }
           customFieldContainer.style.display = "block";
@@ -3111,18 +3143,50 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
       }
     };
     const handleSelect = (val) => {
-      selectedValue = val;
-      container.setAttribute("data-selected", val);
+      if (!val) return;
+      let finalVal = val;
+      if (isMultiple) {
+        const normSelected = getNormalizedSelected();
+        let newSelected;
+        if (normSelected.includes(val)) {
+          newSelected = normSelected.filter((v) => v !== val);
+        } else {
+          newSelected = [...normSelected, val];
+        }
+        finalVal = newSelected;
+        selectedValue = newSelected.join(",");
+      } else {
+        const normSelected = getNormalizedSelected();
+        if (normSelected.includes(val)) {
+          selectedValue = "";
+          finalVal = "";
+        } else {
+          selectedValue = val;
+        }
+      }
+      container.setAttribute("data-selected", selectedValue);
       updateUI();
       container.dispatchEvent(
         new CustomEvent("chip:select", {
-          detail: { value: val },
+          detail: { value: finalVal },
           bubbles: true
         })
       );
     };
-    items.forEach((item) => {
+    let currentFocusedIndex = -1;
+    const setItemFocus = (index2) => {
+      items.forEach((item, i) => {
+        item.setAttribute("tabindex", i === index2 ? "0" : "-1");
+      });
+      if (items[index2]) {
+        items[index2].focus();
+        currentFocusedIndex = index2;
+      }
+    };
+    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) {
@@ -3131,6 +3195,43 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
           handleSelect(val);
         }
       });
+      item.addEventListener("keydown", (e) => {
+        if (item.hasAttribute("disabled")) return;
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+          e.preventDefault();
+          let nextIndex = (index2 + 1) % items.length;
+          while (items[nextIndex].hasAttribute("disabled") && nextIndex !== index2) {
+            nextIndex = (nextIndex + 1) % items.length;
+          }
+          setItemFocus(nextIndex);
+        } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+          e.preventDefault();
+          let prevIndex = (index2 - 1 + items.length) % items.length;
+          while (items[prevIndex].hasAttribute("disabled") && prevIndex !== index2) {
+            prevIndex = (prevIndex - 1 + items.length) % items.length;
+          }
+          setItemFocus(prevIndex);
+        }
+        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);
+          }
+        }
+      });
     });
     updateUI();
     container.__inaChipInitialized = true;

package/package.json

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