@idds/js 1.0.98 → 1.2.0

package/dist/index.iife.js

@@ -35,6 +35,7 @@ var InaUI = (() => {
     initFileUploadItem: () => initFileUploadItem,
     initImgCompare: () => initImgCompare,
     initModal: () => initModal,
+    initMonthPicker: () => initMonthPicker,
     initPagination: () => initPagination,
     initRadioButton: () => initRadioButton,
     initRangeDatepicker: () => initRangeDatepicker,
@@ -47,6 +48,7 @@ var InaUI = (() => {
     initTable: () => initTable,
     initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
+    initYearPicker: () => initYearPicker,
     setBrandTheme: () => setBrandTheme,
     showToast: () => showToast
   });
@@ -2954,34 +2956,59 @@ 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 !== ""
+          );
           if (isSelected) {
             item.classList.add(`${PREFIX4}-chip__item--selected`);
           } else {
             item.classList.remove(`${PREFIX4}-chip__item--selected`);
           }
+          item.setAttribute("tabindex", index2 === focusedIndex ? "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");
@@ -2995,7 +3022,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>
              `;
@@ -3003,21 +3030,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";
@@ -3029,17 +3056,41 @@ 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 {
+          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) => {
           const val = item.getAttribute("data-value");
           const label = item.textContent.trim();
@@ -3049,6 +3100,39 @@ var InaUI = (() => {
             handleSelect(val);
           }
         });
+        item.addEventListener("focus", () => {
+          currentFocusedIndex = index2;
+        });
+        item.addEventListener("keydown", (e) => {
+          if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            e.preventDefault();
+            const nextIndex = (index2 + 1) % items.length;
+            setItemFocus(nextIndex);
+          } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const prevIndex = (index2 - 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;
@@ -3973,6 +4057,330 @@ var InaUI = (() => {
     return instances.length === 1 ? instances[0] : instances;
   }
 
+  // src/js/components/stateful/month-picker.js
+  var MONTHS_SHORT_ID = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "Mei",
+    "Jun",
+    "Jul",
+    "Agu",
+    "Sep",
+    "Okt",
+    "Nov",
+    "Des"
+  ];
+  function initMonthPicker(rootSelector = `.${PREFIX}-month-picker`) {
+    const pickers = document.querySelectorAll(rootSelector);
+    pickers.forEach((container) => {
+      if (container.dataset.initialized === "true") return;
+      container.dataset.initialized = "true";
+      let currentMonthIdx = parseInt(container.dataset.value || "0", 10);
+      const disabled = container.hasAttribute("disabled");
+      const readonly = container.hasAttribute("readonly");
+      const trigger = container.querySelector(`.${PREFIX}-month-picker__trigger`);
+      const panel = container.querySelector(`.${PREFIX}-month-picker__panel`);
+      const grid = container.querySelector(`.${PREFIX}-month-picker__grid`);
+      const options2 = grid ? Array.from(
+        grid.querySelectorAll(`.${PREFIX}-month-picker__month-option`)
+      ) : [];
+      if (!trigger || !panel || !grid || options2.length === 0) return;
+      let isPickerOpen = false;
+      const updateText = () => {
+        const textEl = trigger.querySelector(
+          `.${PREFIX}-month-picker__trigger-text`
+        );
+        if (textEl) textEl.textContent = MONTHS_SHORT_ID[currentMonthIdx];
+        options2.forEach((opt, idx) => {
+          if (idx === currentMonthIdx) {
+            opt.classList.add(`${PREFIX}-month-picker__month-option--selected`);
+            opt.setAttribute("aria-selected", "true");
+            opt.tabIndex = 0;
+          } else {
+            opt.classList.remove(
+              `${PREFIX}-month-picker__month-option--selected`
+            );
+            opt.setAttribute("aria-selected", "false");
+            opt.tabIndex = -1;
+          }
+        });
+      };
+      const togglePicker = (show) => {
+        if (disabled || readonly) return;
+        isPickerOpen = show;
+        if (show) {
+          panel.classList.add(`${PREFIX}-month-picker__panel--open`);
+          trigger.setAttribute("aria-expanded", "true");
+          setTimeout(() => {
+            const selectedOpt = options2.find((o) => o.tabIndex === 0);
+            if (selectedOpt) selectedOpt.focus();
+          }, 0);
+        } else {
+          panel.classList.remove(`${PREFIX}-month-picker__panel--open`);
+          trigger.setAttribute("aria-expanded", "false");
+        }
+      };
+      updateText();
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        togglePicker(!isPickerOpen);
+      });
+      trigger.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          togglePicker(!isPickerOpen);
+        }
+      });
+      document.addEventListener("click", (e) => {
+        if (!container.contains(e.target)) togglePicker(false);
+      });
+      options2.forEach((btn, idx) => {
+        btn.setAttribute("role", "option");
+        btn.addEventListener("click", (e) => {
+          if (disabled || readonly) return;
+          e.stopPropagation();
+          e.preventDefault();
+          currentMonthIdx = idx;
+          updateText();
+          togglePicker(false);
+          trigger.focus();
+          container.dispatchEvent(
+            new CustomEvent("change", {
+              detail: { value: currentMonthIdx },
+              bubbles: true,
+              composed: true
+            })
+          );
+        });
+        btn.addEventListener("keydown", (e) => {
+          if (disabled || readonly) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            currentMonthIdx = idx;
+            updateText();
+            togglePicker(false);
+            trigger.focus();
+            container.dispatchEvent(
+              new CustomEvent("change", {
+                detail: { value: currentMonthIdx },
+                bubbles: true,
+                composed: true
+              })
+            );
+          } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+            e.preventDefault();
+            e.stopPropagation();
+            let nextIndex = idx;
+            if (e.key === "ArrowRight") nextIndex += 1;
+            else if (e.key === "ArrowLeft") nextIndex -= 1;
+            else if (e.key === "ArrowDown")
+              nextIndex += 3;
+            else if (e.key === "ArrowUp") nextIndex -= 3;
+            if (options2[nextIndex]) {
+              options2[nextIndex].focus();
+            }
+          }
+        });
+      });
+    });
+  }
+
+  // src/js/components/stateful/year-picker.js
+  function initYearPicker(rootSelector = `.${PREFIX}-year-picker`) {
+    const pickers = document.querySelectorAll(rootSelector);
+    pickers.forEach((container) => {
+      if (container.dataset.initialized === "true") return;
+      container.dataset.initialized = "true";
+      let currentYearVal = parseInt(
+        container.dataset.value || (/* @__PURE__ */ new Date()).getFullYear().toString(),
+        10
+      );
+      const disabled = container.hasAttribute("disabled");
+      const readonly = container.hasAttribute("readonly");
+      const maxYear = container.dataset.max ? parseInt(container.dataset.max, 10) : 2100;
+      const minYear = container.dataset.min ? parseInt(container.dataset.min, 10) : 1900;
+      let isPickerOpen = false;
+      let decadeSize = 20;
+      const trigger = container.querySelector(`.${PREFIX}-year-picker__trigger`);
+      const panel = container.querySelector(`.${PREFIX}-year-picker__panel`);
+      const grid = container.querySelector(`.${PREFIX}-year-picker__grid`);
+      const prevBtn = container.querySelector(
+        `.${PREFIX}-year-picker__nav-button[aria-label="Previous decade"]`
+      );
+      const nextBtn = container.querySelector(
+        `.${PREFIX}-year-picker__nav-button[aria-label="Next decade"]`
+      );
+      const rangeText = container.querySelector(
+        `.${PREFIX}-year-picker__decade-range`
+      );
+      if (!trigger || !panel || !grid) return;
+      let decadeStart = Math.floor(currentYearVal / decadeSize) * decadeSize;
+      const renderGrid = () => {
+        grid.innerHTML = "";
+        if (rangeText) {
+          rangeText.textContent = `${decadeStart} - ${decadeStart + decadeSize - 1}`;
+        }
+        if (prevBtn) {
+          prevBtn.disabled = disabled || readonly || decadeStart <= minYear;
+        }
+        if (nextBtn) {
+          nextBtn.disabled = disabled || readonly || decadeStart + decadeSize > maxYear;
+        }
+        for (let y = decadeStart; y < decadeStart + decadeSize; y++) {
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = `${PREFIX}-year-picker__year-option`;
+          if (y === currentYearVal) {
+            btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
+            btn.setAttribute("aria-selected", "true");
+            btn.tabIndex = 0;
+          } else {
+            btn.setAttribute("aria-selected", "false");
+            btn.tabIndex = -1;
+          }
+          if (y < minYear || y > maxYear) {
+            btn.disabled = true;
+            btn.classList.add(`${PREFIX}-year-picker__year-option--disabled`);
+          }
+          btn.textContent = y.toString();
+          btn.setAttribute("role", "option");
+          btn.addEventListener("click", (e) => {
+            if (disabled || readonly || btn.disabled) return;
+            e.stopPropagation();
+            currentYearVal = y;
+            updateText();
+            togglePicker(false);
+            trigger.focus();
+            container.dispatchEvent(
+              new CustomEvent("change", {
+                detail: { value: currentYearVal },
+                bubbles: true,
+                composed: true
+              })
+            );
+          });
+          btn.addEventListener("keydown", (e) => {
+            if (disabled || readonly || btn.disabled) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              e.stopPropagation();
+              currentYearVal = y;
+              updateText();
+              togglePicker(false);
+              trigger.focus();
+              container.dispatchEvent(
+                new CustomEvent("change", {
+                  detail: { value: currentYearVal },
+                  bubbles: true,
+                  composed: true
+                })
+              );
+            } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+              e.preventDefault();
+              e.stopPropagation();
+              const options2 = Array.from(
+                grid.querySelectorAll(
+                  `.${PREFIX}-year-picker__year-option:not(:disabled)`
+                )
+              );
+              const currentIndex = options2.indexOf(btn);
+              if (currentIndex === -1) return;
+              let nextIndex = currentIndex;
+              if (e.key === "ArrowRight") nextIndex += 1;
+              else if (e.key === "ArrowLeft") nextIndex -= 1;
+              else if (e.key === "ArrowDown")
+                nextIndex += 4;
+              else if (e.key === "ArrowUp") nextIndex -= 4;
+              if (options2[nextIndex]) {
+                options2[nextIndex].focus();
+              } else {
+              }
+            }
+          });
+          grid.appendChild(btn);
+        }
+      };
+      const updateText = () => {
+        const textEl = trigger.querySelector(
+          `.${PREFIX}-year-picker__trigger-text`
+        );
+        if (textEl) textEl.textContent = currentYearVal.toString();
+      };
+      const togglePicker = (show) => {
+        if (disabled || readonly) return;
+        isPickerOpen = show;
+        if (show) {
+          decadeStart = Math.floor(currentYearVal / decadeSize) * decadeSize;
+          renderGrid();
+          panel.classList.add(`${PREFIX}-year-picker__panel--open`);
+          trigger.setAttribute("aria-expanded", "true");
+          setTimeout(() => {
+            const selectedOpt = grid.querySelector(
+              `.${PREFIX}-year-picker__year-option--selected`
+            );
+            if (selectedOpt) selectedOpt.focus();
+            else if (grid.firstElementChild) grid.firstElementChild.focus();
+          }, 0);
+        } else {
+          panel.classList.remove(`${PREFIX}-year-picker__panel--open`);
+          trigger.setAttribute("aria-expanded", "false");
+        }
+      };
+      updateText();
+      renderGrid();
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        togglePicker(!isPickerOpen);
+      });
+      trigger.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          togglePicker(!isPickerOpen);
+        }
+      });
+      document.addEventListener("click", (e) => {
+        if (!container.contains(e.target)) togglePicker(false);
+      });
+      if (prevBtn) {
+        prevBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          decadeStart -= decadeSize;
+          renderGrid();
+        });
+        prevBtn.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            decadeStart -= decadeSize;
+            renderGrid();
+          }
+        });
+      }
+      if (nextBtn) {
+        nextBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          decadeStart += decadeSize;
+          renderGrid();
+        });
+        nextBtn.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            decadeStart += decadeSize;
+            renderGrid();
+          }
+        });
+      }
+    });
+  }
+
   // src/js/components/stateless/toast.js
   var ICONS3 = {
     default: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
@@ -4303,6 +4711,8 @@ var InaUI = (() => {
       initTabVertical();
       initTabHorizontal();
       initTable();
+      initMonthPicker();
+      initYearPicker();
     });
   }
   return __toCommonJS(bundle_exports);

package/dist/index.js

@@ -3036,34 +3036,59 @@ 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 !== ""
+        );
         if (isSelected) {
           item.classList.add(`${PREFIX5}-chip__item--selected`);
         } else {
           item.classList.remove(`${PREFIX5}-chip__item--selected`);
         }
+        item.setAttribute("tabindex", index2 === focusedIndex ? "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 +3102,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 +3110,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,17 +3136,41 @@ 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 {
+        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) => {
         const val = item.getAttribute("data-value");
         const label = item.textContent.trim();
@@ -3131,6 +3180,39 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
           handleSelect(val);
         }
       });
+      item.addEventListener("focus", () => {
+        currentFocusedIndex = index2;
+      });
+      item.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+          e.preventDefault();
+          const nextIndex = (index2 + 1) % items.length;
+          setItemFocus(nextIndex);
+        } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+          e.preventDefault();
+          const prevIndex = (index2 - 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;
@@ -4055,6 +4137,330 @@ function initTable(selectorOrElement, options2 = {}) {
   return instances.length === 1 ? instances[0] : instances;
 }
 
+// src/js/components/stateful/month-picker.js
+var MONTHS_SHORT_ID = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "Mei",
+  "Jun",
+  "Jul",
+  "Agu",
+  "Sep",
+  "Okt",
+  "Nov",
+  "Des"
+];
+function initMonthPicker(rootSelector = `.${PREFIX}-month-picker`) {
+  const pickers = document.querySelectorAll(rootSelector);
+  pickers.forEach((container) => {
+    if (container.dataset.initialized === "true") return;
+    container.dataset.initialized = "true";
+    let currentMonthIdx = parseInt(container.dataset.value || "0", 10);
+    const disabled = container.hasAttribute("disabled");
+    const readonly = container.hasAttribute("readonly");
+    const trigger = container.querySelector(`.${PREFIX}-month-picker__trigger`);
+    const panel = container.querySelector(`.${PREFIX}-month-picker__panel`);
+    const grid = container.querySelector(`.${PREFIX}-month-picker__grid`);
+    const options2 = grid ? Array.from(
+      grid.querySelectorAll(`.${PREFIX}-month-picker__month-option`)
+    ) : [];
+    if (!trigger || !panel || !grid || options2.length === 0) return;
+    let isPickerOpen = false;
+    const updateText = () => {
+      const textEl = trigger.querySelector(
+        `.${PREFIX}-month-picker__trigger-text`
+      );
+      if (textEl) textEl.textContent = MONTHS_SHORT_ID[currentMonthIdx];
+      options2.forEach((opt, idx) => {
+        if (idx === currentMonthIdx) {
+          opt.classList.add(`${PREFIX}-month-picker__month-option--selected`);
+          opt.setAttribute("aria-selected", "true");
+          opt.tabIndex = 0;
+        } else {
+          opt.classList.remove(
+            `${PREFIX}-month-picker__month-option--selected`
+          );
+          opt.setAttribute("aria-selected", "false");
+          opt.tabIndex = -1;
+        }
+      });
+    };
+    const togglePicker = (show) => {
+      if (disabled || readonly) return;
+      isPickerOpen = show;
+      if (show) {
+        panel.classList.add(`${PREFIX}-month-picker__panel--open`);
+        trigger.setAttribute("aria-expanded", "true");
+        setTimeout(() => {
+          const selectedOpt = options2.find((o) => o.tabIndex === 0);
+          if (selectedOpt) selectedOpt.focus();
+        }, 0);
+      } else {
+        panel.classList.remove(`${PREFIX}-month-picker__panel--open`);
+        trigger.setAttribute("aria-expanded", "false");
+      }
+    };
+    updateText();
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      togglePicker(!isPickerOpen);
+    });
+    trigger.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!container.contains(e.target)) togglePicker(false);
+    });
+    options2.forEach((btn, idx) => {
+      btn.setAttribute("role", "option");
+      btn.addEventListener("click", (e) => {
+        if (disabled || readonly) return;
+        e.stopPropagation();
+        e.preventDefault();
+        currentMonthIdx = idx;
+        updateText();
+        togglePicker(false);
+        trigger.focus();
+        container.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { value: currentMonthIdx },
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+      btn.addEventListener("keydown", (e) => {
+        if (disabled || readonly) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          currentMonthIdx = idx;
+          updateText();
+          togglePicker(false);
+          trigger.focus();
+          container.dispatchEvent(
+            new CustomEvent("change", {
+              detail: { value: currentMonthIdx },
+              bubbles: true,
+              composed: true
+            })
+          );
+        } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+          e.preventDefault();
+          e.stopPropagation();
+          let nextIndex = idx;
+          if (e.key === "ArrowRight") nextIndex += 1;
+          else if (e.key === "ArrowLeft") nextIndex -= 1;
+          else if (e.key === "ArrowDown")
+            nextIndex += 3;
+          else if (e.key === "ArrowUp") nextIndex -= 3;
+          if (options2[nextIndex]) {
+            options2[nextIndex].focus();
+          }
+        }
+      });
+    });
+  });
+}
+
+// src/js/components/stateful/year-picker.js
+function initYearPicker(rootSelector = `.${PREFIX}-year-picker`) {
+  const pickers = document.querySelectorAll(rootSelector);
+  pickers.forEach((container) => {
+    if (container.dataset.initialized === "true") return;
+    container.dataset.initialized = "true";
+    let currentYearVal = parseInt(
+      container.dataset.value || (/* @__PURE__ */ new Date()).getFullYear().toString(),
+      10
+    );
+    const disabled = container.hasAttribute("disabled");
+    const readonly = container.hasAttribute("readonly");
+    const maxYear = container.dataset.max ? parseInt(container.dataset.max, 10) : 2100;
+    const minYear = container.dataset.min ? parseInt(container.dataset.min, 10) : 1900;
+    let isPickerOpen = false;
+    let decadeSize = 20;
+    const trigger = container.querySelector(`.${PREFIX}-year-picker__trigger`);
+    const panel = container.querySelector(`.${PREFIX}-year-picker__panel`);
+    const grid = container.querySelector(`.${PREFIX}-year-picker__grid`);
+    const prevBtn = container.querySelector(
+      `.${PREFIX}-year-picker__nav-button[aria-label="Previous decade"]`
+    );
+    const nextBtn = container.querySelector(
+      `.${PREFIX}-year-picker__nav-button[aria-label="Next decade"]`
+    );
+    const rangeText = container.querySelector(
+      `.${PREFIX}-year-picker__decade-range`
+    );
+    if (!trigger || !panel || !grid) return;
+    let decadeStart = Math.floor(currentYearVal / decadeSize) * decadeSize;
+    const renderGrid = () => {
+      grid.innerHTML = "";
+      if (rangeText) {
+        rangeText.textContent = `${decadeStart} - ${decadeStart + decadeSize - 1}`;
+      }
+      if (prevBtn) {
+        prevBtn.disabled = disabled || readonly || decadeStart <= minYear;
+      }
+      if (nextBtn) {
+        nextBtn.disabled = disabled || readonly || decadeStart + decadeSize > maxYear;
+      }
+      for (let y = decadeStart; y < decadeStart + decadeSize; y++) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = `${PREFIX}-year-picker__year-option`;
+        if (y === currentYearVal) {
+          btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
+          btn.setAttribute("aria-selected", "true");
+          btn.tabIndex = 0;
+        } else {
+          btn.setAttribute("aria-selected", "false");
+          btn.tabIndex = -1;
+        }
+        if (y < minYear || y > maxYear) {
+          btn.disabled = true;
+          btn.classList.add(`${PREFIX}-year-picker__year-option--disabled`);
+        }
+        btn.textContent = y.toString();
+        btn.setAttribute("role", "option");
+        btn.addEventListener("click", (e) => {
+          if (disabled || readonly || btn.disabled) return;
+          e.stopPropagation();
+          currentYearVal = y;
+          updateText();
+          togglePicker(false);
+          trigger.focus();
+          container.dispatchEvent(
+            new CustomEvent("change", {
+              detail: { value: currentYearVal },
+              bubbles: true,
+              composed: true
+            })
+          );
+        });
+        btn.addEventListener("keydown", (e) => {
+          if (disabled || readonly || btn.disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            currentYearVal = y;
+            updateText();
+            togglePicker(false);
+            trigger.focus();
+            container.dispatchEvent(
+              new CustomEvent("change", {
+                detail: { value: currentYearVal },
+                bubbles: true,
+                composed: true
+              })
+            );
+          } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+            e.preventDefault();
+            e.stopPropagation();
+            const options2 = Array.from(
+              grid.querySelectorAll(
+                `.${PREFIX}-year-picker__year-option:not(:disabled)`
+              )
+            );
+            const currentIndex = options2.indexOf(btn);
+            if (currentIndex === -1) return;
+            let nextIndex = currentIndex;
+            if (e.key === "ArrowRight") nextIndex += 1;
+            else if (e.key === "ArrowLeft") nextIndex -= 1;
+            else if (e.key === "ArrowDown")
+              nextIndex += 4;
+            else if (e.key === "ArrowUp") nextIndex -= 4;
+            if (options2[nextIndex]) {
+              options2[nextIndex].focus();
+            } else {
+            }
+          }
+        });
+        grid.appendChild(btn);
+      }
+    };
+    const updateText = () => {
+      const textEl = trigger.querySelector(
+        `.${PREFIX}-year-picker__trigger-text`
+      );
+      if (textEl) textEl.textContent = currentYearVal.toString();
+    };
+    const togglePicker = (show) => {
+      if (disabled || readonly) return;
+      isPickerOpen = show;
+      if (show) {
+        decadeStart = Math.floor(currentYearVal / decadeSize) * decadeSize;
+        renderGrid();
+        panel.classList.add(`${PREFIX}-year-picker__panel--open`);
+        trigger.setAttribute("aria-expanded", "true");
+        setTimeout(() => {
+          const selectedOpt = grid.querySelector(
+            `.${PREFIX}-year-picker__year-option--selected`
+          );
+          if (selectedOpt) selectedOpt.focus();
+          else if (grid.firstElementChild) grid.firstElementChild.focus();
+        }, 0);
+      } else {
+        panel.classList.remove(`${PREFIX}-year-picker__panel--open`);
+        trigger.setAttribute("aria-expanded", "false");
+      }
+    };
+    updateText();
+    renderGrid();
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      togglePicker(!isPickerOpen);
+    });
+    trigger.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!container.contains(e.target)) togglePicker(false);
+    });
+    if (prevBtn) {
+      prevBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        decadeStart -= decadeSize;
+        renderGrid();
+      });
+      prevBtn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          decadeStart -= decadeSize;
+          renderGrid();
+        }
+      });
+    }
+    if (nextBtn) {
+      nextBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        decadeStart += decadeSize;
+        renderGrid();
+      });
+      nextBtn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          decadeStart += decadeSize;
+          renderGrid();
+        }
+      });
+    }
+  });
+}
+
 // src/js/components/stateless/toast.js
 var ICONS3 = {
   default: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
@@ -4197,6 +4603,8 @@ function initAll() {
   initTabVertical();
   initTabHorizontal();
   initTable();
+  initMonthPicker();
+  initYearPicker();
 }
 export {
   DatePicker,

package/package.json

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