@idds/js 1.0.61 → 1.0.62

package/dist/index.iife.js

@@ -829,150 +829,6 @@ var InaUI = (() => {
     });
   }
 
-  // src/js/components/stateful/dropdown.js
-  function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
-    document.querySelectorAll(rootSelector).forEach((dropdown) => {
-      const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
-      const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
-      const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
-      const menuItems = menu.querySelectorAll("li[role='option']");
-      const menuId = menu.id;
-      let activeIndex = -1;
-      menuItems.forEach((item, index) => {
-        item.id = `${menuId}-item-${index}`;
-      });
-      const toggleMenu = (show) => {
-        const isCurrentlyShown = dropdown.classList.contains("show");
-        const isShown = show !== void 0 ? show : !isCurrentlyShown;
-        if (isShown === isCurrentlyShown) {
-          return;
-        }
-        dropdown.classList.toggle("show", isShown);
-        trigger.setAttribute("aria-expanded", isShown);
-        if (isShown) {
-          input.focus();
-        } else {
-          input.blur();
-          removeHighlight();
-          activeIndex = -1;
-          input.removeAttribute("aria-activedescendant");
-        }
-      };
-      const filterItems = () => {
-        const filterValue = input.value.toLowerCase();
-        let hasVisibleItems = false;
-        activeIndex = -1;
-        removeHighlight();
-        input.removeAttribute("aria-activedescendant");
-        const activeItem = menu.querySelector("li[role='option'].selected");
-        if (activeItem && input.value !== activeItem.textContent.trim()) {
-          activeItem.classList.remove("selected");
-        }
-        menuItems.forEach((item) => {
-          const itemText = item.textContent.toLowerCase();
-          const isMatch = itemText.includes(filterValue);
-          item.classList.toggle("hidden", !isMatch);
-          if (isMatch) hasVisibleItems = true;
-        });
-        if (!dropdown.classList.contains("show") && hasVisibleItems) {
-          toggleMenu(true);
-        }
-      };
-      const selectItem = (item) => {
-        const itemText = item.textContent.trim();
-        input.value = itemText;
-        menuItems.forEach((li) => {
-          li.classList.remove("selected");
-        });
-        if (item) {
-          item.classList.add("selected");
-          dropdown.dispatchEvent(
-            new CustomEvent("dropdown:changed", {
-              detail: { value: itemText }
-            })
-          );
-        }
-        toggleMenu(false);
-      };
-      const setHighlight = (index) => {
-        removeHighlight();
-        const visibleItems = menu.querySelectorAll(
-          "li[role='option']:not(.hidden)"
-        );
-        if (visibleItems.length === 0) return;
-        if (index < 0) index = 0;
-        else if (index >= visibleItems.length) index = visibleItems.length - 1;
-        const itemToHighlight = visibleItems[index];
-        if (itemToHighlight) {
-          itemToHighlight.classList.add("highlighted");
-          input.setAttribute("aria-activedescendant", itemToHighlight.id);
-          itemToHighlight.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest"
-          });
-          activeIndex = index;
-        }
-      };
-      const removeHighlight = () => {
-        menuItems.forEach((item) => item.classList.remove("highlighted"));
-      };
-      trigger.addEventListener("click", () => {
-        toggleMenu();
-      });
-      input.addEventListener("input", filterItems);
-      menu.addEventListener("click", (e) => {
-        const option = e.target.closest("li[role='option']");
-        if (option) {
-          e.preventDefault();
-          selectItem(option);
-        }
-      });
-      document.addEventListener("click", (e) => {
-        if (!dropdown.contains(e.target)) {
-          toggleMenu(false);
-        }
-      });
-      input.addEventListener("keydown", (e) => {
-        const { key } = e;
-        const isMenuOpen = dropdown.classList.contains("show");
-        switch (key) {
-          case "ArrowDown":
-            e.preventDefault();
-            if (!isMenuOpen) {
-              toggleMenu(true);
-            }
-            setHighlight(activeIndex + 1);
-            break;
-          case "ArrowUp":
-            e.preventDefault();
-            if (isMenuOpen) {
-              setHighlight(activeIndex - 1);
-            }
-            break;
-          case "Enter":
-            e.preventDefault();
-            const firstVisible = menu.querySelector(
-              "li[role='option']:not(.hidden)"
-            );
-            const activeItem = menu.querySelector(".highlighted");
-            if (isMenuOpen && activeItem) {
-              selectItem(activeItem);
-            } else if (isMenuOpen && firstVisible) {
-              toggleMenu(false);
-            }
-            break;
-          case "Escape":
-            e.preventDefault();
-            toggleMenu(false);
-            break;
-          case "Tab":
-            toggleMenu(false);
-            break;
-        }
-      });
-    });
-  }
-
   // src/js/components/stateful/file-upload.js
   var ICONS = {
     upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="16"></line></svg>`,
@@ -1781,6 +1637,150 @@ var InaUI = (() => {
     });
   }
 
+  // src/js/components/stateful/dropdown.js
+  function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
+    document.querySelectorAll(rootSelector).forEach((dropdown) => {
+      const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
+      const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
+      const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
+      const menuItems = menu.querySelectorAll("li[role='option']");
+      const menuId = menu.id;
+      let activeIndex = -1;
+      menuItems.forEach((item, index) => {
+        item.id = `${menuId}-item-${index}`;
+      });
+      const toggleMenu = (show) => {
+        const isCurrentlyShown = dropdown.classList.contains("show");
+        const isShown = show !== void 0 ? show : !isCurrentlyShown;
+        if (isShown === isCurrentlyShown) {
+          return;
+        }
+        dropdown.classList.toggle("show", isShown);
+        trigger.setAttribute("aria-expanded", isShown);
+        if (isShown) {
+          input.focus();
+        } else {
+          input.blur();
+          removeHighlight();
+          activeIndex = -1;
+          input.removeAttribute("aria-activedescendant");
+        }
+      };
+      const filterItems = () => {
+        const filterValue = input.value.toLowerCase();
+        let hasVisibleItems = false;
+        activeIndex = -1;
+        removeHighlight();
+        input.removeAttribute("aria-activedescendant");
+        const activeItem = menu.querySelector("li[role='option'].selected");
+        if (activeItem && input.value !== activeItem.textContent.trim()) {
+          activeItem.classList.remove("selected");
+        }
+        menuItems.forEach((item) => {
+          const itemText = item.textContent.toLowerCase();
+          const isMatch = itemText.includes(filterValue);
+          item.classList.toggle("hidden", !isMatch);
+          if (isMatch) hasVisibleItems = true;
+        });
+        if (!dropdown.classList.contains("show") && hasVisibleItems) {
+          toggleMenu(true);
+        }
+      };
+      const selectItem = (item) => {
+        const itemText = item.textContent.trim();
+        input.value = itemText;
+        menuItems.forEach((li) => {
+          li.classList.remove("selected");
+        });
+        if (item) {
+          item.classList.add("selected");
+          dropdown.dispatchEvent(
+            new CustomEvent("dropdown:changed", {
+              detail: { value: itemText }
+            })
+          );
+        }
+        toggleMenu(false);
+      };
+      const setHighlight = (index) => {
+        removeHighlight();
+        const visibleItems = menu.querySelectorAll(
+          "li[role='option']:not(.hidden)"
+        );
+        if (visibleItems.length === 0) return;
+        if (index < 0) index = 0;
+        else if (index >= visibleItems.length) index = visibleItems.length - 1;
+        const itemToHighlight = visibleItems[index];
+        if (itemToHighlight) {
+          itemToHighlight.classList.add("highlighted");
+          input.setAttribute("aria-activedescendant", itemToHighlight.id);
+          itemToHighlight.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest"
+          });
+          activeIndex = index;
+        }
+      };
+      const removeHighlight = () => {
+        menuItems.forEach((item) => item.classList.remove("highlighted"));
+      };
+      trigger.addEventListener("click", () => {
+        toggleMenu();
+      });
+      input.addEventListener("input", filterItems);
+      menu.addEventListener("click", (e) => {
+        const option = e.target.closest("li[role='option']");
+        if (option) {
+          e.preventDefault();
+          selectItem(option);
+        }
+      });
+      document.addEventListener("click", (e) => {
+        if (!dropdown.contains(e.target)) {
+          toggleMenu(false);
+        }
+      });
+      input.addEventListener("keydown", (e) => {
+        const { key } = e;
+        const isMenuOpen = dropdown.classList.contains("show");
+        switch (key) {
+          case "ArrowDown":
+            e.preventDefault();
+            if (!isMenuOpen) {
+              toggleMenu(true);
+            }
+            setHighlight(activeIndex + 1);
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            if (isMenuOpen) {
+              setHighlight(activeIndex - 1);
+            }
+            break;
+          case "Enter":
+            e.preventDefault();
+            const firstVisible = menu.querySelector(
+              "li[role='option']:not(.hidden)"
+            );
+            const activeItem = menu.querySelector(".highlighted");
+            if (isMenuOpen && activeItem) {
+              selectItem(activeItem);
+            } else if (isMenuOpen && firstVisible) {
+              toggleMenu(false);
+            }
+            break;
+          case "Escape":
+            e.preventDefault();
+            toggleMenu(false);
+            break;
+          case "Tab":
+            toggleMenu(false);
+            break;
+        }
+      });
+    });
+  }
+
   // src/js/components/stateful/range-datepicker.js
   function initRangeDatepicker() {
     document.querySelectorAll(".ina-ss-range-datepicker").forEach((rangeDatepicker) => {

package/dist/index.js

@@ -832,147 +832,348 @@ function initModal(rootSelector = `.${PREFIX}-modal`) {
   });
 }
 
-// src/js/components/stateful/dropdown.js
-function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
-  document.querySelectorAll(rootSelector).forEach((dropdown) => {
-    const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
-    const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
-    const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
-    const menuItems = menu.querySelectorAll("li[role='option']");
-    const menuId = menu.id;
-    let activeIndex = -1;
-    menuItems.forEach((item, index) => {
-      item.id = `${menuId}-item-${index}`;
+// src/js/components/stateless/drawer.js
+function initDrawer(rootSelector = `.${PREFIX}-drawer`) {
+  const drawers = document.querySelectorAll(rootSelector);
+  const closeDrawer = (drawer) => {
+    if (!drawer) return;
+    drawer.classList.add(`${PREFIX}-drawer--closing`);
+    const onAnimationEnd = () => {
+      drawer.classList.remove(`${PREFIX}-drawer--closing`);
+      drawer.style.display = "none";
+      document.body.style.overflow = "";
+      drawer.removeEventListener("animationend", onAnimationEnd);
+    };
+    drawer.addEventListener("animationend", onAnimationEnd, { once: true });
+  };
+  const openDrawer = (drawer) => {
+    if (!drawer) return;
+    drawer.style.display = "flex";
+    document.body.style.overflow = "hidden";
+    drawer.dispatchEvent(new CustomEvent("drawer:open"));
+  };
+  drawers.forEach((drawer) => {
+    if (drawer.__inaDrawerInitialized) return;
+    const isPersistent = drawer.getAttribute("data-persistent") === "true";
+    const closeBtns = drawer.querySelectorAll(
+      `.${PREFIX}-drawer__close-button`
+    );
+    closeBtns.forEach((btn) => {
+      btn.addEventListener("click", () => closeDrawer(drawer));
     });
-    const toggleMenu = (show) => {
-      const isCurrentlyShown = dropdown.classList.contains("show");
-      const isShown = show !== void 0 ? show : !isCurrentlyShown;
-      if (isShown === isCurrentlyShown) {
-        return;
+    const backdrop = drawer.querySelector(`.${PREFIX}-drawer__backdrop`);
+    if (backdrop) {
+      backdrop.addEventListener("click", (e) => {
+        if (!isPersistent) {
+          closeDrawer(drawer);
+        }
+      });
+    }
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && drawer.style.display === "flex" && !isPersistent) {
+        closeDrawer(drawer);
       }
-      dropdown.classList.toggle("show", isShown);
-      trigger.setAttribute("aria-expanded", isShown);
-      if (isShown) {
-        input.focus();
+    });
+    drawer.__inaDrawerInitialized = true;
+  });
+  document.body.addEventListener("click", (e) => {
+    const trigger = e.target.closest('[data-trigger="drawer"]');
+    if (trigger) {
+      const targetId = trigger.getAttribute("data-target");
+      if (targetId) {
+        const targetDrawer = document.querySelector(targetId);
+        if (targetDrawer) {
+          openDrawer(targetDrawer);
+        }
+      }
+    }
+    const closeTrigger = e.target.closest('[data-dismiss="drawer"]');
+    if (closeTrigger) {
+      const targetId = closeTrigger.getAttribute("data-target");
+      let targetDrawer;
+      if (targetId) {
+        targetDrawer = document.querySelector(targetId);
       } else {
-        input.blur();
-        removeHighlight();
-        activeIndex = -1;
-        input.removeAttribute("aria-activedescendant");
+        targetDrawer = closeTrigger.closest(`.${PREFIX}-drawer`);
       }
-    };
-    const filterItems = () => {
-      const filterValue = input.value.toLowerCase();
-      let hasVisibleItems = false;
-      activeIndex = -1;
-      removeHighlight();
-      input.removeAttribute("aria-activedescendant");
-      const activeItem = menu.querySelector("li[role='option'].selected");
-      if (activeItem && input.value !== activeItem.textContent.trim()) {
-        activeItem.classList.remove("selected");
+      if (targetDrawer) {
+        closeDrawer(targetDrawer);
       }
-      menuItems.forEach((item) => {
-        const itemText = item.textContent.toLowerCase();
-        const isMatch = itemText.includes(filterValue);
-        item.classList.toggle("hidden", !isMatch);
-        if (isMatch) hasVisibleItems = true;
-      });
-      if (!dropdown.classList.contains("show") && hasVisibleItems) {
-        toggleMenu(true);
+    }
+  });
+}
+
+// src/js/components/stateful/basic-dropdown.js
+var handleDropdownLogic = (rootSelector, triggerSelector, panelSelector, activeClass) => {
+  const dropdowns = document.querySelectorAll(rootSelector);
+  dropdowns.forEach((dropdown) => {
+    if (dropdown.__inaDropdownInitialized) return;
+    const trigger = dropdown.querySelector(triggerSelector);
+    const panel = dropdown.querySelector(panelSelector);
+    if (!trigger || !panel) return;
+    const toggle = (force) => {
+      const isExpanded = trigger.getAttribute("aria-expanded") === "true";
+      const shouldExpand = force !== void 0 ? force : !isExpanded;
+      trigger.setAttribute("aria-expanded", shouldExpand);
+      if (shouldExpand) {
+        panel.classList.add(activeClass);
+        panel.style.display = "block";
+        if (activeClass) panel.classList.add(activeClass);
+        if (rootSelector.includes("basic")) {
+          const btn = trigger.querySelector(
+            `.${PREFIX}-basic-dropdown__trigger-button`
+          );
+          if (btn)
+            btn.classList.add(`${PREFIX}-basic-dropdown__trigger-button--open`);
+        } else {
+          trigger.classList.add(`${PREFIX}-action-dropdown__trigger--open`);
+        }
+      } else {
+        if (activeClass) panel.classList.remove(activeClass);
+        panel.style.display = "none";
+        if (rootSelector.includes("basic")) {
+          const btn = trigger.querySelector(
+            `.${PREFIX}-basic-dropdown__trigger-button`
+          );
+          if (btn)
+            btn.classList.remove(
+              `${PREFIX}-basic-dropdown__trigger-button--open`
+            );
+        } else {
+          trigger.classList.remove(`${PREFIX}-action-dropdown__trigger--open`);
+        }
       }
     };
-    const selectItem = (item) => {
-      const itemText = item.textContent.trim();
-      input.value = itemText;
-      menuItems.forEach((li) => {
-        li.classList.remove("selected");
+    panel.style.display = "none";
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggle();
+    });
+    document.addEventListener("click", (e) => {
+      if (!dropdown.contains(e.target)) {
+        toggle(false);
+      }
+    });
+    dropdown.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        toggle(false);
+      }
+    });
+    if (rootSelector.includes("action")) {
+      panel.addEventListener("click", (e) => {
+        const item = e.target.closest(`.${PREFIX}-action-dropdown__item`);
+        if (item && !item.disabled) {
+          toggle(false);
+        }
       });
-      if (item) {
-        item.classList.add("selected");
-        dropdown.dispatchEvent(
-          new CustomEvent("dropdown:changed", {
-            detail: { value: itemText }
-          })
-        );
+    }
+    dropdown.__inaDropdownInitialized = true;
+  });
+};
+function initBasicDropdown() {
+  handleDropdownLogic(
+    `.${PREFIX}-basic-dropdown`,
+    `.${PREFIX}-basic-dropdown__trigger`,
+    `.${PREFIX}-basic-dropdown__panel`
+  );
+}
+function initActionDropdown() {
+  handleDropdownLogic(
+    `.${PREFIX}-action-dropdown`,
+    `.${PREFIX}-action-dropdown__trigger`,
+    `.${PREFIX}-action-dropdown__menu`,
+    `${PREFIX}-action-dropdown__menu--visible`
+  );
+}
+
+// src/js/components/stateful/select-dropdown.js
+function initSelectDropdown(rootSelector = `.${PREFIX}-select-dropdown`) {
+  document.querySelectorAll(rootSelector).forEach((dropdown) => {
+    if (dropdown.__inaSelectDropdownInitialized) return;
+    const isMultiple = dropdown.getAttribute("data-multiple") === "true";
+    const isSearchable = dropdown.getAttribute("data-searchable") !== "false";
+    const trigger = dropdown.querySelector(
+      `.${PREFIX}-select-dropdown__trigger`
+    );
+    const input = dropdown.querySelector(
+      `.${PREFIX}-select-dropdown__trigger-input`
+    );
+    const panel = dropdown.querySelector(`.${PREFIX}-select-dropdown__panel`);
+    const optionsContainer = dropdown.querySelector(
+      `.${PREFIX}-select-dropdown__options`
+    );
+    if (!trigger || !panel) return;
+    let isOpen = false;
+    let selectedValues = [];
+    const options = panel.querySelectorAll(
+      `.${PREFIX}-select-dropdown__option`
+    );
+    options.forEach((opt) => {
+      if (opt.classList.contains(
+        `${PREFIX}-select-dropdown__option--selected-single`
+      ) || opt.classList.contains(
+        `${PREFIX}-select-dropdown__option--selected-multiple`
+      )) {
+        const val = getOptionValue(opt);
+        if (val) selectedValues.push(val);
+      }
+    });
+    const toggle = (force) => {
+      const shouldOpen = force !== void 0 ? force : !isOpen;
+      if (shouldOpen === isOpen) return;
+      isOpen = shouldOpen;
+      trigger.setAttribute("aria-expanded", isOpen);
+      if (isOpen) {
+        panel.style.display = "block";
+        if (input) input.focus();
+      } else {
+        panel.style.display = "none";
       }
-      toggleMenu(false);
     };
-    const setHighlight = (index) => {
-      removeHighlight();
-      const visibleItems = menu.querySelectorAll(
-        "li[role='option']:not(.hidden)"
+    panel.style.display = "none";
+    function getOptionValue(option) {
+      return option.getAttribute("data-value");
+    }
+    function getOptionLabel(option) {
+      return option.textContent.trim();
+    }
+    function updateTriggerUI() {
+      const triggerText = trigger.querySelector(
+        `.${PREFIX}-select-dropdown__trigger-text`
       );
-      if (visibleItems.length === 0) return;
-      if (index < 0) index = 0;
-      else if (index >= visibleItems.length) index = visibleItems.length - 1;
-      const itemToHighlight = visibleItems[index];
-      if (itemToHighlight) {
-        itemToHighlight.classList.add("highlighted");
-        input.setAttribute("aria-activedescendant", itemToHighlight.id);
-        itemToHighlight.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
+      if (isMultiple) {
+        let label = "";
+        if (selectedValues.length === 0) {
+          label = input ? input.getAttribute("placeholder") : triggerText ? triggerText.getAttribute("data-placeholder") : "Select...";
+        } else if (selectedValues.length > 3) {
+          label = `${selectedValues.length} data terpilih`;
+        } else {
+          const labels = [];
+          selectedValues.forEach((val) => {
+            const opt = Array.from(options).find(
+              (o) => getOptionValue(o) === val
+            );
+            if (opt) labels.push(getOptionLabel(opt));
+            else labels.push(val);
+          });
+          label = labels.join(", ");
+        }
+        if (input) {
+          input.value = "";
+          input.placeholder = label;
+        } else if (triggerText) {
+          triggerText.textContent = label;
+          triggerText.classList.toggle(
+            `${PREFIX}-select-dropdown__trigger-text--placeholder`,
+            selectedValues.length === 0
+          );
+        }
+      } else {
+        const val = selectedValues[0];
+        let label = "";
+        if (val) {
+          const opt = Array.from(options).find(
+            (o) => getOptionValue(o) === val
+          );
+          label = opt ? getOptionLabel(opt) : val;
+        } else {
+          label = input ? input.getAttribute("placeholder") : triggerText ? triggerText.getAttribute("data-placeholder") : "Select...";
+        }
+        if (input) {
+          if (!isOpen) input.value = label;
+        } else if (triggerText) {
+          triggerText.textContent = label;
+          triggerText.classList.toggle(
+            `${PREFIX}-select-dropdown__trigger-text--placeholder`,
+            !val
+          );
+        }
+      }
+    }
+    function selectOption(option) {
+      if (option.hasAttribute("disabled")) return;
+      const val = getOptionValue(option);
+      if (isMultiple) {
+        const idx = selectedValues.indexOf(val);
+        if (idx > -1) {
+          selectedValues.splice(idx, 1);
+          option.classList.remove(
+            `${PREFIX}-select-dropdown__option--selected-multiple`
+          );
+          const checkbox = option.querySelector(
+            `.${PREFIX}-select-dropdown__option-checkbox`
+          );
+          if (checkbox)
+            checkbox.classList.remove(
+              `${PREFIX}-select-dropdown__option-checkbox--checked`
+            );
+        } else {
+          selectedValues.push(val);
+          option.classList.add(
+            `${PREFIX}-select-dropdown__option--selected-multiple`
+          );
+          const checkbox = option.querySelector(
+            `.${PREFIX}-select-dropdown__option-checkbox`
+          );
+          if (checkbox)
+            checkbox.classList.add(
+              `${PREFIX}-select-dropdown__option-checkbox--checked`
+            );
+        }
+      } else {
+        selectedValues = [val];
+        options.forEach((o) => {
+          o.classList.remove(
+            `${PREFIX}-select-dropdown__option--selected-single`
+          );
         });
-        activeIndex = index;
+        option.classList.add(
+          `${PREFIX}-select-dropdown__option--selected-single`
+        );
+        toggle(false);
       }
-    };
-    const removeHighlight = () => {
-      menuItems.forEach((item) => item.classList.remove("highlighted"));
-    };
-    trigger.addEventListener("click", () => {
-      toggleMenu();
-    });
-    input.addEventListener("input", filterItems);
-    menu.addEventListener("click", (e) => {
-      const option = e.target.closest("li[role='option']");
-      if (option) {
-        e.preventDefault();
-        selectItem(option);
+      updateTriggerUI();
+      dropdown.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: isMultiple ? selectedValues : selectedValues[0] }
+        })
+      );
+    }
+    trigger.addEventListener("click", (e) => {
+      if (e.target !== input) {
+        toggle();
+      } else if (!isOpen) {
+        toggle(true);
       }
     });
-    document.addEventListener("click", (e) => {
-      if (!dropdown.contains(e.target)) {
-        toggleMenu(false);
-      }
+    if (input) {
+      input.addEventListener("input", (e) => {
+        const term = e.target.value.toLowerCase();
+        if (!isOpen) toggle(true);
+        options.forEach((opt) => {
+          const label = getOptionLabel(opt).toLowerCase();
+          const match = label.includes(term);
+          opt.style.display = match ? "" : "none";
+        });
+      });
+    }
+    options.forEach((opt) => {
+      opt.addEventListener("click", (e) => {
+        e.stopPropagation();
+        selectOption(opt);
+      });
     });
-    input.addEventListener("keydown", (e) => {
-      const { key } = e;
-      const isMenuOpen = dropdown.classList.contains("show");
-      switch (key) {
-        case "ArrowDown":
-          e.preventDefault();
-          if (!isMenuOpen) {
-            toggleMenu(true);
-          }
-          setHighlight(activeIndex + 1);
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          if (isMenuOpen) {
-            setHighlight(activeIndex - 1);
-          }
-          break;
-        case "Enter":
-          e.preventDefault();
-          const firstVisible = menu.querySelector(
-            "li[role='option']:not(.hidden)"
-          );
-          const activeItem = menu.querySelector(".highlighted");
-          if (isMenuOpen && activeItem) {
-            selectItem(activeItem);
-          } else if (isMenuOpen && firstVisible) {
-            toggleMenu(false);
-          }
-          break;
-        case "Escape":
-          e.preventDefault();
-          toggleMenu(false);
-          break;
-        case "Tab":
-          toggleMenu(false);
-          break;
-      }
+    document.addEventListener("click", (e) => {
+      if (!dropdown.contains(e.target)) toggle(false);
     });
+    if (optionsContainer) {
+      optionsContainer.addEventListener("scroll", () => {
+        if (optionsContainer.scrollTop + optionsContainer.clientHeight >= optionsContainer.scrollHeight - 20) {
+          dropdown.dispatchEvent(new CustomEvent("scroll-end"));
+        }
+      });
+    }
+    dropdown.__inaSelectDropdownInitialized = true;
   });
 }
 
@@ -1499,6 +1700,150 @@ function initFileUploadItem(rootSelector = `.${PREFIX}-file-item`) {
   });
 }
 
+// src/js/components/stateful/dropdown.js
+function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
+  document.querySelectorAll(rootSelector).forEach((dropdown) => {
+    const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
+    const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
+    const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
+    const menuItems = menu.querySelectorAll("li[role='option']");
+    const menuId = menu.id;
+    let activeIndex = -1;
+    menuItems.forEach((item, index) => {
+      item.id = `${menuId}-item-${index}`;
+    });
+    const toggleMenu = (show) => {
+      const isCurrentlyShown = dropdown.classList.contains("show");
+      const isShown = show !== void 0 ? show : !isCurrentlyShown;
+      if (isShown === isCurrentlyShown) {
+        return;
+      }
+      dropdown.classList.toggle("show", isShown);
+      trigger.setAttribute("aria-expanded", isShown);
+      if (isShown) {
+        input.focus();
+      } else {
+        input.blur();
+        removeHighlight();
+        activeIndex = -1;
+        input.removeAttribute("aria-activedescendant");
+      }
+    };
+    const filterItems = () => {
+      const filterValue = input.value.toLowerCase();
+      let hasVisibleItems = false;
+      activeIndex = -1;
+      removeHighlight();
+      input.removeAttribute("aria-activedescendant");
+      const activeItem = menu.querySelector("li[role='option'].selected");
+      if (activeItem && input.value !== activeItem.textContent.trim()) {
+        activeItem.classList.remove("selected");
+      }
+      menuItems.forEach((item) => {
+        const itemText = item.textContent.toLowerCase();
+        const isMatch = itemText.includes(filterValue);
+        item.classList.toggle("hidden", !isMatch);
+        if (isMatch) hasVisibleItems = true;
+      });
+      if (!dropdown.classList.contains("show") && hasVisibleItems) {
+        toggleMenu(true);
+      }
+    };
+    const selectItem = (item) => {
+      const itemText = item.textContent.trim();
+      input.value = itemText;
+      menuItems.forEach((li) => {
+        li.classList.remove("selected");
+      });
+      if (item) {
+        item.classList.add("selected");
+        dropdown.dispatchEvent(
+          new CustomEvent("dropdown:changed", {
+            detail: { value: itemText }
+          })
+        );
+      }
+      toggleMenu(false);
+    };
+    const setHighlight = (index) => {
+      removeHighlight();
+      const visibleItems = menu.querySelectorAll(
+        "li[role='option']:not(.hidden)"
+      );
+      if (visibleItems.length === 0) return;
+      if (index < 0) index = 0;
+      else if (index >= visibleItems.length) index = visibleItems.length - 1;
+      const itemToHighlight = visibleItems[index];
+      if (itemToHighlight) {
+        itemToHighlight.classList.add("highlighted");
+        input.setAttribute("aria-activedescendant", itemToHighlight.id);
+        itemToHighlight.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+        activeIndex = index;
+      }
+    };
+    const removeHighlight = () => {
+      menuItems.forEach((item) => item.classList.remove("highlighted"));
+    };
+    trigger.addEventListener("click", () => {
+      toggleMenu();
+    });
+    input.addEventListener("input", filterItems);
+    menu.addEventListener("click", (e) => {
+      const option = e.target.closest("li[role='option']");
+      if (option) {
+        e.preventDefault();
+        selectItem(option);
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!dropdown.contains(e.target)) {
+        toggleMenu(false);
+      }
+    });
+    input.addEventListener("keydown", (e) => {
+      const { key } = e;
+      const isMenuOpen = dropdown.classList.contains("show");
+      switch (key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isMenuOpen) {
+            toggleMenu(true);
+          }
+          setHighlight(activeIndex + 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isMenuOpen) {
+            setHighlight(activeIndex - 1);
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          const firstVisible = menu.querySelector(
+            "li[role='option']:not(.hidden)"
+          );
+          const activeItem = menu.querySelector(".highlighted");
+          if (isMenuOpen && activeItem) {
+            selectItem(activeItem);
+          } else if (isMenuOpen && firstVisible) {
+            toggleMenu(false);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          toggleMenu(false);
+          break;
+        case "Tab":
+          toggleMenu(false);
+          break;
+      }
+    });
+  });
+}
+
 // src/js/components/stateful/range-datepicker.js
 function initRangeDatepicker() {
   document.querySelectorAll(".ina-ss-range-datepicker").forEach((rangeDatepicker) => {
@@ -2124,6 +2469,114 @@ if (typeof window !== void 0) {
   });
 }
 
+// src/js/components/stateful/chip.js
+function initChip(rootSelector = `.${PREFIX}-chip`) {
+  const chips = document.querySelectorAll(rootSelector);
+  chips.forEach((container) => {
+    if (container.__inaChipInitialized) return;
+    const showCustomization = container.getAttribute("data-show-customization") === "true";
+    const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
+    let selectedValue = container.getAttribute("data-selected") || "";
+    const list = container.querySelector(`.${PREFIX}-chip__list`);
+    const items = list ? list.querySelectorAll(`.${PREFIX}-chip__item`) : [];
+    let customFieldContainer = container.querySelector(
+      `.${PREFIX}-chip__custom-field`
+    );
+    const updateUI = () => {
+      items.forEach((item) => {
+        const itemValue = item.getAttribute("data-value");
+        const isSelected = itemValue === selectedValue;
+        if (isSelected) {
+          item.classList.add(`${PREFIX}-chip__item--selected`);
+        } else {
+          item.classList.remove(`${PREFIX}-chip__item--selected`);
+        }
+      });
+      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 toggleBtn = Array.from(items).find(
+          (i) => i.textContent.trim() === customizationLabel
+        );
+        const showInput = toggleBtn && selectedValue === toggleBtn.getAttribute("data-value") || !isStandard && selectedValue !== "";
+        if (showInput) {
+          if (!customFieldContainer) {
+            customFieldContainer = document.createElement("div");
+            customFieldContainer.className = `${PREFIX}-chip__custom-field`;
+            container.appendChild(customFieldContainer);
+          }
+          let input = customFieldContainer.querySelector(
+            `.${PREFIX}-chip__input`
+          );
+          if (!input) {
+            customFieldContainer.innerHTML = `
+               <div class="${PREFIX}-text-field ${PREFIX}-text-field--size-medium ${PREFIX}-text-field--variant-outline ${PREFIX}-chip__input">
+                 <div class="${PREFIX}-text-field__wrapper">
+                   <input type="text" class="${PREFIX}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
+                 </div>
+               </div>
+             `;
+            input = customFieldContainer.querySelector("input");
+            input.addEventListener("blur", (e) => {
+              const val = e.target.value;
+              if (val.trim()) {
+                handleSelect(val);
+              } else {
+                handleSelect("");
+              }
+            });
+            input.addEventListener("keydown", (e) => {
+              if (e.key === "Enter") {
+                handleSelect(e.target.value);
+                e.target.blur();
+              }
+            });
+          } else {
+            const inputEl = customFieldContainer.querySelector("input");
+            if (inputEl && document.activeElement !== inputEl) {
+              inputEl.value = !isStandard ? selectedValue : "";
+            }
+          }
+          customFieldContainer.style.display = "block";
+        } else {
+          if (customFieldContainer) {
+            customFieldContainer.style.display = "none";
+          }
+        }
+      }
+    };
+    const handleSelect = (val) => {
+      selectedValue = val;
+      container.setAttribute("data-selected", val);
+      updateUI();
+      container.dispatchEvent(
+        new CustomEvent("chip:select", {
+          detail: { value: val },
+          bubbles: true
+        })
+      );
+    };
+    items.forEach((item) => {
+      item.addEventListener("click", (e) => {
+        const val = item.getAttribute("data-value");
+        const label = item.textContent.trim();
+        if (showCustomization && label === customizationLabel) {
+          handleSelect(val);
+        } else {
+          handleSelect(val);
+        }
+      });
+    });
+    updateUI();
+    container.__inaChipInitialized = true;
+  });
+}
+
 // src/js/index.js
 var PREFIX = "ina";
 function initAll() {
@@ -2132,7 +2585,10 @@ function initAll() {
   initButtonGroup();
   initCheckbox();
   initDatepicker();
-  initDropdown();
+  initDrawer();
+  initBasicDropdown();
+  initActionDropdown();
+  initSelectDropdown();
   initFileUpload();
   initSingleFileUpload();
   initFileUploadBase();
@@ -2143,6 +2599,7 @@ function initAll() {
   initTab();
   initToggle();
   initTimepicker();
+  initChip();
 }
 export {
   PREFIX,

package/package.json

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