@dodlhuat/basix 1.4.1 → 1.4.3

package/js/table.js

@@ -1,4 +1,5 @@
 import { Select } from './select.js';
+import { ListenerGroup } from './listeners.js';
 class Table {
     container;
     data;
@@ -11,11 +12,9 @@ class Table {
     tableBody;
     tableHeader;
     paginationContainer;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(elementOrSelector, options = {}) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element) {
             throw new Error(`Table: Element not found for selector "${elementOrSelector}"`);
         }
@@ -44,10 +43,10 @@ class Table {
         this.columns = Array.from(ths).map((th, index) => ({
             key: `col${index}`,
             label: th.textContent?.trim() || '',
-            sortable: true
+            sortable: true,
         }));
         const trs = tbody.querySelectorAll('tr');
-        this.data = Array.from(trs).map(tr => {
+        this.data = Array.from(trs).map((tr) => {
             const row = {};
             const tds = tr.querySelectorAll('td');
             tds.forEach((td, index) => {
@@ -73,7 +72,7 @@ class Table {
         searchInput.className = 'search-input';
         searchInput.addEventListener('input', (e) => {
             this.handleSearch(e.target.value);
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
         controlsDiv.appendChild(searchInput);
         const selectGroup = document.createElement('div');
         selectGroup.className = 'select-group';
@@ -82,7 +81,7 @@ class Table {
         selectGroup.appendChild(label);
         const pageSizeSelect = document.createElement('select');
         pageSizeSelect.className = 'page-size-select';
-        [5, 10, 20, 50].forEach(size => {
+        [5, 10, 20, 50].forEach((size) => {
             const option = document.createElement('option');
             option.value = String(size);
             option.textContent = `${size} per page`;
@@ -91,7 +90,7 @@ class Table {
         });
         pageSizeSelect.addEventListener('change', (e) => {
             this.handlePageSizeChange(parseInt(e.target.value, 10));
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
         this.assignUniqueId(pageSizeSelect, 'page-size-select-0');
         selectGroup.appendChild(pageSizeSelect);
         controlsDiv.appendChild(selectGroup);
@@ -105,13 +104,13 @@ class Table {
         const thead = document.createElement('thead');
         const tbody = document.createElement('tbody');
         const tr = document.createElement('tr');
-        this.columns.forEach(col => {
+        this.columns.forEach((col) => {
             const th = document.createElement('th');
             th.textContent = col.label;
             th.dataset.key = col.key;
             if (col.sortable !== false) {
                 th.classList.add('sortable');
-                th.addEventListener('click', () => this.handleSort(col.key), { signal: this.abortController.signal });
+                th.addEventListener('click', () => this.handleSort(col.key), { signal: this.listeners.signal });
             }
             tr.appendChild(th);
         });
@@ -131,17 +130,18 @@ class Table {
         let processedData = [...this.data];
         if (this.filterText) {
             const lowerFilter = this.filterText.toLowerCase();
-            processedData = processedData.filter(row => {
-                return this.columns.some(col => {
+            processedData = processedData.filter((row) => {
+                return this.columns.some((col) => {
                     const val = String(row[col.key] ?? '').toLowerCase();
                     return val.includes(lowerFilter);
                 });
             });
         }
         if (this.sortColumn) {
+            const col = this.sortColumn;
             processedData.sort((a, b) => {
-                const valA = a[this.sortColumn];
-                const valB = b[this.sortColumn];
+                const valA = a[col];
+                const valB = b[col];
                 if (valA == null && valB == null)
                     return 0;
                 if (valA == null)
@@ -186,9 +186,9 @@ class Table {
             this.tableBody.appendChild(tr);
             return;
         }
-        data.forEach(row => {
+        data.forEach((row) => {
             const tr = document.createElement('tr');
-            this.columns.forEach(col => {
+            this.columns.forEach((col) => {
                 const td = document.createElement('td');
                 td.textContent = String(row[col.key] ?? '');
                 td.setAttribute('data-label', col.label);
@@ -199,7 +199,7 @@ class Table {
     }
     updateHeaderSortIcons() {
         const ths = this.tableHeader.querySelectorAll('th');
-        ths.forEach(th => {
+        ths.forEach((th) => {
             th.classList.remove('sort-asc', 'sort-desc');
             if (th.dataset.key === this.sortColumn) {
                 th.classList.add(this.sortDirection === 'asc' ? 'sort-asc' : 'sort-desc');
@@ -216,14 +216,15 @@ class Table {
         this.paginationContainer.appendChild(info);
         const buttonsDiv = document.createElement('div');
         buttonsDiv.className = 'pagination-buttons';
+        const sig = { signal: this.listeners.signal };
         const prevBtn = document.createElement('button');
         prevBtn.className = 'page-btn';
         prevBtn.textContent = 'Previous';
         prevBtn.disabled = this.currentPage === 1;
-        prevBtn.addEventListener('click', () => this.setPage(this.currentPage - 1));
+        prevBtn.addEventListener('click', () => this.setPage(this.currentPage - 1), sig);
         buttonsDiv.appendChild(prevBtn);
         let startPage = Math.max(1, this.currentPage - 2);
-        let endPage = Math.min(totalPages, startPage + 4);
+        const endPage = Math.min(totalPages, startPage + 4);
         if (endPage - startPage < 4) {
             startPage = Math.max(1, endPage - 4);
         }
@@ -231,14 +232,14 @@ class Table {
             const btn = document.createElement('button');
             btn.className = `page-btn ${i === this.currentPage ? 'active' : ''}`;
             btn.textContent = String(i);
-            btn.addEventListener('click', () => this.setPage(i));
+            btn.addEventListener('click', () => this.setPage(i), sig);
             buttonsDiv.appendChild(btn);
         }
         const nextBtn = document.createElement('button');
         nextBtn.className = 'page-btn';
         nextBtn.textContent = 'Next';
         nextBtn.disabled = this.currentPage === totalPages;
-        nextBtn.addEventListener('click', () => this.setPage(this.currentPage + 1));
+        nextBtn.addEventListener('click', () => this.setPage(this.currentPage + 1), sig);
         buttonsDiv.appendChild(nextBtn);
         this.paginationContainer.appendChild(buttonsDiv);
     }
@@ -298,7 +299,7 @@ class Table {
         return this.getFilteredAndSortedData();
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.innerHTML = '';
     }
 }

package/js/tabs.d.ts

@@ -12,7 +12,7 @@ declare class Tabs {
     private tabItems;
     private tabPanels;
     private currentTab;
-    private abortController;
+    private listeners;
     constructor(elementOrSelector: string | HTMLElement, options?: TabsOptions);
     private init;
     private bindEvents;

package/js/tabs.js

@@ -1,14 +1,13 @@
+import { ListenerGroup } from './listeners.js';
 class Tabs {
     container;
     options;
     tabItems;
     tabPanels;
     currentTab;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(elementOrSelector, options = {}) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const element = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!element) {
             throw new Error(`Tabs: Element not found for selector "${elementOrSelector}"`);
         }
@@ -18,7 +17,7 @@ class Tabs {
             layout,
             defaultTab: options.defaultTab ?? 0,
             menuPos: options.menuPos ?? (layout === 'vertical' ? 'left' : 'top'),
-            onChange: options.onChange
+            onChange: options.onChange,
         };
         this.currentTab = this.options.defaultTab;
         this.tabItems = this.container.querySelectorAll('.tab-item');
@@ -29,8 +28,6 @@ class Tabs {
         if (this.options.layout === 'vertical') {
             this.container.classList.add('tabs-vertical');
         }
-        this.tabItems = this.container.querySelectorAll('.tab-item');
-        this.tabPanels = this.container.querySelectorAll('.tab-panel');
         if (this.tabItems.length === 0) {
             console.warn('No tab items found in container');
             return;
@@ -46,16 +43,13 @@ class Tabs {
         this.activateTab(this.options.defaultTab);
     }
     bindEvents() {
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         this.tabItems.forEach((item, index) => {
             item.addEventListener('click', (e) => {
                 e.preventDefault();
                 this.activateTab(index);
             }, sig);
-            item.addEventListener('keydown', (e) => {
-                const keyEvent = e;
-                this.handleKeyboardNavigation(keyEvent, index);
-            }, sig);
+            item.addEventListener('keydown', (e) => this.handleKeyboardNavigation(e, index), sig);
             item.setAttribute('role', 'tab');
             item.setAttribute('tabindex', index === this.options.defaultTab ? '0' : '-1');
             item.setAttribute('aria-selected', index === this.options.defaultTab ? 'true' : 'false');
@@ -114,7 +108,7 @@ class Tabs {
             console.warn(`Invalid tab index: ${index}`);
             return;
         }
-        this.tabItems.forEach((item, i) => {
+        this.tabItems.forEach((item) => {
             item.classList.remove('active');
             item.setAttribute('tabindex', '-1');
             item.setAttribute('aria-selected', 'false');
@@ -130,9 +124,8 @@ class Tabs {
         this.tabPanels[index].setAttribute('aria-hidden', 'false');
         const previousTab = this.currentTab;
         this.currentTab = index;
-        if (this.options.onChange && previousTab !== index) {
-            this.options.onChange(index);
-        }
+        if (previousTab !== index)
+            this.options.onChange?.(index);
     }
     goToTab(index) {
         this.activateTab(index);
@@ -169,7 +162,7 @@ class Tabs {
         }
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.classList.remove('tabs-vertical');
         this.tabItems.forEach((item) => {
             item.removeAttribute('role');

package/js/theme.d.ts

@@ -1,6 +1,7 @@
 type ThemeMode = 'light' | 'dark';
 declare class Theme {
     private static readonly STORAGE_KEY;
+    private static readonly isMac;
     private static root;
     private static elements;
     private static mediaQuery;

package/js/theme.js

@@ -1,5 +1,6 @@
 class Theme {
     static STORAGE_KEY = 'theme';
+    static isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
     static root;
     static elements = null;
     static mediaQuery = null;
@@ -99,14 +100,11 @@ class Theme {
     static bindToggleClick() {
         if (!this.elements)
             return;
-        this.elements.toggleBtn.addEventListener('click', () => {
-            this.toggleTheme();
-        });
+        this.elements.toggleBtn.addEventListener('click', () => this.toggleTheme());
     }
     static bindKeyboardShortcut() {
         window.addEventListener('keydown', (ev) => {
-            const isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
-            const modifierPressed = isMac ? ev.metaKey : ev.ctrlKey;
+            const modifierPressed = Theme.isMac ? ev.metaKey : ev.ctrlKey;
             if (modifierPressed && ev.key.toLowerCase() === 'j') {
                 ev.preventDefault();
                 this.toggleTheme();
@@ -116,18 +114,11 @@ class Theme {
     static bindSystemThemeChange() {
         if (!this.mediaQuery)
             return;
-        const handler = (e) => {
+        this.mediaQuery.addEventListener('change', (e) => {
             if (!this.getSavedTheme()) {
-                const matches = 'matches' in e ? e.matches : e.matches;
-                this.applyTheme(matches ? 'dark' : 'light');
+                this.applyTheme(e.matches ? 'dark' : 'light');
             }
-        };
-        if ('addEventListener' in this.mediaQuery) {
-            this.mediaQuery.addEventListener('change', handler);
-        }
-        else if ('addListener' in this.mediaQuery) {
-            this.mediaQuery.addListener(handler);
-        }
+        });
     }
     static getTheme() {
         return this.getCurrentTheme();

package/js/timepicker.d.ts

@@ -24,18 +24,20 @@ declare class TimeSpanPicker {
     private startHandleEl;
     private endHandleEl;
     private dragState;
+    private listeners;
+    private dragListeners;
     constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions);
     private queryEl;
     private render;
-    private readonly handleChange;
+    private handleChange;
     private attachEventListeners;
     private attachBarListeners;
     private beginDrag;
-    private readonly onStartHandleDown;
-    private readonly onEndHandleDown;
-    private readonly onFillDown;
-    private readonly onPointerMove;
-    private readonly onPointerUp;
+    private onStartHandleDown;
+    private onEndHandleDown;
+    private onFillDown;
+    private onPointerMove;
+    private onPointerUp;
     private toMinutes;
     private minutesToTime;
     private snap;

package/js/timepicker.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class TimeSpanPicker {
     container;
     startTimeInput;
@@ -13,11 +14,13 @@ class TimeSpanPicker {
     startHandleEl;
     endHandleEl;
     dragState = null;
+    listeners = new ListenerGroup();
+    dragListeners = null;
     constructor(elementOrSelector, options) {
         const element = typeof elementOrSelector === 'string'
-            ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
+            ? elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
                 ? document.querySelector(elementOrSelector)
-                : document.getElementById(elementOrSelector))
+                : document.getElementById(elementOrSelector)
             : elementOrSelector;
         if (!element) {
             throw new Error(`TimeSpanPicker: Element not found for "${elementOrSelector}"`);
@@ -74,17 +77,17 @@ class TimeSpanPicker {
       </div>
     `;
     }
-    handleChange = () => {
+    handleChange() {
         this.updateUI();
         const start = this.startTimeInput.value;
         const end = this.endTimeInput.value;
-        if (this.onChange && start && end) {
-            this.onChange(start, end);
-        }
-    };
+        if (start && end)
+            this.onChange?.(start, end);
+    }
     attachEventListeners() {
-        this.startTimeInput.addEventListener('change', this.handleChange);
-        this.endTimeInput.addEventListener('change', this.handleChange);
+        const sig = { signal: this.listeners.signal };
+        this.startTimeInput.addEventListener('change', () => this.handleChange(), sig);
+        this.endTimeInput.addEventListener('change', () => this.handleChange(), sig);
     }
     attachBarListeners() {
         this.pickerEl = this.queryEl('.timespan-picker');
@@ -93,9 +96,10 @@ class TimeSpanPicker {
         this.barFillEl = this.queryEl('.timespan-bar-fill');
         this.startHandleEl = this.queryEl('.timespan-handle-start');
         this.endHandleEl = this.queryEl('.timespan-handle-end');
-        this.startHandleEl.addEventListener('pointerdown', this.onStartHandleDown);
-        this.endHandleEl.addEventListener('pointerdown', this.onEndHandleDown);
-        this.barFillEl.addEventListener('pointerdown', this.onFillDown);
+        const sig = { signal: this.listeners.signal };
+        this.startHandleEl.addEventListener('pointerdown', (e) => this.onStartHandleDown(e), sig);
+        this.endHandleEl.addEventListener('pointerdown', (e) => this.onEndHandleDown(e), sig);
+        this.barFillEl.addEventListener('pointerdown', (e) => this.onFillDown(e), sig);
     }
     beginDrag(type, clickOffsetMins = 0, rect) {
         const start = this.startTimeInput.value;
@@ -112,20 +116,22 @@ class TimeSpanPicker {
             clickOffsetMins,
         };
         this.barEl.classList.add('is-dragging');
-        document.addEventListener('pointermove', this.onPointerMove);
-        document.addEventListener('pointerup', this.onPointerUp);
+        this.dragListeners = new ListenerGroup();
+        const dragSig = { signal: this.dragListeners.signal };
+        document.addEventListener('pointermove', (e) => this.onPointerMove(e), dragSig);
+        document.addEventListener('pointerup', () => this.onPointerUp(), dragSig);
     }
-    onStartHandleDown = (e) => {
+    onStartHandleDown(e) {
         e.stopPropagation();
         e.preventDefault();
         this.beginDrag('start');
-    };
-    onEndHandleDown = (e) => {
+    }
+    onEndHandleDown(e) {
         e.stopPropagation();
         e.preventDefault();
         this.beginDrag('end');
-    };
-    onFillDown = (e) => {
+    }
+    onFillDown(e) {
         if (e.target.classList.contains('timespan-handle'))
             return;
         e.preventDefault();
@@ -135,8 +141,8 @@ class TimeSpanPicker {
         const rect = this.barEl.getBoundingClientRect();
         const clickMins = ((e.clientX - rect.left) / rect.width) * 1440;
         this.beginDrag('move', clickMins - this.toMinutes(start), rect);
-    };
-    onPointerMove = (e) => {
+    }
+    onPointerMove(e) {
         if (!this.dragState)
             return;
         e.preventDefault();
@@ -162,17 +168,16 @@ class TimeSpanPicker {
             this.endTimeInput.value = end;
         }
         this.updateUI();
-        if (this.onChange)
-            this.onChange(start, end);
-    };
-    onPointerUp = () => {
+        this.onChange?.(start, end);
+    }
+    onPointerUp() {
         if (!this.dragState)
             return;
         this.dragState = null;
         this.barEl.classList.remove('is-dragging');
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
-    };
+        this.dragListeners?.destroy();
+        this.dragListeners = null;
+    }
     toMinutes(time) {
         const [h, m] = time.split(':').map(Number);
         return h * 60 + m;
@@ -225,7 +230,7 @@ class TimeSpanPicker {
     getValue() {
         return {
             start: this.startTimeInput.value,
-            end: this.endTimeInput.value
+            end: this.endTimeInput.value,
         };
     }
     setValue(start, end) {
@@ -248,13 +253,8 @@ class TimeSpanPicker {
         return !!(start && end && start < end);
     }
     destroy() {
-        this.startTimeInput.removeEventListener('change', this.handleChange);
-        this.endTimeInput.removeEventListener('change', this.handleChange);
-        this.startHandleEl.removeEventListener('pointerdown', this.onStartHandleDown);
-        this.endHandleEl.removeEventListener('pointerdown', this.onEndHandleDown);
-        this.barFillEl.removeEventListener('pointerdown', this.onFillDown);
-        document.removeEventListener('pointermove', this.onPointerMove);
-        document.removeEventListener('pointerup', this.onPointerUp);
+        this.listeners.destroy();
+        this.dragListeners?.destroy();
     }
 }
 export { TimeSpanPicker };

package/js/toast.d.ts

@@ -14,10 +14,11 @@ declare class Toast {
     private readonly template;
     private toastElement;
     private timerId;
+    private openListeners;
     constructor(options: ToastOptions);
     constructor(content: string, header?: string, type?: ToastType, closeable?: boolean);
     show(ms?: number): void;
-    hide: () => void;
+    hide(): void;
     private startTimer;
     destroy(): void;
     private buildTemplate;

package/js/toast.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class Toast {
     content;
     header;
@@ -8,6 +9,7 @@ class Toast {
     template;
     toastElement = null;
     timerId = null;
+    openListeners = null;
     constructor(contentOrOptions, header = '', type, closeable = true) {
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
@@ -37,7 +39,8 @@ class Toast {
                 this.toastElement?.classList.add('show');
                 const closeButton = this.toastElement?.querySelector('.close');
                 if (closeButton) {
-                    closeButton.addEventListener('click', this.hide);
+                    this.openListeners = new ListenerGroup();
+                    closeButton.addEventListener('click', () => this.hide(), { signal: this.openListeners.signal });
                 }
                 if (ms !== undefined && ms > 0) {
                     this.startTimer(ms);
@@ -45,18 +48,19 @@ class Toast {
             });
         });
     }
-    hide = () => {
+    hide() {
         if (this.timerId !== null) {
             clearTimeout(this.timerId);
             this.timerId = null;
         }
         this.toastElement?.classList.remove('show');
+        this.openListeners?.destroy();
+        this.openListeners = null;
         setTimeout(() => {
-            this.toastElement?.querySelector('.close')?.removeEventListener('click', this.hide);
             this.toastElement?.remove();
             this.toastElement = null;
         }, 150);
-    };
+    }
     startTimer(ms, elapsed = 0) {
         const stepSize = 250;
         if (elapsed >= ms) {

package/js/tooltip.d.ts

@@ -14,6 +14,7 @@ declare class Tooltip {
     private tooltipElement;
     private showTimeout;
     private isVisible;
+    private listeners;
     constructor(trigger: HTMLElement, content: string, options?: TooltipOptions);
     static initializeAll(): void;
     show(): void;
@@ -22,10 +23,6 @@ declare class Tooltip {
     private createTooltip;
     private position;
     private attachEvents;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleFocus;
-    private handleBlur;
     destroy(): void;
 }
 export { Tooltip };

package/js/tooltip.js

@@ -1,4 +1,5 @@
 import { computePosition } from './position.js';
+import { ListenerGroup } from './listeners.js';
 class Tooltip {
     static activeTooltip = null;
     static idCounter = 0;
@@ -8,6 +9,7 @@ class Tooltip {
     tooltipElement = null;
     showTimeout = null;
     isVisible = false;
+    listeners = new ListenerGroup();
     constructor(trigger, content, options = {}) {
         this.trigger = trigger;
         this.content = content;
@@ -22,7 +24,7 @@ class Tooltip {
     }
     static initializeAll() {
         const triggers = document.querySelectorAll('[data-tooltip]');
-        triggers.forEach(trigger => {
+        triggers.forEach((trigger) => {
             const content = trigger.getAttribute('data-tooltip');
             const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
@@ -31,7 +33,7 @@ class Tooltip {
             }
         });
         const advancedTriggers = document.querySelectorAll('[data-tooltip-id]');
-        advancedTriggers.forEach(trigger => {
+        advancedTriggers.forEach((trigger) => {
             const contentId = trigger.getAttribute('data-tooltip-id');
             const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
@@ -107,35 +109,24 @@ class Tooltip {
     position() {
         if (!this.tooltipElement)
             return;
-        const { left, top, placement } = computePosition(this.trigger.getBoundingClientRect(), this.tooltipElement.getBoundingClientRect(), { placement: this.options.position, offset: this.options.offset });
+        const { left, top, placement } = computePosition(this.trigger.getBoundingClientRect(), this.tooltipElement.getBoundingClientRect(), {
+            placement: this.options.position,
+            offset: this.options.offset,
+        });
         this.tooltipElement.style.left = `${left}px`;
         this.tooltipElement.style.top = `${top}px`;
         this.tooltipElement.setAttribute('data-position', placement);
     }
     attachEvents() {
-        this.trigger.addEventListener('mouseenter', this.handleMouseEnter);
-        this.trigger.addEventListener('mouseleave', this.handleMouseLeave);
-        this.trigger.addEventListener('focus', this.handleFocus);
-        this.trigger.addEventListener('blur', this.handleBlur);
+        const sig = { signal: this.listeners.signal };
+        this.trigger.addEventListener('mouseenter', () => this.show(), sig);
+        this.trigger.addEventListener('mouseleave', () => this.hide(), sig);
+        this.trigger.addEventListener('focus', () => this.show(), sig);
+        this.trigger.addEventListener('blur', () => this.hide(), sig);
     }
-    handleMouseEnter = () => {
-        this.show();
-    };
-    handleMouseLeave = () => {
-        this.hide();
-    };
-    handleFocus = () => {
-        this.show();
-    };
-    handleBlur = () => {
-        this.hide();
-    };
     destroy() {
         this.hide();
-        this.trigger.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.trigger.removeEventListener('mouseleave', this.handleMouseLeave);
-        this.trigger.removeEventListener('focus', this.handleFocus);
-        this.trigger.removeEventListener('blur', this.handleBlur);
+        this.listeners.destroy();
         const previousDescribedBy = this.trigger.getAttribute('data-previous-describedby');
         if (previousDescribedBy) {
             this.trigger.setAttribute('aria-describedby', previousDescribedBy);

package/js/tree.d.ts

@@ -18,7 +18,6 @@ declare class TreeComponent {
     private selectedNode;
     private readonly options;
     constructor(elementOrSelector: string | HTMLElement, data: TreeNode[], options?: TreeOptions);
-    private init;
     render(): void;
     private renderNode;
     private createIconElement;