@idds/js 1.2.2 → 1.2.4

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`);
@@ -392,6 +409,11 @@ var InaUI = (() => {
       };
       this.state = {
         viewDate: /* @__PURE__ */ new Date(),
+        nextViewDate: (() => {
+          const next = /* @__PURE__ */ new Date();
+          next.setMonth(next.getMonth() + 1);
+          return next;
+        })(),
         selectedDate: null,
         selectedDates: [],
         rangeDate: [null, null],
@@ -444,7 +466,7 @@ var InaUI = (() => {
       }
       return false;
     }
-    createIcon(name, size = 16) {
+    createIcon(name, size = 20) {
       if (name === "chevron-left")
         return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6l6 6" /></svg>`;
       if (name === "chevron-right")
@@ -453,6 +475,90 @@ var InaUI = (() => {
         return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`;
       return "";
     }
+    isLeftGreaterThanRight(leftDate, rightDate) {
+      const leftYear = leftDate.getFullYear();
+      const leftMonth = leftDate.getMonth();
+      const rightYear = rightDate.getFullYear();
+      const rightMonth = rightDate.getMonth();
+      return leftYear > rightYear || leftYear === rightYear && leftMonth >= rightMonth;
+    }
+    navigateMonth(isNextMonth, direction) {
+      const { mode } = this.options;
+      if (isNextMonth) {
+        const newDate = new Date(this.state.nextViewDate);
+        if (direction === "prev") {
+          newDate.setMonth(newDate.getMonth() - 1);
+        } else {
+          newDate.setMonth(newDate.getMonth() + 1);
+        }
+        if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
+          const adjustedLeft = new Date(newDate);
+          adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+          this.state.viewDate = adjustedLeft;
+        }
+        this.state.nextViewDate = newDate;
+      } else {
+        const newDate = new Date(this.state.viewDate);
+        if (direction === "prev") {
+          newDate.setMonth(newDate.getMonth() - 1);
+        } else {
+          newDate.setMonth(newDate.getMonth() + 1);
+        }
+        if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
+          const adjustedRight = new Date(newDate);
+          adjustedRight.setMonth(adjustedRight.getMonth() + 1);
+          this.state.nextViewDate = adjustedRight;
+        }
+        this.state.viewDate = newDate;
+      }
+      this.renderPanel();
+    }
+    setMonthExact(isNextMonth, m) {
+      const { mode } = this.options;
+      if (isNextMonth) {
+        const newDate = new Date(this.state.nextViewDate);
+        newDate.setMonth(m);
+        if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
+          const adjustedLeft = new Date(newDate);
+          adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+          this.state.viewDate = adjustedLeft;
+        }
+        this.state.nextViewDate = newDate;
+      } else {
+        const newDate = new Date(this.state.viewDate);
+        newDate.setMonth(m);
+        if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
+          const adjustedRight = new Date(newDate);
+          adjustedRight.setMonth(adjustedRight.getMonth() + 1);
+          this.state.nextViewDate = adjustedRight;
+        }
+        this.state.viewDate = newDate;
+      }
+      this.renderPanel();
+    }
+    setYearExact(isNextMonth, y) {
+      const { mode } = this.options;
+      if (isNextMonth) {
+        const newDate = new Date(this.state.nextViewDate);
+        newDate.setFullYear(y);
+        if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
+          const adjustedLeft = new Date(newDate);
+          adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+          this.state.viewDate = adjustedLeft;
+        }
+        this.state.nextViewDate = newDate;
+      } else {
+        const newDate = new Date(this.state.viewDate);
+        newDate.setFullYear(y);
+        if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
+          const adjustedRight = new Date(newDate);
+          adjustedRight.setMonth(adjustedRight.getMonth() + 1);
+          this.state.nextViewDate = adjustedRight;
+        }
+        this.state.viewDate = newDate;
+      }
+      this.renderPanel();
+    }
     initDOM() {
       if (!this.container.classList.contains(`${PREFIX}-date-picker`)) {
         this.container.classList.add(`${PREFIX}-date-picker`);
@@ -718,84 +824,57 @@ var InaUI = (() => {
       container.className = !isNextMonth ? `${PREFIX}-date-picker__calendar-container` : `${PREFIX}-date-picker__calendar`;
       const header = document.createElement("div");
       header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
-      if (!isNextMonth) {
-        const prevBtn = document.createElement("button");
-        prevBtn.type = "button";
-        prevBtn.className = `${PREFIX}-date-picker__nav-button`;
-        prevBtn.innerHTML = this.createIcon("chevron-left");
-        prevBtn.onclick = (e) => {
+      const prevBtn = document.createElement("button");
+      prevBtn.type = "button";
+      prevBtn.className = `${PREFIX}-date-picker__nav-button`;
+      prevBtn.innerHTML = this.createIcon("chevron-left");
+      prevBtn.onclick = (e) => {
+        e.stopPropagation();
+        this.navigateMonth(isNextMonth, "prev");
+      };
+      prevBtn.onkeydown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
           e.stopPropagation();
-          this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
-          this.renderPanel();
-        };
-        prevBtn.onkeydown = (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
-            this.renderPanel();
-          }
-        };
-        header.appendChild(prevBtn);
-      } else {
-        const spacer = document.createElement("div");
-        spacer.style.width = "32px";
-        header.appendChild(spacer);
-      }
+          this.navigateMonth(isNextMonth, "prev");
+        }
+      };
+      header.appendChild(prevBtn);
       const controls = document.createElement("div");
       controls.className = `${PREFIX}-date-picker__header-controls`;
       const monthCont = document.createElement("div");
       monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
       const monthPicker = this.createMonthPicker(month, (m) => {
-        if (isNextMonth) {
-          this.state.viewDate = new Date(year, m - 1, 1);
-        } else {
-          this.state.viewDate.setMonth(m);
-        }
-        this.renderPanel();
+        this.setMonthExact(isNextMonth, m);
       });
       monthCont.appendChild(monthPicker.element);
       const yearCont = document.createElement("div");
       yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
       const yearPicker = this.createYearPicker(year, (y) => {
-        if (isNextMonth) {
-          this.state.viewDate = new Date(y, month - 1, 1);
-        } else {
-          this.state.viewDate.setFullYear(y);
-        }
-        this.renderPanel();
+        this.setYearExact(isNextMonth, y);
       });
       yearCont.appendChild(yearPicker.element);
       controls.append(monthCont, yearCont);
       header.appendChild(controls);
-      const showNextBtn = true;
-      if (showNextBtn) {
-        const nextBtn = document.createElement("button");
-        nextBtn.type = "button";
-        nextBtn.className = `${PREFIX}-date-picker__nav-button`;
-        if (!isNextMonth && (mode === "range" || mode === "multiple")) {
-          nextBtn.classList.add(`${PREFIX}-date-picker__nav-button--mobile-only`);
-        }
-        nextBtn.innerHTML = this.createIcon("chevron-right");
-        nextBtn.onclick = (e) => {
-          e.stopPropagation();
-          this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
-          this.renderPanel();
-        };
-        nextBtn.onkeydown = (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
-            this.renderPanel();
-          }
-        };
-        header.appendChild(nextBtn);
-      } else if (!isNextMonth) {
-        const spacer = document.createElement("div");
-        spacer.style.width = "32px";
-        header.appendChild(spacer);
+      const nextBtn = document.createElement("button");
+      nextBtn.type = "button";
+      nextBtn.className = `${PREFIX}-date-picker__nav-button`;
+      if (!isNextMonth && (mode === "range" || mode === "multiple")) {
+        nextBtn.classList.add(`${PREFIX}-date-picker__nav-button--mobile-only`);
       }
+      nextBtn.innerHTML = this.createIcon("chevron-right");
+      nextBtn.onclick = (e) => {
+        e.stopPropagation();
+        this.navigateMonth(isNextMonth, "next");
+      };
+      nextBtn.onkeydown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.navigateMonth(isNextMonth, "next");
+        }
+      };
+      header.appendChild(nextBtn);
       const grid = document.createElement("div");
       grid.className = `${PREFIX}-date-picker__calendar-grid`;
       this.DAYS_SHORT.forEach((d) => {
@@ -937,12 +1016,7 @@ var InaUI = (() => {
       const cal1 = this.renderCalendarGrid(this.state.viewDate);
       this.elements.panelContent.appendChild(cal1);
       if (this.options.mode === "range" || this.options.mode === "multiple") {
-        const nextMonthDate = new Date(
-          this.state.viewDate.getFullYear(),
-          this.state.viewDate.getMonth() + 1,
-          1
-        );
-        const cal2 = this.renderCalendarGrid(nextMonthDate, true);
+        const cal2 = this.renderCalendarGrid(this.state.nextViewDate, true);
         this.elements.panelContent.appendChild(cal2);
       }
     }
@@ -3026,13 +3100,29 @@ var InaUI = (() => {
             );
             if (!input) {
               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 ? primaryCustomValue : ""}" />
-                 </div>
+               <div class="${PREFIX4}-chip__input-wrapper">
+                 <input type="text" class="${PREFIX4}-chip__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
+                 <button type="button" class="${PREFIX4}-chip__clear-button" aria-label="Clear input" style="display: ${!isStandard && primaryCustomValue ? "inline-flex" : "none"};">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${PREFIX4}-chip__clear-icon">
+                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                     <path d="M18 6l-12 12"></path>
+                     <path d="M6 6l12 12"></path>
+                   </svg>
+                 </button>
                </div>
              `;
               input = customFieldContainer.querySelector("input");
+              const clearBtn = customFieldContainer.querySelector(
+                ".ina-chip__clear-button"
+              );
+              input.addEventListener("input", (e) => {
+                clearBtn.style.display = e.target.value ? "inline-flex" : "none";
+              });
+              clearBtn.addEventListener("click", () => {
+                input.value = "";
+                clearBtn.style.display = "none";
+                commitCustomValue(input);
+              });
               input.addEventListener("blur", (e) => {
                 commitCustomValue(e.target);
               });
@@ -3114,6 +3204,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 +3228,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 +3453,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 +4679,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`);
@@ -380,6 +423,11 @@ var DatePicker = class {
     };
     this.state = {
       viewDate: /* @__PURE__ */ new Date(),
+      nextViewDate: (() => {
+        const next = /* @__PURE__ */ new Date();
+        next.setMonth(next.getMonth() + 1);
+        return next;
+      })(),
       selectedDate: null,
       selectedDates: [],
       rangeDate: [null, null],
@@ -432,7 +480,7 @@ var DatePicker = class {
     }
     return false;
   }
-  createIcon(name, size = 16) {
+  createIcon(name, size = 20) {
     if (name === "chevron-left")
       return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6l6 6" /></svg>`;
     if (name === "chevron-right")
@@ -441,6 +489,90 @@ var DatePicker = class {
       return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`;
     return "";
   }
+  isLeftGreaterThanRight(leftDate, rightDate) {
+    const leftYear = leftDate.getFullYear();
+    const leftMonth = leftDate.getMonth();
+    const rightYear = rightDate.getFullYear();
+    const rightMonth = rightDate.getMonth();
+    return leftYear > rightYear || leftYear === rightYear && leftMonth >= rightMonth;
+  }
+  navigateMonth(isNextMonth, direction) {
+    const { mode } = this.options;
+    if (isNextMonth) {
+      const newDate = new Date(this.state.nextViewDate);
+      if (direction === "prev") {
+        newDate.setMonth(newDate.getMonth() - 1);
+      } else {
+        newDate.setMonth(newDate.getMonth() + 1);
+      }
+      if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
+        const adjustedLeft = new Date(newDate);
+        adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+        this.state.viewDate = adjustedLeft;
+      }
+      this.state.nextViewDate = newDate;
+    } else {
+      const newDate = new Date(this.state.viewDate);
+      if (direction === "prev") {
+        newDate.setMonth(newDate.getMonth() - 1);
+      } else {
+        newDate.setMonth(newDate.getMonth() + 1);
+      }
+      if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
+        const adjustedRight = new Date(newDate);
+        adjustedRight.setMonth(adjustedRight.getMonth() + 1);
+        this.state.nextViewDate = adjustedRight;
+      }
+      this.state.viewDate = newDate;
+    }
+    this.renderPanel();
+  }
+  setMonthExact(isNextMonth, m) {
+    const { mode } = this.options;
+    if (isNextMonth) {
+      const newDate = new Date(this.state.nextViewDate);
+      newDate.setMonth(m);
+      if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
+        const adjustedLeft = new Date(newDate);
+        adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+        this.state.viewDate = adjustedLeft;
+      }
+      this.state.nextViewDate = newDate;
+    } else {
+      const newDate = new Date(this.state.viewDate);
+      newDate.setMonth(m);
+      if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
+        const adjustedRight = new Date(newDate);
+        adjustedRight.setMonth(adjustedRight.getMonth() + 1);
+        this.state.nextViewDate = adjustedRight;
+      }
+      this.state.viewDate = newDate;
+    }
+    this.renderPanel();
+  }
+  setYearExact(isNextMonth, y) {
+    const { mode } = this.options;
+    if (isNextMonth) {
+      const newDate = new Date(this.state.nextViewDate);
+      newDate.setFullYear(y);
+      if (mode !== "single" && this.isLeftGreaterThanRight(this.state.viewDate, newDate)) {
+        const adjustedLeft = new Date(newDate);
+        adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+        this.state.viewDate = adjustedLeft;
+      }
+      this.state.nextViewDate = newDate;
+    } else {
+      const newDate = new Date(this.state.viewDate);
+      newDate.setFullYear(y);
+      if (mode !== "single" && this.isLeftGreaterThanRight(newDate, this.state.nextViewDate)) {
+        const adjustedRight = new Date(newDate);
+        adjustedRight.setMonth(adjustedRight.getMonth() + 1);
+        this.state.nextViewDate = adjustedRight;
+      }
+      this.state.viewDate = newDate;
+    }
+    this.renderPanel();
+  }
   initDOM() {
     if (!this.container.classList.contains(`${PREFIX}-date-picker`)) {
       this.container.classList.add(`${PREFIX}-date-picker`);
@@ -706,84 +838,57 @@ var DatePicker = class {
     container.className = !isNextMonth ? `${PREFIX}-date-picker__calendar-container` : `${PREFIX}-date-picker__calendar`;
     const header = document.createElement("div");
     header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
-    if (!isNextMonth) {
-      const prevBtn = document.createElement("button");
-      prevBtn.type = "button";
-      prevBtn.className = `${PREFIX}-date-picker__nav-button`;
-      prevBtn.innerHTML = this.createIcon("chevron-left");
-      prevBtn.onclick = (e) => {
+    const prevBtn = document.createElement("button");
+    prevBtn.type = "button";
+    prevBtn.className = `${PREFIX}-date-picker__nav-button`;
+    prevBtn.innerHTML = this.createIcon("chevron-left");
+    prevBtn.onclick = (e) => {
+      e.stopPropagation();
+      this.navigateMonth(isNextMonth, "prev");
+    };
+    prevBtn.onkeydown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
         e.stopPropagation();
-        this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
-        this.renderPanel();
-      };
-      prevBtn.onkeydown = (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          e.stopPropagation();
-          this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
-          this.renderPanel();
-        }
-      };
-      header.appendChild(prevBtn);
-    } else {
-      const spacer = document.createElement("div");
-      spacer.style.width = "32px";
-      header.appendChild(spacer);
-    }
+        this.navigateMonth(isNextMonth, "prev");
+      }
+    };
+    header.appendChild(prevBtn);
     const controls = document.createElement("div");
     controls.className = `${PREFIX}-date-picker__header-controls`;
     const monthCont = document.createElement("div");
     monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
     const monthPicker = this.createMonthPicker(month, (m) => {
-      if (isNextMonth) {
-        this.state.viewDate = new Date(year, m - 1, 1);
-      } else {
-        this.state.viewDate.setMonth(m);
-      }
-      this.renderPanel();
+      this.setMonthExact(isNextMonth, m);
     });
     monthCont.appendChild(monthPicker.element);
     const yearCont = document.createElement("div");
     yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
     const yearPicker = this.createYearPicker(year, (y) => {
-      if (isNextMonth) {
-        this.state.viewDate = new Date(y, month - 1, 1);
-      } else {
-        this.state.viewDate.setFullYear(y);
-      }
-      this.renderPanel();
+      this.setYearExact(isNextMonth, y);
     });
     yearCont.appendChild(yearPicker.element);
     controls.append(monthCont, yearCont);
     header.appendChild(controls);
-    const showNextBtn = true;
-    if (showNextBtn) {
-      const nextBtn = document.createElement("button");
-      nextBtn.type = "button";
-      nextBtn.className = `${PREFIX}-date-picker__nav-button`;
-      if (!isNextMonth && (mode === "range" || mode === "multiple")) {
-        nextBtn.classList.add(`${PREFIX}-date-picker__nav-button--mobile-only`);
-      }
-      nextBtn.innerHTML = this.createIcon("chevron-right");
-      nextBtn.onclick = (e) => {
-        e.stopPropagation();
-        this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
-        this.renderPanel();
-      };
-      nextBtn.onkeydown = (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          e.stopPropagation();
-          this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
-          this.renderPanel();
-        }
-      };
-      header.appendChild(nextBtn);
-    } else if (!isNextMonth) {
-      const spacer = document.createElement("div");
-      spacer.style.width = "32px";
-      header.appendChild(spacer);
+    const nextBtn = document.createElement("button");
+    nextBtn.type = "button";
+    nextBtn.className = `${PREFIX}-date-picker__nav-button`;
+    if (!isNextMonth && (mode === "range" || mode === "multiple")) {
+      nextBtn.classList.add(`${PREFIX}-date-picker__nav-button--mobile-only`);
     }
+    nextBtn.innerHTML = this.createIcon("chevron-right");
+    nextBtn.onclick = (e) => {
+      e.stopPropagation();
+      this.navigateMonth(isNextMonth, "next");
+    };
+    nextBtn.onkeydown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        this.navigateMonth(isNextMonth, "next");
+      }
+    };
+    header.appendChild(nextBtn);
     const grid = document.createElement("div");
     grid.className = `${PREFIX}-date-picker__calendar-grid`;
     this.DAYS_SHORT.forEach((d) => {
@@ -925,12 +1030,7 @@ var DatePicker = class {
     const cal1 = this.renderCalendarGrid(this.state.viewDate);
     this.elements.panelContent.appendChild(cal1);
     if (this.options.mode === "range" || this.options.mode === "multiple") {
-      const nextMonthDate = new Date(
-        this.state.viewDate.getFullYear(),
-        this.state.viewDate.getMonth() + 1,
-        1
-      );
-      const cal2 = this.renderCalendarGrid(nextMonthDate, true);
+      const cal2 = this.renderCalendarGrid(this.state.nextViewDate, true);
       this.elements.panelContent.appendChild(cal2);
     }
   }
@@ -3106,13 +3206,29 @@ function initChip(rootSelector = `.${PREFIX5}-chip`) {
           );
           if (!input) {
             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 ? primaryCustomValue : ""}" />
-                 </div>
+               <div class="${PREFIX5}-chip__input-wrapper">
+                 <input type="text" class="${PREFIX5}-chip__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
+                 <button type="button" class="${PREFIX5}-chip__clear-button" aria-label="Clear input" style="display: ${!isStandard && primaryCustomValue ? "inline-flex" : "none"};">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${PREFIX5}-chip__clear-icon">
+                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                     <path d="M18 6l-12 12"></path>
+                     <path d="M6 6l12 12"></path>
+                   </svg>
+                 </button>
                </div>
              `;
             input = customFieldContainer.querySelector("input");
+            const clearBtn = customFieldContainer.querySelector(
+              ".ina-chip__clear-button"
+            );
+            input.addEventListener("input", (e) => {
+              clearBtn.style.display = e.target.value ? "inline-flex" : "none";
+            });
+            clearBtn.addEventListener("click", () => {
+              input.value = "";
+              clearBtn.style.display = "none";
+              commitCustomValue(input);
+            });
             input.addEventListener("blur", (e) => {
               commitCustomValue(e.target);
             });
@@ -3194,6 +3310,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 +3334,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 +3559,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.4",
   "publishConfig": {
     "access": "public"
   },