@kupola/kupola 1.6.2 → 1.6.4

package/dist/kupola.esm.js

@@ -2269,13 +2269,13 @@ class _r {
     const e = t.className;
     if (typeof e == "string") {
       for (const s of this._cssClasses)
-        if (e.includes(s)) {
-          const n = s.replace("ds-", ""), r = this.initializers.get(n) || this.initializers.get(s);
-          if (r) {
+        if (new RegExp(`(^|\\s)${s}(\\s|$)`).test(e)) {
+          const r = s.replace("ds-", ""), a = this.initializers.get(r) || this.initializers.get(s);
+          if (a) {
             try {
-              await r(t), this.processedElements.add(t);
-            } catch (a) {
-              console.error(`[ComponentInitializerRegistry] Error initializing "${n}":`, a);
+              await a(t), this.processedElements.add(t);
+            } catch (o) {
+              console.error(`[ComponentInitializerRegistry] Error initializing "${r}":`, o);
             }
             return;
           }
@@ -2302,13 +2302,13 @@ class _r {
     const e = t.className;
     if (typeof e == "string") {
       for (const s of this._cssClasses)
-        if (e.includes(s)) {
-          const n = s.replace("ds-", ""), r = this.cleanupFunctions.get(n) || this.cleanupFunctions.get(s);
-          if (r) {
+        if (new RegExp(`(^|\\s)${s}(\\s|$)`).test(e)) {
+          const r = s.replace("ds-", ""), a = this.cleanupFunctions.get(r) || this.cleanupFunctions.get(s);
+          if (a) {
             try {
-              r(t);
-            } catch (a) {
-              console.error(`[ComponentInitializerRegistry] Error cleaning up "${n}":`, a);
+              a(t);
+            } catch (o) {
+              console.error(`[ComponentInitializerRegistry] Error cleaning up "${r}":`, o);
             }
             this.processedElements.delete(t);
             return;
@@ -2958,7 +2958,7 @@ class Er {
     !this.trigger || !this.menu || this.element.__kupolaInitialized || (this._itemClickHandler = (t) => {
       t.stopPropagation();
       const e = t.currentTarget;
-      e.classList.contains("is-disabled") || e.classList.contains("ds-dropdown__divider") || (this.menu.querySelectorAll(".ds-dropdown__item").forEach((s) => s.classList.remove("is-selected")), e.classList.add("is-selected"), this.triggerText && !e.hasAttribute("data-no-update-trigger") && (this.triggerText.textContent = e.textContent.trim()), this.element.setAttribute("data-value", e.getAttribute("data-value") || ""), this.onSelect && this.onSelect({ item: e, value: e.getAttribute("data-value"), text: e.textContent.trim() }), this.closeOnClick && (this.hideMenu(), this.trigger.focus()));
+      e.classList.contains("is-disabled") || e.classList.contains("ds-dropdown__divider") || (this.menu.querySelectorAll(".ds-dropdown__item").forEach((s) => s.classList.remove("is-selected")), e.classList.add("is-selected"), this.triggerText && !e.hasAttribute("data-no-update-trigger") && (this.triggerText.textContent = e.textContent.trim()), this.element.setAttribute("data-value", e.getAttribute("data-value") || ""), this.onSelect && this.onSelect({ item: e, value: e.getAttribute("data-value"), text: e.textContent.trim() }), this.closeOnClick !== !1 && (this.hideMenu(), this.trigger && this.trigger.focus()));
     }, this._bindMenuItems(), this._triggerClickHandler = (t) => {
       t.stopPropagation(), !this.disabled && this.toggleMenu();
     }, this._triggerMouseenterHandler = () => {
@@ -2998,12 +2998,14 @@ class Er {
     }, this.triggerMode === "hover" ? (this.trigger.addEventListener("mouseenter", this._triggerMouseenterHandler), this.trigger.addEventListener("mouseleave", this._triggerMouseleaveHandler), this.menu.addEventListener("mouseenter", this._mouseenterHandler), this.menu.addEventListener("mouseleave", this._mouseleaveHandler)) : this.trigger.addEventListener("click", this._triggerClickHandler), this._triggerKeydownHandler = (t) => {
       this.disabled || (t.key === "Enter" || t.key === " " || t.key === "ArrowDown") && (t.preventDefault(), this.showMenu());
     }, this.trigger.addEventListener("keydown", this._triggerKeydownHandler), document.addEventListener("keydown", this._keydownHandler), this._documentClickHandler = (t) => {
-      !this.element.contains(t.target) && !this.menu.contains(t.target) && this.hideMenu();
+      if (!this.isOpen) return;
+      const e = this.element.contains(t.target), s = this.menu && this.menu.contains(t.target);
+      !e && !s && this.hideMenu();
     }, this._documentClickListener = H.on(document, "click", this._documentClickHandler, { scope: this.scope }), this.menu.style.display = "none", this.element.__kupolaInitialized = !0);
   }
   _bindMenuItems() {
     this.menu.querySelectorAll(".ds-dropdown__item").forEach((t) => {
-      t.addEventListener("click", (e) => this._itemClickHandler(e)), t._dropdownItemClickHandler = (e) => this._itemClickHandler(e);
+      t._dropdownItemClickHandler = (e) => this._itemClickHandler(e), t.addEventListener("click", t._dropdownItemClickHandler);
     });
   }
   _getNavigableItems() {
@@ -3015,14 +3017,14 @@ class Er {
   _calculatePosition() {
     if (!this.autoPosition)
       return;
-    const t = this.element.getBoundingClientRect(), e = this.menu.getBoundingClientRect(), s = window.innerHeight, n = window.innerWidth;
+    const t = this.element.getBoundingClientRect(), e = window.innerHeight, s = window.innerWidth;
     if (this.menu.classList.remove("ds-dropdown--top", "ds-dropdown--right", "ds-dropdown--dropup"), this.appendToBody) {
-      this.menu.style.width = `${Math.max(t.width, e.width)}px`;
-      const r = s - t.bottom, a = t.top;
-      r < e.height && a > r ? (this.menu.style.top = `${t.top - e.height - 4}px`, this.menu.style.bottom = "auto") : (this.menu.style.top = `${t.bottom + 4}px`, this.menu.style.bottom = "auto"), t.left + e.width > n ? (this.menu.style.left = `${t.right - Math.max(t.width, e.width)}px`, this.menu.style.right = "auto") : (this.menu.style.left = `${t.left}px`, this.menu.style.right = "auto");
+      this.menu.style.width = `${t.width}px`;
+      const n = this.menu.getBoundingClientRect(), r = e - t.bottom, a = t.top;
+      r < n.height && a > r ? (this.menu.style.top = `${t.top - n.height - 4}px`, this.menu.style.bottom = "auto") : (this.menu.style.top = `${t.bottom + 4}px`, this.menu.style.bottom = "auto"), t.left + n.width > s ? (this.menu.style.left = `${t.right - n.width}px`, this.menu.style.right = "auto") : (this.menu.style.left = `${t.left}px`, this.menu.style.right = "auto");
     } else {
-      const r = s - t.bottom, a = t.top;
-      r < e.height && a > r ? (this.menu.classList.add("ds-dropdown--dropup"), this.menu.style.top = "auto", this.menu.style.bottom = "100%", this.menu.style.marginBottom = "4px") : (this.menu.style.top = "100%", this.menu.style.bottom = "auto", this.menu.style.marginBottom = "0"), t.left + e.width > n ? (this.menu.style.left = "auto", this.menu.style.right = "0") : (this.menu.style.left = "0", this.menu.style.right = "auto");
+      const n = e - t.bottom, r = t.top;
+      n < menuRect.height && r > n ? (this.menu.classList.add("ds-dropdown--dropup"), this.menu.style.top = "auto", this.menu.style.bottom = "100%", this.menu.style.marginBottom = "4px") : (this.menu.style.top = "100%", this.menu.style.bottom = "auto", this.menu.style.marginBottom = "0"), t.left + menuRect.width > s ? (this.menu.style.left = "auto", this.menu.style.right = "0") : (this.menu.style.left = "0", this.menu.style.right = "auto");
     }
   }
   showMenu() {
@@ -3033,12 +3035,12 @@ class Er {
   }
   _appendMenuToBody() {
     if (!this.menu) return;
-    this._originalParent = this.menu.parentNode, this._originalPosition = this.menu.style.position, this._originalTop = this.menu.style.top, this._originalLeft = this.menu.style.left, this._originalRight = this.menu.style.right, this._originalBottom = this.menu.style.bottom, this._originalMarginBottom = this.menu.style.marginBottom, this._originalWidth = this.menu.style.width, this._originalTransform = this.menu.style.transform, this._originalZIndex = this.menu.style.zIndex;
-    const t = W().dropdown;
-    this.menu.style.position = "fixed", this.menu.style.zIndex = t, this.menu.style.transform = "translateZ(0)", document.body.appendChild(this.menu);
+    this._originalParent = this.menu.parentNode, this._originalPosition = this.menu.style.position, this._originalTop = this.menu.style.top, this._originalLeft = this.menu.style.left, this._originalRight = this.menu.style.right, this._originalBottom = this.menu.style.bottom, this._originalMarginBottom = this.menu.style.marginBottom, this._originalWidth = this.menu.style.width, this._originalTransform = this.menu.style.transform, this._originalZIndex = this.menu.style.zIndex, this._originalDisplay = this.menu.style.display;
+    const t = this.element.getBoundingClientRect(), e = W().dropdown;
+    this.menu.style.position = "fixed", this.menu.style.width = `${t.width}px`, this.menu.style.zIndex = e, this.menu.style.transform = "translateZ(0)", document.body.appendChild(this.menu);
   }
   _restoreMenuFromBody() {
-    !this.menu || !this._originalParent || (this._originalParent.appendChild(this.menu), this.menu.style.position = this._originalPosition || "", this.menu.style.top = this._originalTop || "", this.menu.style.left = this._originalLeft || "", this.menu.style.right = this._originalRight || "", this.menu.style.bottom = this._originalBottom || "", this.menu.style.marginBottom = this._originalMarginBottom || "", this.menu.style.width = this._originalWidth || "", this.menu.style.zIndex = this._originalZIndex || "", this.menu.style.transform = this._originalTransform || "", this._originalParent = null);
+    !this.menu || !this._originalParent || (this._originalParent.appendChild(this.menu), this.menu.style.position = this._originalPosition || "", this.menu.style.top = this._originalTop || "", this.menu.style.left = this._originalLeft || "", this.menu.style.right = this._originalRight || "", this.menu.style.bottom = this._originalBottom || "", this.menu.style.marginBottom = this._originalMarginBottom || "", this.menu.style.width = this._originalWidth || "", this.menu.style.zIndex = this._originalZIndex || "", this.menu.style.transform = this._originalTransform || "", this.menu.style.display = this._originalDisplay || "", this._originalParent = null, console.log("[Dropdown] Menu restored from body"));
   }
   _addScrollListener() {
     this._scrollHandler = () => {
@@ -3059,17 +3061,21 @@ class Er {
   }
   // Update menu items dynamically
   setItems(t) {
-    this.menu.querySelectorAll(".ds-dropdown__item").forEach((e) => {
+    this._itemClickHandler || (this._itemClickHandler = (e) => {
+      e.stopPropagation();
+      const s = e.currentTarget;
+      s.classList.contains("is-disabled") || s.classList.contains("ds-dropdown__divider") || (this.menu.querySelectorAll(".ds-dropdown__item").forEach((n) => n.classList.remove("is-selected")), s.classList.add("is-selected"), this.triggerText && !s.hasAttribute("data-no-update-trigger") && (this.triggerText.textContent = s.textContent.trim()), this.element.setAttribute("data-value", s.getAttribute("data-value") || ""), this.onSelect && this.onSelect({ item: s, value: s.getAttribute("data-value"), text: s.textContent.trim() }), this.closeOnClick !== !1 && (this.hideMenu(), this.trigger && this.trigger.focus()));
+    }), this.menu.querySelectorAll(".ds-dropdown__item").forEach((e) => {
       e._dropdownItemClickHandler && e.removeEventListener("click", e._dropdownItemClickHandler);
-    }), this.menu.innerHTML = "", t.forEach((e) => {
+    }), this.menu.innerHTML = "", t.forEach((e, s) => {
       if (e.type === "divider") {
-        const s = document.createElement("div");
-        s.className = "ds-dropdown__divider", this.menu.appendChild(s);
+        const n = document.createElement("div");
+        n.className = "ds-dropdown__divider", this.menu.appendChild(n);
       } else {
-        const s = document.createElement("div");
-        s.className = "ds-dropdown__item" + (e.disabled ? " is-disabled" : "") + (e.active ? " is-selected" : ""), s.textContent = e.text || e.label || "", e.value !== void 0 && s.setAttribute("data-value", e.value), e.icon && (s.innerHTML = e.icon + s.innerHTML), e.disabled && s.classList.add("is-disabled"), this.menu.appendChild(s);
+        const n = document.createElement("div");
+        n.className = "ds-dropdown__item" + (e.disabled ? " is-disabled" : "") + (e.active ? " is-selected" : ""), n.textContent = e.text || e.label || "", e.value !== void 0 && n.setAttribute("data-value", e.value), e.icon && (n.innerHTML = e.icon + n.innerHTML), e.disabled && n.classList.add("is-disabled"), n._dropdownItemClickHandler = (r) => this._itemClickHandler(r), n.addEventListener("click", n._dropdownItemClickHandler), this.menu.appendChild(n);
       }
-    }), this._bindMenuItems();
+    });
   }
   destroy() {
     this.element.__kupolaInitialized && (clearTimeout(this._hoverTimer), clearTimeout(this._hoverLeaveTimer), this.trigger && (this._triggerClickHandler && this.trigger.removeEventListener("click", this._triggerClickHandler), this._triggerMouseenterHandler && this.trigger.removeEventListener("mouseenter", this._triggerMouseenterHandler), this._triggerMouseleaveHandler && this.trigger.removeEventListener("mouseleave", this._triggerMouseleaveHandler), this._triggerKeydownHandler && this.trigger.removeEventListener("keydown", this._triggerKeydownHandler)), this.menu && (this.menu.querySelectorAll(".ds-dropdown__item").forEach((t) => {
@@ -3078,6 +3084,7 @@ class Er {
   }
 }
 function Jt(i, t) {
+  i._kupolaDropdown && i._kupolaDropdown.destroy();
   const e = new Er(i, t);
   e.init(), i._kupolaDropdown = e;
 }
@@ -3127,7 +3134,9 @@ class wr {
             break;
         }
     }, document.addEventListener("keydown", this._keydownHandler), this._documentClickHandler = (t) => {
-      !this.element.contains(t.target) && !this.optionsEl.contains(t.target) && this.hideOptions();
+      if (!this.isOpen) return;
+      const e = this.element.contains(t.target), s = this.optionsEl && this.optionsEl.contains(t.target);
+      !e && !s && this.hideOptions();
     }, this._documentClickListener = H.on(document, "click", this._documentClickHandler, { scope: this.scope }), this._restoreSelectedState(), this.optionsEl.style.display = "none", this.element.__kupolaInitialized = !0);
   }
   _collectOptions() {
@@ -3175,11 +3184,17 @@ class wr {
     }), this.focusIndex = -1;
   }
   _renderRemoteOptions(t) {
-    this.optionsEl.querySelectorAll(".ds-select__option, .ds-select__item").forEach((e) => {
+    this._optionClickHandler || (this._optionClickHandler = (e) => {
+      e.stopPropagation();
+      const s = e.currentTarget;
+      if (s.classList.contains("is-disabled")) return;
+      const n = s.getAttribute("data-value");
+      this.multiple ? this._toggleMultiOption(n, s) : this._selectSingleOption(n, s);
+    }), this.optionsEl.querySelectorAll(".ds-select__option, .ds-select__item").forEach((e) => {
       e._selectOptionClickHandler && e.removeEventListener("click", e._selectOptionClickHandler), e.remove();
     }), t.forEach((e) => {
       const s = document.createElement("div");
-      s.className = "ds-select__option", s.setAttribute("data-value", e.value), s.textContent = e.text || e.label, e.disabled && s.classList.add("is-disabled"), this.selectedValues.has(e.value) && s.classList.add("is-selected"), s.addEventListener("click", (n) => this._optionClickHandler(n)), s._selectOptionClickHandler = (n) => this._optionClickHandler(n), this.optionsEl.appendChild(s);
+      s.className = "ds-select__option", s.setAttribute("data-value", e.value), s.textContent = e.text || e.label, e.disabled && s.classList.add("is-disabled"), this.selectedValues.has(e.value) && s.classList.add("is-selected"), s._selectOptionClickHandler = (n) => this._optionClickHandler(n), s.addEventListener("click", s._selectOptionClickHandler), this.optionsEl.appendChild(s);
     }), this.allOptions = t.map((e) => ({
       el: this.optionsEl.querySelector(`[data-value="${e.value}"]`),
       value: e.value,
@@ -3256,7 +3271,7 @@ class wr {
   }
   _bindOptionClicks() {
     this.optionsEl.querySelectorAll(".ds-select__option, .ds-select__item").forEach((t) => {
-      t.addEventListener("click", (e) => this._optionClickHandler(e)), t._selectOptionClickHandler = (e) => this._optionClickHandler(e);
+      t._selectOptionClickHandler = (e) => this._optionClickHandler(e), t.addEventListener("click", t._selectOptionClickHandler);
     });
   }
   _getVisibleOptions() {
@@ -3285,18 +3300,18 @@ class wr {
   _appendOptionsToBody() {
     if (!this.optionsEl) return;
     this._originalParent = this.optionsEl.parentNode, this._originalPosition = this.optionsEl.style.position, this._originalTop = this.optionsEl.style.top, this._originalLeft = this.optionsEl.style.left, this._originalRight = this.optionsEl.style.right, this._originalWidth = this.optionsEl.style.width, this._originalTransform = this.optionsEl.style.transform, this._originalZIndex = this.optionsEl.style.zIndex;
-    const t = W().dropdown;
-    this.optionsEl.style.position = "fixed", this.optionsEl.style.zIndex = t, this.optionsEl.style.transform = "translateZ(0)", document.body.appendChild(this.optionsEl);
+    const t = this.element.getBoundingClientRect(), e = W().dropdown;
+    this.optionsEl.style.position = "fixed", this.optionsEl.style.width = `${t.width}px`, this.optionsEl.style.zIndex = e, this.optionsEl.style.transform = "translateZ(0)", document.body.appendChild(this.optionsEl);
   }
   _restoreOptionsFromBody() {
     !this.optionsEl || !this._originalParent || (this._originalParent.appendChild(this.optionsEl), this.optionsEl.style.position = this._originalPosition || "", this.optionsEl.style.top = this._originalTop || "", this.optionsEl.style.left = this._originalLeft || "", this.optionsEl.style.right = this._originalRight || "", this.optionsEl.style.width = this._originalWidth || "", this.optionsEl.style.zIndex = this._originalZIndex || "", this.optionsEl.style.transform = this._originalTransform || "", this._originalParent = null);
   }
   _calculateOptionsPosition() {
     if (!this.appendToBody || !this.optionsEl) return;
-    const t = this.element.getBoundingClientRect(), e = this.optionsEl.getBoundingClientRect(), s = window.innerHeight, n = window.innerWidth;
-    this.optionsEl.style.width = `${Math.max(t.width, e.width)}px`;
-    const r = s - t.bottom, a = t.top;
-    r < e.height && a > r ? this.optionsEl.style.top = `${t.top - e.height - 4}px` : this.optionsEl.style.top = `${t.bottom + 4}px`, t.left + e.width > n ? this.optionsEl.style.left = `${t.right - Math.max(t.width, e.width)}px` : this.optionsEl.style.left = `${t.left}px`;
+    const t = this.element.getBoundingClientRect(), e = window.innerHeight, s = window.innerWidth;
+    this.optionsEl.style.width = `${t.width}px`;
+    const n = this.optionsEl.getBoundingClientRect(), r = e - t.bottom, a = t.top;
+    r < n.height && a > r ? this.optionsEl.style.top = `${t.top - n.height - 4}px` : this.optionsEl.style.top = `${t.bottom + 4}px`, t.left + n.width > s ? this.optionsEl.style.left = `${t.right - n.width}px` : this.optionsEl.style.left = `${t.left}px`;
   }
   toggleOptions() {
     this.isOpen ? this.hideOptions() : this.showOptions();