@dodlhuat/basix 1.3.5 → 1.4.1

package/js/virtual-dropdown.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from './utils.js';
-/** Virtualised dropdown that renders only visible items for performance with large option lists. */
 class VirtualDropdown {
     container;
     options;
@@ -9,8 +8,6 @@ class VirtualDropdown {
     renderLimit;
     itemHeight;
     onSelect;
-    // Unique CSS anchor name for this instance — prevents conflicts when
-    // multiple dropdowns exist on the same page.
     anchorName;
     trigger;
     triggerText;
@@ -24,7 +21,7 @@ class VirtualDropdown {
     filteredOptions;
     isOpen;
     scrollTop;
-    boundHandlers;
+    abortController = new AbortController();
     constructor(config) {
         const containerElement = typeof config.container === 'string'
             ? document.querySelector(config.container)
@@ -45,7 +42,6 @@ class VirtualDropdown {
         this.filteredOptions = [...this.options];
         this.isOpen = false;
         this.scrollTop = 0;
-        this.boundHandlers = new Map();
         this.init();
     }
     init() {
@@ -77,8 +73,6 @@ class VirtualDropdown {
         this.scroller = this.querySelector('.dropdown-list-scroller');
         this.spacer = this.querySelector('.virtual-spacer');
         this.content = this.querySelector('.virtual-content');
-        // Wire up anchor positioning: each instance gets a unique anchor name
-        // so multiple dropdowns on the same page don't interfere.
         this.trigger.style.setProperty('anchor-name', this.anchorName);
         this.menu.style.setProperty('position-anchor', this.anchorName);
         if (this.searchable) {
@@ -93,10 +87,9 @@ class VirtualDropdown {
         return element;
     }
     bindEvents() {
-        const handleTriggerClick = () => this.toggle();
-        this.trigger.addEventListener('click', handleTriggerClick);
-        this.boundHandlers.set('triggerClick', handleTriggerClick);
-        const handleTriggerKeydown = (e) => {
+        const sig = { signal: this.abortController.signal };
+        this.trigger.addEventListener('click', () => this.toggle(), sig);
+        this.trigger.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 this.toggle();
@@ -104,46 +97,29 @@ class VirtualDropdown {
             else if (e.key === 'Escape' && this.isOpen) {
                 this.close();
             }
-        };
-        this.trigger.addEventListener('keydown', handleTriggerKeydown);
-        this.boundHandlers.set('triggerKeydown', handleTriggerKeydown);
-        // Close when clicking outside. Still needed because popover="manual"
-        // does not auto-dismiss on outside clicks.
-        const handleDocumentClick = (e) => {
+        }, sig);
+        document.addEventListener('click', (e) => {
             if (!this.container.contains(e.target) && !this.menu.contains(e.target)) {
                 this.close();
             }
-        };
-        document.addEventListener('click', handleDocumentClick);
-        this.boundHandlers.set('documentClick', handleDocumentClick);
+        }, sig);
         if (this.searchable && this.searchInput) {
-            const handleSearchInput = (e) => {
-                const target = e.target;
-                this.handleSearch(target.value);
-            };
-            this.searchInput.addEventListener('input', handleSearchInput);
-            this.boundHandlers.set('searchInput', handleSearchInput);
+            this.searchInput.addEventListener('input', (e) => {
+                this.handleSearch(e.target.value);
+            }, sig);
         }
-        const handleScroll = (e) => {
-            const target = e.target;
-            this.scrollTop = target.scrollTop;
+        this.listWrapper.addEventListener('scroll', (e) => {
+            this.scrollTop = e.target.scrollTop;
             this.renderList();
-        };
-        this.listWrapper.addEventListener('scroll', handleScroll);
-        this.boundHandlers.set('scroll', handleScroll);
-        // Sync isOpen if the browser closes the popover externally (e.g. another
-        // popover="auto" element stealing focus — not typical for "manual" but
-        // good defensive practice).
-        const handlePopoverToggle = (e) => {
+        }, sig);
+        this.menu.addEventListener('toggle', (e) => {
             const te = e;
             if (te.newState === 'closed' && this.isOpen) {
                 this.isOpen = false;
                 this.container.classList.remove('open');
                 this.trigger.setAttribute('aria-expanded', 'false');
             }
-        };
-        this.menu.addEventListener('toggle', handlePopoverToggle);
-        this.boundHandlers.set('popoverToggle', handlePopoverToggle);
+        }, sig);
     }
     toggle() {
         this.isOpen ? this.close() : this.open();
@@ -290,34 +266,9 @@ class VirtualDropdown {
         }
     }
     destroy() {
-        if (this.isOpen) {
+        if (this.isOpen)
             this.menu.hidePopover();
-        }
-        const triggerClick = this.boundHandlers.get('triggerClick');
-        if (triggerClick) {
-            this.trigger.removeEventListener('click', triggerClick);
-        }
-        const triggerKeydown = this.boundHandlers.get('triggerKeydown');
-        if (triggerKeydown) {
-            this.trigger.removeEventListener('keydown', triggerKeydown);
-        }
-        const documentClick = this.boundHandlers.get('documentClick');
-        if (documentClick) {
-            document.removeEventListener('click', documentClick);
-        }
-        const searchInput = this.boundHandlers.get('searchInput');
-        if (searchInput && this.searchInput) {
-            this.searchInput.removeEventListener('input', searchInput);
-        }
-        const scroll = this.boundHandlers.get('scroll');
-        if (scroll) {
-            this.listWrapper.removeEventListener('scroll', scroll);
-        }
-        const popoverToggle = this.boundHandlers.get('popoverToggle');
-        if (popoverToggle) {
-            this.menu.removeEventListener('toggle', popoverToggle);
-        }
-        this.boundHandlers.clear();
+        this.abortController.abort();
         this.container.innerHTML = '';
         this.container.classList.remove('custom-dropdown', 'open');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.3.5",
+  "version": "1.4.1",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "exports": {
     "./css/*": "./css/*",
@@ -33,6 +33,10 @@
   },
   "homepage": "https://github.com/dodlhuat/basix#readme",
   "devDependencies": {
-    "typescript": "^6.0.0"
+    "eslint": "^10.5.0",
+    "eslint-config-prettier": "^10.1.8",
+    "prettier": "^3.8.4",
+    "typescript": "^6.0.0",
+    "typescript-eslint": "^8.61.0"
   }
 }