@idds/js 1.0.66 → 1.0.68

package/dist/index.js

@@ -906,287 +906,261 @@ function initDrawer(rootSelector = `.${PREFIX2}-drawer`) {
 
 // src/js/components/stateful/basic-dropdown.js
 var PREFIX3 = "ina";
-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) {
-        if (activeClass) {
-          panel.classList.add(activeClass);
-        }
-        panel.style.removeProperty("display");
-        if (rootSelector.includes("basic")) {
-          const btn = trigger.querySelector(
-            `.${PREFIX3}-basic-dropdown__trigger-button`
-          );
-          if (btn)
-            btn.classList.add(`${PREFIX3}-basic-dropdown__trigger-button--open`);
-        } else {
-          trigger.classList.add(`${PREFIX3}-action-dropdown__trigger--open`);
-        }
-      } else {
-        if (activeClass) {
-          panel.classList.remove(activeClass);
-        } else {
-          panel.style.display = "none";
-        }
-        if (rootSelector.includes("basic")) {
-          const btn = trigger.querySelector(
-            `.${PREFIX3}-basic-dropdown__trigger-button`
-          );
-          if (btn)
-            btn.classList.remove(
-              `${PREFIX3}-basic-dropdown__trigger-button--open`
-            );
-        } else {
-          trigger.classList.remove(`${PREFIX3}-action-dropdown__trigger--open`);
-        }
-      }
-    };
-    if (!activeClass) {
-      panel.style.display = "none";
+function closeAllDropdowns(except = null) {
+  const openDropdowns = document.querySelectorAll(`[aria-expanded="true"]`);
+  openDropdowns.forEach((trigger) => {
+    if (trigger === except) return;
+    if (trigger.closest(`.${PREFIX3}-basic-dropdown`) || trigger.closest(`.${PREFIX3}-action-dropdown`)) {
+      toggleDropdown(trigger, false);
+    }
+  });
+}
+function toggleDropdown(trigger, forceState) {
+  const root = trigger.closest(`.${PREFIX3}-basic-dropdown`) || trigger.closest(`.${PREFIX3}-action-dropdown`);
+  if (!root) return;
+  const isBasic = root.classList.contains(`${PREFIX3}-basic-dropdown`);
+  const panel = root.querySelector(
+    isBasic ? `.${PREFIX3}-basic-dropdown__panel` : `.${PREFIX3}-action-dropdown__menu`
+  );
+  if (!panel) return;
+  const currentState = trigger.getAttribute("aria-expanded") === "true";
+  const newState = forceState !== void 0 ? forceState : !currentState;
+  trigger.setAttribute("aria-expanded", newState);
+  if (isBasic) {
+    const btn = trigger.querySelector(
+      `.${PREFIX3}-basic-dropdown__trigger-button`
+    );
+    if (newState) {
+      if (btn)
+        btn.classList.add(`${PREFIX3}-basic-dropdown__trigger-button--open`);
+      panel.style.removeProperty("display");
     } else {
-      panel.classList.remove(activeClass);
+      if (btn)
+        btn.classList.remove(`${PREFIX3}-basic-dropdown__trigger-button--open`);
+      panel.style.display = "none";
+    }
+  } else {
+    const visibleClass = `${PREFIX3}-action-dropdown__menu--visible`;
+    const triggerOpenClass = `${PREFIX3}-action-dropdown__trigger--open`;
+    if (newState) {
+      trigger.classList.add(triggerOpenClass);
+      panel.classList.add(visibleClass);
       panel.style.removeProperty("display");
+    } else {
+      trigger.classList.remove(triggerOpenClass);
+      panel.classList.remove(visibleClass);
     }
-    trigger.addEventListener("click", (e) => {
+  }
+}
+function initBasicDropdown() {
+  if (window.__inaBasicDropdownInitialized) return;
+  document.addEventListener("click", (e) => {
+    const target = e.target;
+    const trigger = target.closest(`.${PREFIX3}-basic-dropdown__trigger`) || target.closest(`.${PREFIX3}-action-dropdown__trigger`);
+    if (trigger) {
+      if (trigger.tagName === "BUTTON") e.preventDefault();
+      const root = trigger.closest(`.${PREFIX3}-basic-dropdown`) || trigger.closest(`.${PREFIX3}-action-dropdown`);
+      if (trigger.disabled || trigger.classList.contains(
+        `${PREFIX3}-action-dropdown__trigger--disabled`
+      ))
+        return;
+      closeAllDropdowns(trigger);
+      toggleDropdown(trigger);
       e.stopPropagation();
-      toggle();
-    });
-    document.addEventListener("click", (e) => {
-      if (!dropdown.contains(e.target)) {
-        toggle(false);
-      }
-    });
-    dropdown.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") {
-        toggle(false);
+      return;
+    }
+    const item = target.closest(`.${PREFIX3}-action-dropdown__item`);
+    if (item) {
+      if (!item.disabled && !item.classList.contains(`${PREFIX3}-action-dropdown__item--disabled`)) {
+        const root = item.closest(`.${PREFIX3}-action-dropdown`);
+        const trigger2 = root?.querySelector(
+          `.${PREFIX3}-action-dropdown__trigger`
+        );
+        if (trigger2) toggleDropdown(trigger2, false);
       }
-    });
-    if (rootSelector.includes("action")) {
-      panel.addEventListener("click", (e) => {
-        const item = e.target.closest(`.${PREFIX3}-action-dropdown__item`);
-        if (item && !item.disabled) {
-          toggle(false);
-        }
-      });
+      return;
+    }
+    if (target.closest(`.${PREFIX3}-basic-dropdown__panel`) || target.closest(`.${PREFIX3}-action-dropdown__menu`)) {
+      return;
     }
-    dropdown.__inaDropdownInitialized = true;
+    closeAllDropdowns();
   });
-};
-function initBasicDropdown() {
-  handleDropdownLogic(
-    `.${PREFIX3}-basic-dropdown`,
-    `.${PREFIX3}-basic-dropdown__trigger`,
-    `.${PREFIX3}-basic-dropdown__panel`
-  );
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      closeAllDropdowns();
+    }
+  });
+  window.__inaBasicDropdownInitialized = true;
 }
 function initActionDropdown() {
-  handleDropdownLogic(
-    `.${PREFIX3}-action-dropdown`,
-    `.${PREFIX3}-action-dropdown__trigger`,
-    `.${PREFIX3}-action-dropdown__menu`,
-    `${PREFIX3}-action-dropdown__menu--visible`
-  );
+  initBasicDropdown();
 }
 
 // src/js/components/stateful/select-dropdown.js
 var PREFIX4 = "ina";
