@kupola/kupola 1.6.2 → 1.6.4

package/js/dropdown.js

@@ -65,9 +65,9 @@ class Dropdown {
         this.onSelect({ item, value: item.getAttribute('data-value'), text: item.textContent.trim() });
       }
 
-      if (this.closeOnClick) {
+      if (this.closeOnClick !== false) {
         this.hideMenu();
-        this.trigger.focus();
+        if (this.trigger) {this.trigger.focus();}
       }
     };
 
@@ -170,7 +170,10 @@ class Dropdown {
 
     // Document click to close
     this._documentClickHandler = (e) => {
-      if (!this.element.contains(e.target) && !this.menu.contains(e.target)) {
+      if (!this.isOpen) return;
+      const isInElement = this.element.contains(e.target);
+      const isInMenu = this.menu && this.menu.contains(e.target);
+      if (!isInElement && !isInMenu) {
         this.hideMenu();
       }
     };
@@ -183,8 +186,8 @@ class Dropdown {
 
   _bindMenuItems() {
     this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => {
-      item.addEventListener('click', (e) => this._itemClickHandler(e));
       item._dropdownItemClickHandler = (e) => this._itemClickHandler(e);
+      item.addEventListener('click', item._dropdownItemClickHandler);
     });
   }
 
@@ -205,7 +208,6 @@ class Dropdown {
     if (!this.autoPosition) {return;}
 
     const triggerRect = this.element.getBoundingClientRect();
-    const menuRect = this.menu.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
 
@@ -213,7 +215,8 @@ class Dropdown {
     this.menu.classList.remove('ds-dropdown--top', 'ds-dropdown--right', 'ds-dropdown--dropup');
 
     if (this.appendToBody) {
-      this.menu.style.width = `${Math.max(triggerRect.width, menuRect.width)}px`;
+      this.menu.style.width = `${triggerRect.width}px`;
+      const menuRect = this.menu.getBoundingClientRect();
 
       const spaceBelow = viewportHeight - triggerRect.bottom;
       const spaceAbove = triggerRect.top;
@@ -227,7 +230,7 @@ class Dropdown {
       }
 
       if (triggerRect.left + menuRect.width > viewportWidth) {
-        this.menu.style.left = `${triggerRect.right - Math.max(triggerRect.width, menuRect.width)}px`;
+        this.menu.style.left = `${triggerRect.right - menuRect.width}px`;
         this.menu.style.right = 'auto';
       } else {
         this.menu.style.left = `${triggerRect.left}px`;
@@ -304,9 +307,12 @@ class Dropdown {
     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 triggerRect = this.element.getBoundingClientRect();
     const zIndex = getZIndexConfig().dropdown;
     this.menu.style.position = 'fixed';
+    this.menu.style.width = `${triggerRect.width}px`;
     this.menu.style.zIndex = zIndex;
     this.menu.style.transform = 'translateZ(0)';
     document.body.appendChild(this.menu);
@@ -324,7 +330,9 @@ class Dropdown {
     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() {
@@ -362,6 +370,33 @@ class Dropdown {
 
   // Update menu items dynamically
   setItems(items) {
+    // Ensure _itemClickHandler is defined
+    if (!this._itemClickHandler) {
+      this._itemClickHandler = (e) => {
+        e.stopPropagation();
+        const item = e.currentTarget;
+        if (item.classList.contains('is-disabled') || item.classList.contains('ds-dropdown__divider')) {return;}
+
+        this.menu.querySelectorAll('.ds-dropdown__item').forEach(i => i.classList.remove('is-selected'));
+        item.classList.add('is-selected');
+
+        if (this.triggerText && !item.hasAttribute('data-no-update-trigger')) {
+          this.triggerText.textContent = item.textContent.trim();
+        }
+
+        this.element.setAttribute('data-value', item.getAttribute('data-value') || '');
+
+        if (this.onSelect) {
+          this.onSelect({ item, value: item.getAttribute('data-value'), text: item.textContent.trim() });
+        }
+
+        if (this.closeOnClick !== false) {
+          this.hideMenu();
+          if (this.trigger) {this.trigger.focus();}
+        }
+      };
+    }
+
     // Remove old item listeners
     this.menu.querySelectorAll('.ds-dropdown__item').forEach(item => {
       if (item._dropdownItemClickHandler) {
@@ -371,7 +406,7 @@ class Dropdown {
 
     // Rebuild menu content
     this.menu.innerHTML = '';
-    items.forEach(item => {
+    items.forEach((item, index) => {
       if (item.type === 'divider') {
         const divider = document.createElement('div');
         divider.className = 'ds-dropdown__divider';
@@ -383,11 +418,13 @@ class Dropdown {
         if (item.value !== undefined) {el.setAttribute('data-value', item.value);}
         if (item.icon) {el.innerHTML = item.icon + el.innerHTML;}
         if (item.disabled) {el.classList.add('is-disabled');}
+        
+        el._dropdownItemClickHandler = (e) => this._itemClickHandler(e);
+        el.addEventListener('click', el._dropdownItemClickHandler);
+        
         this.menu.appendChild(el);
       }
     });
-
-    this._bindMenuItems();
   }
 
   destroy() {
@@ -440,6 +477,9 @@ class Dropdown {
 }
 
 function initDropdown(element, options) {
+  if (element._kupolaDropdown) {
+    element._kupolaDropdown.destroy();
+  }
   const dropdown = new Dropdown(element, options);
   dropdown.init();
   element._kupolaDropdown = dropdown;

package/js/initializer.js

@@ -86,7 +86,8 @@ class ComponentInitializerRegistry {
     const className = element.className;
     if (typeof className === 'string') {
       for (const cls of this._cssClasses) {
-        if (className.includes(cls)) {
+        const regex = new RegExp(`(^|\\s)${cls}(\\s|$)`);
+        if (regex.test(className)) {
           const name = cls.replace('ds-', '');
           const initFn = this.initializers.get(name) || this.initializers.get(cls);
           if (initFn) {
@@ -127,7 +128,8 @@ class ComponentInitializerRegistry {
     const className = element.className;
     if (typeof className === 'string') {
       for (const cls of this._cssClasses) {
-        if (className.includes(cls)) {
+        const regex = new RegExp(`(^|\\s)${cls}(\\s|$)`);
+        if (regex.test(className)) {
           const name = cls.replace('ds-', '');
           const cleanupFn = this.cleanupFunctions.get(name) || this.cleanupFunctions.get(cls);
           if (cleanupFn) {

package/js/select.js

@@ -133,7 +133,10 @@ class Select {
 
     // Document click to close
     this._documentClickHandler = (e) => {
-      if (!this.element.contains(e.target) && !this.optionsEl.contains(e.target)) {
+      if (!this.isOpen) return;
+      const isInElement = this.element.contains(e.target);
+      const isInOptions = this.optionsEl && this.optionsEl.contains(e.target);
+      if (!isInElement && !isInOptions) {
         this.hideOptions();
       }
     };
@@ -231,6 +234,23 @@ class Select {
   }
 
   _renderRemoteOptions(options) {
+    // Ensure _optionClickHandler is defined
+    if (!this._optionClickHandler) {
+      this._optionClickHandler = (e) => {
+        e.stopPropagation();
+        const option = e.currentTarget;
+        if (option.classList.contains('is-disabled')) return;
+        
+        const value = option.getAttribute('data-value');
+        
+        if (this.multiple) {
+          this._toggleMultiOption(value, option);
+        } else {
+          this._selectSingleOption(value, option);
+        }
+      };
+    }
+
     this.optionsEl.querySelectorAll('.ds-select__option, .ds-select__item').forEach(opt => {
       if (opt._selectOptionClickHandler) {
         opt.removeEventListener('click', opt._selectOptionClickHandler);
@@ -246,8 +266,8 @@ class Select {
       if (opt.disabled) el.classList.add('is-disabled');
       if (this.selectedValues.has(opt.value)) el.classList.add('is-selected');
       
-      el.addEventListener('click', (e) => this._optionClickHandler(e));
       el._selectOptionClickHandler = (e) => this._optionClickHandler(e);
+      el.addEventListener('click', el._selectOptionClickHandler);
       
       this.optionsEl.appendChild(el);
     });
@@ -408,8 +428,8 @@ class Select {
 
   _bindOptionClicks() {
     this.optionsEl.querySelectorAll('.ds-select__option, .ds-select__item').forEach(option => {
-      option.addEventListener('click', (e) => this._optionClickHandler(e));
       option._selectOptionClickHandler = (e) => this._optionClickHandler(e);
+      option.addEventListener('click', option._selectOptionClickHandler);
     });
   }
 
@@ -500,8 +520,10 @@ class Select {
     this._originalTransform = this.optionsEl.style.transform;
     this._originalZIndex = this.optionsEl.style.zIndex;
 
+    const triggerRect = this.element.getBoundingClientRect();
     const zIndex = getZIndexConfig().dropdown;
     this.optionsEl.style.position = 'fixed';
+    this.optionsEl.style.width = `${triggerRect.width}px`;
     this.optionsEl.style.zIndex = zIndex;
     this.optionsEl.style.transform = 'translateZ(0)';
     document.body.appendChild(this.optionsEl);
@@ -524,11 +546,11 @@ class Select {
     if (!this.appendToBody || !this.optionsEl) return;
 
     const triggerRect = this.element.getBoundingClientRect();
-    const optionsRect = this.optionsEl.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
 
-    this.optionsEl.style.width = `${Math.max(triggerRect.width, optionsRect.width)}px`;
+    this.optionsEl.style.width = `${triggerRect.width}px`;
+    const optionsRect = this.optionsEl.getBoundingClientRect();
 
     const spaceBelow = viewportHeight - triggerRect.bottom;
     const spaceAbove = triggerRect.top;
@@ -540,7 +562,7 @@ class Select {
     }
 
     if (triggerRect.left + optionsRect.width > viewportWidth) {
-      this.optionsEl.style.left = `${triggerRect.right - Math.max(triggerRect.width, optionsRect.width)}px`;
+      this.optionsEl.style.left = `${triggerRect.right - optionsRect.width}px`;
     } else {
       this.optionsEl.style.left = `${triggerRect.left}px`;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "A lightweight UI toolkit for any web project. No heavy frontend frameworks required.",
   "main": "dist/kupola.cjs.js",
   "module": "dist/kupola.esm.js",