@dodlhuat/basix 1.3.4 → 1.4.0

package/js/utils.d.ts

@@ -1,4 +1,3 @@
-/** Shape of the `utils` helper object. */
 interface Utils {
     ready(fn: () => void): void;
     value(element: HTMLElement): string;
@@ -8,15 +7,6 @@ interface Utils {
     isHidden(element: HTMLElement): boolean;
 }
 declare const utils: Utils;
-/**
- * Escape a plain-text string so it is safe to inject into innerHTML.
- * Use this whenever inserting user-controlled strings into HTML templates.
- */
 declare function escapeHtml(text: string): string;
-/**
- * Sanitize an HTML string by removing dangerous elements and attributes
- * (script, iframe, on* handlers, javascript: hrefs) while preserving safe markup.
- * Use this when a component intentionally accepts rich HTML from callers.
- */
 declare function sanitizeHtml(html: string): string;
 export { utils, escapeHtml, sanitizeHtml };

package/js/utils.js

@@ -1,22 +1,12 @@
 const utils = {
-    /**
-     * Execute a function when the DOM is ready
-     * @param fn - Callback function to execute
-     */
     ready(fn) {
-        if (document.readyState === "complete" || document.readyState === "interactive") {
+        if (document.readyState === 'complete' || document.readyState === 'interactive') {
             setTimeout(fn, 1);
         }
         else {
-            document.addEventListener("DOMContentLoaded", fn);
+            document.addEventListener('DOMContentLoaded', fn);
         }
     },
-    /**
-     * Get the value of an element from various sources
-     * Priority: value attribute > data-value attribute > innerText
-     * @param element - HTML element to get value from
-     * @returns The element's value as a string
-     */
     value(element) {
         if (element.hasAttribute('value')) {
             return element.getAttribute('value') || '';
@@ -26,57 +16,27 @@ const utils = {
         }
         return element.innerText;
     },
-    /**
-     * Get the text content of an element
-     * @param element - HTML element to get text from
-     * @returns The element's inner text
-     */
     text(element) {
         return element.innerText;
     },
-    /**
-     * Get an attribute value from an element
-     * @param element - HTML element to get attribute from
-     * @param attribute - Name of the attribute to retrieve
-     * @returns The attribute value or undefined if not present
-     */
     attribute(element, attribute) {
         if (element.hasAttribute(attribute)) {
             return element.getAttribute(attribute) || undefined;
         }
         return undefined;
     },
-    /**
-     * Check if an element is a NodeList
-     * @param element - Element or NodeList to check
-     * @returns True if the element is a NodeList
-     */
     isList(element) {
         return NodeList.prototype.isPrototypeOf(element);
     },
-    /**
-     * Check if an element is hidden
-     * @param element - HTML element to check
-     * @returns True if the element is hidden
-     */
     isHidden(element) {
         return element.offsetParent === null;
     }
 };
-/**
- * Escape a plain-text string so it is safe to inject into innerHTML.
- * Use this whenever inserting user-controlled strings into HTML templates.
- */
 function escapeHtml(text) {
     const div = document.createElement('div');
     div.textContent = text;
     return div.innerHTML;
 }
-/**
- * Sanitize an HTML string by removing dangerous elements and attributes
- * (script, iframe, on* handlers, javascript: hrefs) while preserving safe markup.
- * Use this when a component intentionally accepts rich HTML from callers.
- */
 function sanitizeHtml(html) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(html, 'text/html');

package/js/virtual-dropdown.d.ts

@@ -1,9 +1,7 @@
-/** A single selectable option for a VirtualDropdown. */
 interface DropdownOption {
     label: string;
     value: string | number;
 }
-/** Configuration for a VirtualDropdown instance. */
 interface VirtualDropdownConfig {
     container: string | HTMLElement;
     options: DropdownOption[];
@@ -14,7 +12,6 @@ interface VirtualDropdownConfig {
     itemHeight?: number;
     onSelect?: (selectedValues: Array<string | number>) => void;
 }
-/** Virtualised dropdown that renders only visible items for performance with large option lists. */
 declare class VirtualDropdown {
     private readonly container;
     private readonly options;
@@ -37,7 +34,7 @@ declare class VirtualDropdown {
     private filteredOptions;
     private isOpen;
     private scrollTop;
-    private boundHandlers;
+    private abortController;
     constructor(config: VirtualDropdownConfig);
     private init;
     private renderBase;
@@ -55,4 +52,5 @@ declare class VirtualDropdown {
     clearSelection(): void;
     destroy(): void;
 }
-export { VirtualDropdown, DropdownOption, VirtualDropdownConfig };
+export { VirtualDropdown };
+export type { DropdownOption, VirtualDropdownConfig };

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.4",
+  "version": "1.4.0",
   "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/*",