-function initSelectDropdown(rootSelector = `.${PREFIX4}-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(
-      `.${PREFIX4}-select-dropdown__trigger`
-    );
-    const input = dropdown.querySelector(
-      `.${PREFIX4}-select-dropdown__trigger-input`
-    );
-    const panel = dropdown.querySelector(`.${PREFIX4}-select-dropdown__panel`);
-    const optionsContainer = dropdown.querySelector(
-      `.${PREFIX4}-select-dropdown__options`
-    );
-    if (!trigger || !panel) return;
-    let isOpen = false;
-    let selectedValues = [];
-    const options = panel.querySelectorAll(
-      `.${PREFIX4}-select-dropdown__option`
-    );
-    options.forEach((opt) => {
-      if (opt.classList.contains(
-        `${PREFIX4}-select-dropdown__option--selected-single`
-      ) || opt.classList.contains(
-        `${PREFIX4}-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) {
+function getDropdownState(root) {
+  return {
+    isOpen: root.getAttribute("data-state") === "open",
+    values: JSON.parse(root.getAttribute("data-values") || "[]"),
+    isMultiple: root.getAttribute("data-multiple") === "true",
+    isSearchable: root.getAttribute("data-searchable") !== "false"
+  };
+}
+function setDropdownState(root, newState) {
+  if (newState.isOpen !== void 0) {
+    root.setAttribute("data-state", newState.isOpen ? "open" : "closed");
+    const trigger = root.querySelector(`.${PREFIX4}-select-dropdown__trigger`);
+    if (trigger) trigger.setAttribute("aria-expanded", newState.isOpen);
+    const panel = root.querySelector(`.${PREFIX4}-select-dropdown__panel`);
+    if (panel) {
+      if (newState.isOpen) {
         panel.style.removeProperty("display");
-        if (input) input.focus();
       } else {
         panel.style.display = "none";
       }
-    };
-    panel.style.display = "none";
-    function getOptionValue(option) {
-      return option.getAttribute("data-value");
     }
-    function getOptionLabel(option) {
-      return option.textContent.trim();
+  }
+  if (newState.values !== void 0) {
+    root.setAttribute("data-values", JSON.stringify(newState.values));
+    updateTriggerUI(root, newState.values, newState.isMultiple);
+  }
+}
+function closeAllSelectDropdowns(exceptRoot = null) {
+  document.querySelectorAll(`.${PREFIX4}-select-dropdown[data-state="open"]`).forEach((root) => {
+    if (root !== exceptRoot) {
+      setDropdownState(root, { isOpen: false });
+    }
+  });
+}
+function updateTriggerUI(root, values, isMultiple) {
+  const trigger = root.querySelector(`.${PREFIX4}-select-dropdown__trigger`);
+  const input = trigger.querySelector("input");
+  const textSpan = trigger.querySelector(
+    `.${PREFIX4}-select-dropdown__trigger-text`
+  );
+  const placeholder = input ? input.getAttribute("placeholder") : textSpan ? textSpan.getAttribute("data-placeholder") : "Select...";
+  const options = root.querySelectorAll(`.${PREFIX4}-select-dropdown__option`);
+  const getLabel = (val) => {
+    const opt = Array.from(options).find(
+      (o) => o.getAttribute("data-value") === val
+    );
+    return opt ? opt.textContent.trim() : val;
+  };
+  let label = "";
+  if (values.length === 0) {
+  } else if (isMultiple) {
+    label = values.length > 3 ? `${values.length} data terpilih` : values.map(getLabel).join(", ");
+  } else {
+    label = getLabel(values[0]);
+  }
+  if (input) {
+    input.value = !isMultiple && values.length > 0 && root.getAttribute("data-state") !== "open" ? label : "";
+    if (values.length > 0) {
+      input.placeholder = label;
+    } else {
+      input.placeholder = "Select...";
     }
-    function updateTriggerUI() {
-      const triggerText = trigger.querySelector(
-        `.${PREFIX4}-select-dropdown__trigger-text`
+  } else if (textSpan) {
+    textSpan.textContent = values.length > 0 ? label : placeholder;
+    textSpan.classList.toggle(
+      `${PREFIX4}-select-dropdown__trigger-text--placeholder`,
+      values.length === 0
+    );
+  }
+  options.forEach((opt) => {
+    const val = opt.getAttribute("data-value");
+    const isSelected = values.includes(val);
+    if (isMultiple) {
+      opt.classList.toggle(
+        `${PREFIX4}-select-dropdown__option--selected-multiple`,
+        isSelected
       );
-      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(
-            `${PREFIX4}-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...";
+      const cb = opt.querySelector(
+        `.${PREFIX4}-select-dropdown__option-checkbox`
+      );
+      if (cb)
+        cb.classList.toggle(
+          `${PREFIX4}-select-dropdown__option-checkbox--checked`,
+          isSelected
+        );
+    } else {
+      opt.classList.toggle(
+        `${PREFIX4}-select-dropdown__option--selected-single`,
+        isSelected
+      );
+    }
+  });
+}
+function initSelectDropdown() {
+  if (window.__inaSelectDropdownInitialized) return;
+  document.addEventListener("click", (e) => {
+    const target = e.target;
+    const trigger = target.closest(`.${PREFIX4}-select-dropdown__trigger`);
+    const option = target.closest(`.${PREFIX4}-select-dropdown__option`);
+    const root = target.closest(`.${PREFIX4}-select-dropdown`);
+    if (trigger) {
+      if (root) {
+        const state = getDropdownState(root);
+        if (target.tagName === "INPUT" && state.isOpen) {
+          return;
         }
-        if (input) {
-          if (!isOpen) input.value = label;
-        } else if (triggerText) {
-          triggerText.textContent = label;
-          triggerText.classList.toggle(
-            `${PREFIX4}-select-dropdown__trigger-text--placeholder`,
-            !val
-          );
+        closeAllSelectDropdowns(root);
+        setDropdownState(root, { isOpen: !state.isOpen });
+        if (!state.isOpen) {
+          const input = trigger.querySelector("input");
+          if (input) input.focus();
         }
       }
+      return;
     }
-    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(
-            `${PREFIX4}-select-dropdown__option--selected-multiple`
-          );
-          const checkbox = option.querySelector(
-            `.${PREFIX4}-select-dropdown__option-checkbox`
-          );
-          if (checkbox)
-            checkbox.classList.remove(
-              `${PREFIX4}-select-dropdown__option-checkbox--checked`
-            );
+    if (option && root) {
+      const state = getDropdownState(root);
+      const val = option.getAttribute("data-value");
+      let newValues = [...state.values];
+      if (state.isMultiple) {
+        if (newValues.includes(val)) {
+          newValues = newValues.filter((v) => v !== val);
         } else {
-          selectedValues.push(val);
-          option.classList.add(
-            `${PREFIX4}-select-dropdown__option--selected-multiple`
-          );
-          const checkbox = option.querySelector(
-            `.${PREFIX4}-select-dropdown__option-checkbox`
-          );
-          if (checkbox)
-            checkbox.classList.add(
-              `${PREFIX4}-select-dropdown__option-checkbox--checked`
-            );
+          newValues.push(val);
         }
+        setDropdownState(root, { values: newValues });
       } else {
-        selectedValues = [val];
-        options.forEach((o) => {
-          o.classList.remove(
-            `${PREFIX4}-select-dropdown__option--selected-single`
-          );
-        });
-        option.classList.add(
-          `${PREFIX4}-select-dropdown__option--selected-single`
-        );
-        toggle(false);
+        newValues = [val];
+        setDropdownState(root, { values: newValues, isOpen: false });
       }
-      updateTriggerUI();
-      dropdown.dispatchEvent(
+      root.dispatchEvent(
         new CustomEvent("change", {
-          detail: { value: isMultiple ? selectedValues : selectedValues[0] }
+          detail: {
+            value: state.isMultiple ? newValues : newValues[0]
+          }
         })
       );
+      e.stopPropagation();
+      return;
     }
-    trigger.addEventListener("click", (e) => {
-      if (e.target !== input) {
-        toggle();
-      } else if (!isOpen) {
-        toggle(true);
-      }
-    });
-    if (input) {
-      input.addEventListener("input", (e) => {
+    if (!root) {
+      closeAllSelectDropdowns();
+    }
+  });
+  document.addEventListener("input", (e) => {
+    if (e.target.matches(`.${PREFIX4}-select-dropdown__trigger-input`)) {
+      const root = e.target.closest(`.${PREFIX4}-select-dropdown`);
+      if (root) {
         const term = e.target.value.toLowerCase();
-        if (!isOpen) toggle(true);
+        const options = root.querySelectorAll(
+          `.${PREFIX4}-select-dropdown__option`
+        );
+        if (root.getAttribute("data-state") !== "open") {
+          setDropdownState(root, { isOpen: true });
+        }
         options.forEach((opt) => {
-          const label = getOptionLabel(opt).toLowerCase();
-          const match = label.includes(term);
-          opt.style.display = match ? "" : "none";
+          const text = opt.textContent.trim().toLowerCase();
+          opt.style.display = text.includes(term) ? "" : "none";
         });
-      });
-    }
-    options.forEach((opt) => {
-      opt.addEventListener("click", (e) => {
-        e.stopPropagation();
-        selectOption(opt);
-      });
-    });
-    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;
   });
+  window.__inaSelectDropdownInitialized = true;
 }
 
 // src/js/components/stateful/file-upload.js

package/package.json

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