@idds/js 1.0.98 → 1.0.99

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
   });
@@ -3973,6 +3975,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 +4629,8 @@ var InaUI = (() => {
       initTabVertical();
       initTabHorizontal();
       initTable();
+      initMonthPicker();
+      initYearPicker();
     });
   }
   return __toCommonJS(bundle_exports);

package/dist/index.js

@@ -4055,6 +4055,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 +4521,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.0.99",
   "publishConfig": {
     "access": "public"
   },