@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Dropdown/scripts/index.ts

@@ -3,7 +3,7 @@ import {
   DropdownPosition,
   DropdownTrigger,
   DropdownOptions,
-  TimerRef
+  TimerRef,
 } from './componentInteractions';
 
 /**
@@ -34,16 +34,17 @@ class Dropdown {
     this.isOpen = false;
     this.timeoutRef = { current: null };
     this.animating = false;
-    
+
     // Set default options
     this.options = {
-      placement: options.placement || DROPDOWN.DEFAULTS.PLACEMENT as DropdownPosition,
-      trigger: options.trigger || DROPDOWN.DEFAULTS.TRIGGER as DropdownTrigger,
+      placement: options.placement || (DROPDOWN.DEFAULTS.PLACEMENT as DropdownPosition),
+      trigger: options.trigger || (DROPDOWN.DEFAULTS.TRIGGER as DropdownTrigger),
       offset: options.offset !== undefined ? options.offset : DROPDOWN.DEFAULTS.OFFSET,
-      closeOnClickOutside: options.closeOnClickOutside !== undefined ? options.closeOnClickOutside : true,
+      closeOnClickOutside:
+        options.closeOnClickOutside !== undefined ? options.closeOnClickOutside : true,
       closeOnEscape: options.closeOnEscape !== undefined ? options.closeOnEscape : true,
       minWidth: options.minWidth?.toString() || DROPDOWN.DEFAULTS.MIN_WIDTH.toString(),
-      maxHeight: options.maxHeight || ''
+      maxHeight: options.maxHeight || '',
     };
 
     this._initialize();
@@ -56,50 +57,51 @@ class Dropdown {
     // Generate unique ID if not already set
     const id = this.element.id || `dropdown-${Math.random().toString(36).substring(2, 9)}`;
     this.element.id = id;
-    
+
     // Add proper CSS class based on trigger type
     if (this.options.trigger === 'click') {
       this.element.classList.add('c-dropdown--onclick');
     } else {
       this.element.classList.remove('c-dropdown--onclick');
     }
-    
+
     // Find trigger element
-    this.trigger = this.element.querySelector('.c-dropdown__trigger') || 
-                  this.element.querySelector('.c-dropdown__toggle');
-    
+    this.trigger =
+      this.element.querySelector('.c-dropdown__trigger') ||
+      this.element.querySelector('.c-dropdown__toggle');
+
     // Find or create menu structure
     this._setupMenuStructure(id);
-    
+
     // Setup ARIA attributes
     this._setupAriaAttributes(id);
-    
+
     // Apply styles to menu
     this._applyStyles();
-    
+
     // Bind events
     this._bindEvents();
   }
-  
+
   /**
    * Set up menu structure
    */
   private _setupMenuStructure(id: string): void {
     this.menuWrapper = this.element.querySelector('.c-dropdown__menu-wrapper');
-    
+
     if (!this.menuWrapper) {
-      // Create menu wrapper 
+      // Create menu wrapper
       this.menuWrapper = document.createElement('div');
       this.menuWrapper.className = 'c-dropdown__menu-wrapper';
       this.menuWrapper.classList.add(`c-dropdown__menu-wrapper--${this.options.placement}`);
-      
+
       // Create inner wrapper
       this.menuInner = document.createElement('div');
       this.menuInner.className = 'c-dropdown__menu-inner';
-      
+
       // Handle existing menu or create new one
       const existingMenu = this.element.querySelector('.c-dropdown__menu');
-      
+
       if (existingMenu) {
         this.menu = existingMenu as HTMLElement;
         this.menuInner.appendChild(existingMenu);
@@ -108,18 +110,18 @@ class Dropdown {
         this.menu.className = 'c-dropdown__menu';
         this.menuInner.appendChild(this.menu);
       }
-      
+
       this.menuWrapper.appendChild(this.menuInner);
       this.element.appendChild(this.menuWrapper);
     } else {
       // Find existing menu elements
       this.menuInner = this.menuWrapper.querySelector('.c-dropdown__menu-inner');
       this.menu = this.menuWrapper.querySelector('.c-dropdown__menu');
-      
+
       if (!this.menuInner) {
         this.menuInner = document.createElement('div');
         this.menuInner.className = 'c-dropdown__menu-inner';
-        
+
         if (this.menu) {
           this.menuInner.appendChild(this.menu);
         } else {
@@ -127,7 +129,7 @@ class Dropdown {
           this.menu.className = 'c-dropdown__menu';
           this.menuInner.appendChild(this.menu);
         }
-        
+
         this.menuWrapper.appendChild(this.menuInner);
       } else if (!this.menu) {
         this.menu = document.createElement('ul');
@@ -135,7 +137,7 @@ class Dropdown {
         this.menuInner.appendChild(this.menu);
       }
     }
-    
+
     // Add proper role to menu items
     if (this.menu) {
       const menuItems = this.menu.querySelectorAll('button, a');
@@ -143,11 +145,11 @@ class Dropdown {
         if (!item.getAttribute('role')) {
           item.setAttribute('role', 'menuitem');
         }
-        
+
         if (!item.getAttribute('tabindex')) {
           item.setAttribute('tabindex', '0');
         }
-        
+
         // Add proper class if missing
         if (!item.classList.contains('c-dropdown__menu-item')) {
           item.classList.add('c-dropdown__menu-item');
@@ -155,9 +157,9 @@ class Dropdown {
       });
     }
   }
-  
+
   /**
-   * Setup ARIA attributes 
+   * Setup ARIA attributes
    */
   private _setupAriaAttributes(id: string): void {
     if (this.trigger) {
@@ -166,7 +168,7 @@ class Dropdown {
       this.trigger.setAttribute('aria-controls', id);
       this.trigger.setAttribute('tabindex', '0');
     }
-    
+
     if (this.menuWrapper) {
       this.menuWrapper.setAttribute('role', 'menu');
       this.menuWrapper.setAttribute('aria-orientation', 'vertical');
@@ -174,61 +176,59 @@ class Dropdown {
       this.menuWrapper.id = id;
     }
   }
-  
+
   /**
    * Apply styles to menu
    */
   private _applyStyles(): void {
     if (!this.menuInner) return;
-    
+
     // Apply minWidth
     if (this.options.minWidth) {
       const minWidthStr = String(this.options.minWidth);
-      this.menuInner.style.minWidth = minWidthStr.includes('px') 
-        ? minWidthStr 
-        : `${minWidthStr}px`;
+      this.menuInner.style.minWidth = minWidthStr.includes('px') ? minWidthStr : `${minWidthStr}px`;
     }
-    
+
     // Apply maxHeight
     if (this.options.maxHeight) {
       this.menuInner.style.maxHeight = this.options.maxHeight.includes('px')
         ? this.options.maxHeight
         : `${this.options.maxHeight}px`;
-      
+
       this.menuInner.style.overflowY = 'auto';
     }
   }
-  
+
   /**
    * Bind event listeners
    */
   private _bindEvents(): void {
     if (!this.trigger) return;
-    
+
     // Click or hover events based on trigger type
     if (this.options.trigger === 'click') {
       this.trigger.addEventListener('click', this._handleTriggerClick);
-      
+
       if (this.options.closeOnClickOutside) {
         document.addEventListener('click', this._handleDocumentClick);
       }
     } else if (this.options.trigger === 'hover') {
       this.trigger.addEventListener('mouseenter', this._handleTriggerMouseEnter);
       this.trigger.addEventListener('mouseleave', this._handleTriggerMouseLeave);
-      
+
       if (this.menuWrapper) {
         this.menuWrapper.addEventListener('mouseenter', this._handleMenuMouseEnter);
         this.menuWrapper.addEventListener('mouseleave', this._handleMenuMouseLeave);
       }
     }
-    
+
     // Keyboard event handlers
     this.trigger.addEventListener('keydown', this._handleTriggerKeyDown);
-    
+
     if (this.options.closeOnEscape) {
       document.addEventListener('keydown', this._handleEscapeKey);
     }
-    
+
     if (this.menuWrapper) {
       this.menuWrapper.addEventListener('keydown', this._handleMenuKeyDown);
       this.menuWrapper.addEventListener('animationend', this._handleAnimationEnd);
@@ -241,12 +241,12 @@ class Dropdown {
   private _handleAnimationEnd = (event: AnimationEvent): void => {
     if (event.target === this.menuWrapper) {
       this.animating = false;
-      
+
       if (!this.isOpen && this.menuWrapper) {
         this.menuWrapper.setAttribute('aria-hidden', 'true');
       }
     }
-  }
+  };
 
   /**
    * Handle click on trigger
@@ -254,10 +254,10 @@ class Dropdown {
   private _handleTriggerClick = (event: Event): void => {
     event.preventDefault();
     event.stopPropagation();
-    
+
     this.toggle();
-  }
-  
+  };
+
   /**
    * Handle keydown on trigger
    */
@@ -269,20 +269,20 @@ class Dropdown {
       event.preventDefault();
       this.close();
     }
-  }
+  };
 
   /**
    * Handle document click
    */
   private _handleDocumentClick = (event: MouseEvent): void => {
     if (!this.isOpen) return;
-    
+
     const target = event.target as Node;
-    
+
     if (this.element && !this.element.contains(target)) {
       this.close();
     }
-  }
+  };
 
   /**
    * Handle mouseenter on trigger
@@ -292,24 +292,24 @@ class Dropdown {
       window.clearTimeout(this.timeoutRef.current);
       this.timeoutRef.current = null;
     }
-    
+
     this.open();
-  }
+  };
 
   /**
    * Handle mouseleave on trigger
    */
   private _handleTriggerMouseLeave = (): void => {
     if (!this.menuWrapper) return;
-    
+
     this.timeoutRef.current = window.setTimeout(() => {
       if (!this.menuWrapper?.matches(':hover')) {
         this.close();
       }
       this.timeoutRef.current = null;
     }, 150);
-  }
-  
+  };
+
   /**
    * Handle mouseenter on menu
    */
@@ -318,8 +318,8 @@ class Dropdown {
       window.clearTimeout(this.timeoutRef.current);
       this.timeoutRef.current = null;
     }
-  }
-  
+  };
+
   /**
    * Handle mouseleave on menu
    */
@@ -327,7 +327,7 @@ class Dropdown {
     if (this.options.trigger === 'hover') {
       this.close();
     }
-  }
+  };
 
   /**
    * Handle escape key
@@ -338,22 +338,22 @@ class Dropdown {
       this.close();
       this.trigger?.focus();
     }
-  }
-  
+  };
+
   /**
    * Handle keyboard navigation
    */
   private _handleMenuKeyDown = (event: KeyboardEvent): void => {
     if (!this.menuWrapper || !this.isOpen) return;
-    
+
     const focusableItems = Array.from(
       this.menuWrapper.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
     );
-    
+
     if (!focusableItems.length) return;
-    
+
     const currentIndex = focusableItems.findIndex(item => item === document.activeElement);
-    
+
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
@@ -363,7 +363,7 @@ class Dropdown {
           focusableItems[0].focus();
         }
         break;
-        
+
       case 'ArrowUp':
         event.preventDefault();
         if (currentIndex > 0) {
@@ -372,27 +372,27 @@ class Dropdown {
           focusableItems[focusableItems.length - 1].focus();
         }
         break;
-        
+
       case 'Home':
         event.preventDefault();
         focusableItems[0].focus();
         break;
-        
+
       case 'End':
         event.preventDefault();
         focusableItems[focusableItems.length - 1].focus();
         break;
     }
-  }
+  };
 
   /**
    * Focus the first menu item
    */
   private _focusFirstMenuItem(): void {
     if (!this.menuWrapper) return;
-    
+
     const firstItem = this.menuWrapper.querySelector<HTMLElement>('[role="menuitem"]');
-    
+
     if (firstItem) {
       requestAnimationFrame(() => {
         firstItem.focus();
@@ -405,29 +405,31 @@ class Dropdown {
    */
   public open(): void {
     if (this.isOpen) return;
-    
+
     this.isOpen = true;
     this.animating = true;
-    
+
     if (this.trigger) {
       this.trigger.setAttribute('aria-expanded', 'true');
     }
-    
+
     if (this.menuWrapper) {
       this.menuWrapper.setAttribute('aria-hidden', 'false');
       this.menuWrapper.classList.add('is-open');
-      
+
       if (this.animating) {
         this.menuWrapper.classList.add('is-animating');
       }
     }
-    
+
     this._focusFirstMenuItem();
-    
-    this.element.dispatchEvent(new CustomEvent('dropdown:open', { 
-      bubbles: true,
-      detail: { dropdown: this }
-    }));
+
+    this.element.dispatchEvent(
+      new CustomEvent('dropdown:open', {
+        bubbles: true,
+        detail: { dropdown: this },
+      })
+    );
   }
 
   /**
@@ -435,26 +437,28 @@ class Dropdown {
    */
   public close(): void {
     if (!this.isOpen) return;
-    
+
     this.isOpen = false;
     this.animating = true;
-    
+
     if (this.trigger) {
       this.trigger.setAttribute('aria-expanded', 'false');
     }
-    
+
     if (this.menuWrapper) {
       this.menuWrapper.classList.remove('is-open');
-      
+
       if (this.animating) {
         this.menuWrapper.classList.add('is-animating');
       }
     }
-    
-    this.element.dispatchEvent(new CustomEvent('dropdown:close', { 
-      bubbles: true,
-      detail: { dropdown: this }
-    }));
+
+    this.element.dispatchEvent(
+      new CustomEvent('dropdown:close', {
+        bubbles: true,
+        detail: { dropdown: this },
+      })
+    );
   }
 
   /**
@@ -470,7 +474,7 @@ class Dropdown {
   public update(options: Partial<DropdownOptions>): void {
     // Update options
     Object.assign(this.options, options);
-    
+
     // Update trigger type class if needed
     if (options.trigger !== undefined) {
       if (options.trigger === 'click') {
@@ -479,18 +483,18 @@ class Dropdown {
         this.element.classList.remove('c-dropdown--onclick');
       }
     }
-    
+
     // Update placement class if needed
     if (options.placement && this.menuWrapper) {
       // Remove existing placement classes
       Array.from(this.menuWrapper.classList)
         .filter(cls => cls.startsWith('c-dropdown__menu-wrapper--'))
         .forEach(cls => this.menuWrapper?.classList.remove(cls));
-      
+
       // Add new placement class
       this.menuWrapper.classList.add(`c-dropdown__menu-wrapper--${options.placement}`);
     }
-    
+
     // Apply updated styles
     this._applyStyles();
   }
@@ -506,28 +510,28 @@ class Dropdown {
       this.trigger.removeEventListener('mouseleave', this._handleTriggerMouseLeave);
       this.trigger.removeEventListener('keydown', this._handleTriggerKeyDown);
     }
-    
+
     document.removeEventListener('click', this._handleDocumentClick);
     document.removeEventListener('keydown', this._handleEscapeKey);
-    
+
     if (this.menuWrapper) {
       this.menuWrapper.removeEventListener('mouseenter', this._handleMenuMouseEnter);
       this.menuWrapper.removeEventListener('mouseleave', this._handleMenuMouseLeave);
       this.menuWrapper.removeEventListener('keydown', this._handleMenuKeyDown);
       this.menuWrapper.removeEventListener('animationend', this._handleAnimationEnd);
     }
-    
+
     // Close if open
     if (this.isOpen) {
       this.close();
     }
-    
+
     // Clear timeouts
     if (this.timeoutRef.current !== null) {
       window.clearTimeout(this.timeoutRef.current);
       this.timeoutRef.current = null;
     }
-    
+
     // Remove reference
     // @ts-ignore: Custom property
     this.element._dropdown = null;
@@ -539,7 +543,7 @@ class Dropdown {
  */
 const initializeDropdowns = (): Dropdown[] => {
   const dropdownElements = Array.from(document.querySelectorAll(DROPDOWN.SELECTORS.DROPDOWN));
-  
+
   return dropdownElements.map(element => {
     // Skip already initialized dropdowns
     // @ts-ignore: Custom property
@@ -547,25 +551,25 @@ const initializeDropdowns = (): Dropdown[] => {
       // @ts-ignore: Custom property
       return element._dropdown;
     }
-    
+
     const options: DropdownOptions = {
       placement: (element as HTMLElement).dataset.dropdownPlacement as DropdownPosition,
       trigger: (element as HTMLElement).dataset.dropdownTrigger as DropdownTrigger,
-      offset: (element as HTMLElement).dataset.dropdownOffset ? 
-        Number((element as HTMLElement).dataset.dropdownOffset) : 
-        undefined,
+      offset: (element as HTMLElement).dataset.dropdownOffset
+        ? Number((element as HTMLElement).dataset.dropdownOffset)
+        : undefined,
       closeOnClickOutside: (element as HTMLElement).dataset.dropdownCloseOnClickOutside !== 'false',
       closeOnEscape: (element as HTMLElement).dataset.dropdownCloseOnEscape !== 'false',
       minWidth: (element as HTMLElement).dataset.dropdownMinWidth || undefined,
-      maxHeight: (element as HTMLElement).dataset.dropdownMaxHeight || undefined
+      maxHeight: (element as HTMLElement).dataset.dropdownMaxHeight || undefined,
     };
-    
+
     const dropdown = new Dropdown(element as HTMLElement, options);
-    
+
     // Store instance on element
     // @ts-ignore: Custom property
     (element as HTMLElement)._dropdown = dropdown;
-    
+
     return dropdown;
   });
 };
@@ -574,24 +578,25 @@ const initializeDropdowns = (): Dropdown[] => {
  * Create a dropdown instance for a specific element
  */
 const createDropdown = (element: HTMLElement | string, options: DropdownOptions = {}): Dropdown => {
-  const el = typeof element === 'string' ? document.querySelector(element) as HTMLElement : element;
-  
+  const el =
+    typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
   if (!el) {
     throw new Error(`Dropdown target not found: ${element}`);
   }
-  
+
   // @ts-ignore: Custom property
   if (el._dropdown instanceof Dropdown) {
     // @ts-ignore: Custom property
     return el._dropdown;
   }
-  
+
   const dropdown = new Dropdown(el, options);
-  
+
   // Store instance on element
   // @ts-ignore: Custom property
   el._dropdown = dropdown;
-  
+
   return dropdown;
 };
 
@@ -604,4 +609,4 @@ if (typeof document !== 'undefined') {
   } else {
     document.addEventListener('DOMContentLoaded', initializeDropdowns);
   }
-} 
+}