@dodlhuat/basix 1.4.1 → 1.4.3

package/js/file-uploader.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class FileUploader {
     container;
     dropZone;
@@ -9,11 +10,10 @@ class FileUploader {
     uploadUrl;
     maxFileSize;
     allowedTypes;
-    abortControllers = new Map();
+    xhrAborts = new Map();
+    listeners = new ListenerGroup();
     constructor(elementOrSelector, config = {}) {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const container = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!container) {
             throw new Error(`FileUploader: Element not found for selector "${elementOrSelector}"`);
         }
@@ -33,72 +33,57 @@ class FileUploader {
         this.uploadUrl = config.uploadUrl ?? 'https://httpbin.org/post';
         this.maxFileSize = config.maxFileSize;
         this.allowedTypes = config.allowedTypes;
-        this.init();
-    }
-    init() {
         this.setupEventListeners();
     }
     fileKey(file) {
         return `${file.name}-${file.size}-${file.lastModified}`;
     }
     setupEventListeners() {
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
-            this.dropZone.addEventListener(event, this.preventDefaults);
-        });
-        ['dragenter', 'dragover'].forEach(event => {
-            this.dropZone.addEventListener(event, this.handleDragEnter);
-        });
-        ['dragleave', 'drop'].forEach(event => {
-            this.dropZone.addEventListener(event, this.handleDragLeave);
-        });
-        this.dropZone.addEventListener('drop', this.handleDrop);
-        this.dropZone.addEventListener('click', this.handleDropZoneClick);
-        this.fileInput.addEventListener('change', this.handleFileInputChange);
-        this.uploadBtn.addEventListener('click', this.handleUploadClick);
-    }
-    preventDefaults = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    handleDragEnter = () => {
-        this.dropZone.classList.add('drag-over');
-    };
-    handleDragLeave = () => {
-        this.dropZone.classList.remove('drag-over');
-    };
-    handleDrop = (e) => {
-        const droppedFiles = e.dataTransfer?.files;
-        if (droppedFiles) {
-            this.handleFiles(droppedFiles);
+        const sig = { signal: this.listeners.signal };
+        const prevent = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        for (const event of ['dragenter', 'dragover', 'dragleave', 'drop']) {
+            this.dropZone.addEventListener(event, prevent, sig);
         }
-    };
-    handleDropZoneClick = () => {
-        this.fileInput.click();
-    };
-    handleFileInputChange = (e) => {
-        const target = e.target;
-        if (target.files) {
-            this.handleFiles(target.files);
-            target.value = '';
+        for (const event of ['dragenter', 'dragover']) {
+            this.dropZone.addEventListener(event, () => this.dropZone.classList.add('drag-over'), sig);
         }
-    };
-    handleUploadClick = async () => {
-        if (this.files.size === 0)
-            return;
-        this.uploadBtn.disabled = true;
-        this.uploadBtn.textContent = 'Uploading...';
-        const uploadPromises = Array.from(this.files.values()).map(({ file, element }) => this.uploadFile(file, element));
-        const results = await Promise.allSettled(uploadPromises);
-        this.uploadBtn.textContent = 'Upload Complete';
-        setTimeout(() => {
-            this.dispatchUploadCompletedEvent(results);
-            this.fileList.innerHTML = '';
-            this.files.clear();
-            this.updateUploadButton();
-        }, 1500);
-    };
+        for (const event of ['dragleave', 'drop']) {
+            this.dropZone.addEventListener(event, () => this.dropZone.classList.remove('drag-over'), sig);
+        }
+        this.dropZone.addEventListener('drop', (e) => {
+            const droppedFiles = e.dataTransfer?.files;
+            if (droppedFiles)
+                this.handleFiles(droppedFiles);
+        }, sig);
+        this.dropZone.addEventListener('click', () => this.fileInput.click(), sig);
+        this.fileInput.addEventListener('change', (e) => {
+            const target = e.target;
+            if (target.files) {
+                this.handleFiles(target.files);
+                target.value = '';
+            }
+        }, sig);
+        this.uploadBtn.addEventListener('click', async () => {
+            if (this.files.size === 0)
+                return;
+            this.uploadBtn.disabled = true;
+            this.uploadBtn.textContent = 'Uploading...';
+            const uploadPromises = Array.from(this.files.values()).map(({ file, element }) => this.uploadFile(file, element));
+            const results = await Promise.allSettled(uploadPromises);
+            this.uploadBtn.textContent = 'Upload Complete';
+            setTimeout(() => {
+                this.dispatchUploadCompletedEvent(results);
+                this.fileList.innerHTML = '';
+                this.files.clear();
+                this.updateUploadButton();
+            }, 1500);
+        }, sig);
+    }
     handleFiles(fileList) {
-        Array.from(fileList).forEach(file => {
+        Array.from(fileList).forEach((file) => {
             const key = this.fileKey(file);
             if (this.validateFile(file) && !this.files.has(key)) {
                 const element = this.addFileToUI(file);
@@ -181,16 +166,16 @@ class FileUploader {
             removeBtn.style.display = 'none';
             const xhr = new XMLHttpRequest();
             const key = this.fileKey(file);
-            this.abortControllers.set(key, () => xhr.abort());
+            this.xhrAborts.set(key, () => xhr.abort());
             xhr.upload.addEventListener('progress', (e) => {
                 if (e.lengthComputable) {
                     const pct = Math.round((e.loaded / e.total) * 100);
-                    progressBar.style.width = pct + '%';
-                    statusText.textContent = pct + '%';
+                    progressBar.style.width = `${pct}%`;
+                    statusText.textContent = `${pct}%`;
                 }
             });
             xhr.addEventListener('load', () => {
-                this.abortControllers.delete(key);
+                this.xhrAborts.delete(key);
                 if (xhr.status >= 200 && xhr.status < 300) {
                     progressBar.style.width = '100%';
                     progressBar.style.backgroundColor = 'var(--success)';
@@ -212,7 +197,7 @@ class FileUploader {
                 }
             });
             xhr.addEventListener('error', () => {
-                this.abortControllers.delete(key);
+                this.xhrAborts.delete(key);
                 progressBar.style.backgroundColor = 'var(--error)';
                 statusText.textContent = 'Network Error';
                 statusText.classList.add('error');
@@ -220,7 +205,7 @@ class FileUploader {
                 reject(new Error('Network error'));
             });
             xhr.addEventListener('abort', () => {
-                this.abortControllers.delete(key);
+                this.xhrAborts.delete(key);
                 statusText.textContent = 'Cancelled';
                 statusText.classList.add('error');
                 removeBtn.style.display = 'flex';
@@ -233,7 +218,7 @@ class FileUploader {
         });
     }
     removeFile(key) {
-        const abort = this.abortControllers.get(key);
+        const abort = this.xhrAborts.get(key);
         if (abort)
             abort();
         const fileData = this.files.get(key);
@@ -245,9 +230,7 @@ class FileUploader {
     }
     updateUploadButton() {
         this.uploadBtn.disabled = this.files.size === 0;
-        this.uploadBtn.textContent = this.files.size > 0
-            ? `Upload ${this.files.size} File${this.files.size === 1 ? '' : 's'}`
-            : 'Upload Files';
+        this.uploadBtn.textContent = this.files.size > 0 ? `Upload ${this.files.size} File${this.files.size === 1 ? '' : 's'}` : 'Upload Files';
     }
     dispatchUploadCompletedEvent(results) {
         const files = Array.from(this.files.values()).map(({ file }) => file);
@@ -265,21 +248,9 @@ class FileUploader {
         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
     }
     destroy() {
-        this.abortControllers.forEach(abort => abort());
-        this.abortControllers.clear();
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
-            this.dropZone.removeEventListener(event, this.preventDefaults);
-        });
-        ['dragenter', 'dragover'].forEach(event => {
-            this.dropZone.removeEventListener(event, this.handleDragEnter);
-        });
-        ['dragleave', 'drop'].forEach(event => {
-            this.dropZone.removeEventListener(event, this.handleDragLeave);
-        });
-        this.dropZone.removeEventListener('drop', this.handleDrop);
-        this.dropZone.removeEventListener('click', this.handleDropZoneClick);
-        this.fileInput.removeEventListener('change', this.handleFileInputChange);
-        this.uploadBtn.removeEventListener('click', this.handleUploadClick);
+        this.xhrAborts.forEach((abort) => abort());
+        this.xhrAborts.clear();
+        this.listeners.destroy();
         this.files.clear();
         this.fileList.innerHTML = '';
     }

package/js/flyout-menu.d.ts

@@ -19,7 +19,7 @@ declare class FlyoutMenu {
     private closeBtn;
     private submenuToggles;
     private menuLinks;
-    private abortController;
+    private listeners;
     constructor(options?: FlyoutMenuOptions);
     private init;
     private hydrateMenu;
@@ -27,8 +27,8 @@ declare class FlyoutMenu {
     private renderHeader;
     private renderFooter;
     private bindEvents;
-    open: () => void;
-    close: () => void;
+    open(): void;
+    close(): void;
     private handleSubmenu;
     private handleKeydown;
     setDirection(direction: 'left' | 'right'): void;

package/js/flyout-menu.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class FlyoutMenu {
     options;
     menuTrigger;
@@ -6,7 +7,7 @@ class FlyoutMenu {
     closeBtn = null;
     submenuToggles = null;
     menuLinks = null;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(options = {}) {
         this.options = {
             triggerSelector: '.menu-trigger',
@@ -20,7 +21,7 @@ class FlyoutMenu {
             footerText: '© 2025 Brand Inc.',
             enableHeader: true,
             enableFooter: true,
-            ...options
+            ...options,
         };
         this.menuTrigger = document.querySelector(this.options.triggerSelector);
         this.flyoutMenu = document.querySelector(this.options.menuSelector);
@@ -58,7 +59,7 @@ class FlyoutMenu {
             if (nestedUl) {
                 li.classList.add('has-submenu');
                 nestedUl.classList.add('submenu');
-                const textNode = Array.from(li.childNodes).find(node => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '');
+                const textNode = Array.from(li.childNodes).find((node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '');
                 const text = textNode?.textContent?.trim() || 'Menu Item';
                 textNode?.remove();
                 const button = document.createElement('button');
@@ -108,30 +109,30 @@ class FlyoutMenu {
         this.flyoutMenu.append(footer);
     }
     bindEvents() {
-        const sig = { signal: this.abortController.signal };
-        this.menuTrigger?.addEventListener('click', this.open, sig);
-        this.closeBtn?.addEventListener('click', this.close, sig);
-        this.flyoutOverlay?.addEventListener('click', this.close, sig);
-        this.submenuToggles?.forEach(toggle => {
+        const sig = { signal: this.listeners.signal };
+        this.menuTrigger?.addEventListener('click', () => this.open(), sig);
+        this.closeBtn?.addEventListener('click', () => this.close(), sig);
+        this.flyoutOverlay?.addEventListener('click', () => this.close(), sig);
+        this.submenuToggles?.forEach((toggle) => {
             toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle), sig);
         });
-        this.menuLinks?.forEach(link => {
-            link.addEventListener('click', this.close, sig);
+        this.menuLinks?.forEach((link) => {
+            link.addEventListener('click', () => this.close(), sig);
         });
-        document.addEventListener('keydown', this.handleKeydown, sig);
+        document.addEventListener('keydown', (e) => this.handleKeydown(e), sig);
     }
-    open = () => {
+    open() {
         this.flyoutMenu?.classList.add('is-open');
         this.flyoutOverlay?.classList.add('is-visible');
         document.body.style.overflow = 'hidden';
         this.menuTrigger?.setAttribute('aria-expanded', 'true');
-    };
-    close = () => {
+    }
+    close() {
         this.flyoutMenu?.classList.remove('is-open');
         this.flyoutOverlay?.classList.remove('is-visible');
         document.body.style.overflow = '';
         this.menuTrigger?.setAttribute('aria-expanded', 'false');
-    };
+    }
     handleSubmenu(e, toggle) {
         e.preventDefault();
         e.stopPropagation();
@@ -141,7 +142,7 @@ class FlyoutMenu {
         if (!parentUl || !parentLi)
             return;
         const siblings = Array.from(parentUl.children);
-        siblings.forEach(sibling => {
+        siblings.forEach((sibling) => {
             if (sibling !== parentLi) {
                 const siblingSubmenu = sibling.querySelector('.submenu');
                 const siblingToggle = sibling.querySelector('.submenu-toggle');
@@ -154,23 +155,20 @@ class FlyoutMenu {
         toggle.classList.toggle('active');
         submenu?.classList.toggle('is-open');
     }
-    handleKeydown = (e) => {
+    handleKeydown(e) {
         if (e.key === 'Escape' && this.flyoutMenu?.classList.contains('is-open')) {
             this.close();
         }
-    };
+    }
     setDirection(direction) {
         if (!this.flyoutMenu)
             return;
-        const validDirections = ['left', 'right'];
-        if (!validDirections.includes(direction))
-            return;
         this.flyoutMenu.classList.remove('flyout-from-right', 'flyout-from-left');
         this.flyoutMenu.classList.add(`flyout-from-${direction}`);
         this.options.direction = direction;
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         document.body.style.overflow = '';
     }
 }

package/js/gallery.d.ts

@@ -18,8 +18,7 @@ declare class MasonryGallery {
     private columns;
     private allImages;
     private isFetching;
-    private resizeObserver;
-    private abortController;
+    private listeners;
     private reloaded;
     constructor(containerId: string, options: MasonryGalleryOptions);
     private init;

package/js/gallery.js

@@ -1,5 +1,6 @@
 import { escapeHtml } from './utils.js';
 import { Lightbox } from './lightbox.js';
+import { ListenerGroup } from './listeners.js';
 class MasonryGallery {
     container;
     loader;
@@ -7,8 +8,7 @@ class MasonryGallery {
     columns = [];
     allImages = [];
     isFetching = false;
-    resizeObserver = null;
-    abortController = null;
+    listeners = new ListenerGroup();
     reloaded = 0;
     constructor(containerId, options) {
         const container = document.getElementById(containerId);
@@ -50,35 +50,36 @@ class MasonryGallery {
         }
     }
     addEventListeners() {
-        this.abortController = new AbortController();
-        const sig = this.abortController.signal;
+        const sig = { signal: this.listeners.signal };
         let resizeTimeout;
         window.addEventListener('resize', () => {
             clearTimeout(resizeTimeout);
             resizeTimeout = setTimeout(() => this.reLayout(), 200);
-        }, { signal: sig });
-        window.addEventListener('scroll', this.handleScroll, { passive: true, signal: sig });
+        }, sig);
+        window.addEventListener('scroll', () => this.handleScroll(), { ...sig, passive: true });
     }
     reLayout() {
-        const items = this.columns.flatMap(col => Array.from(col.children));
+        const items = this.columns.flatMap((col) => Array.from(col.children));
         const availableWidth = Math.min(1200, window.innerWidth - 40);
         const numColumns = Math.max(1, Math.floor(availableWidth / this.options.minColumnWidth));
         if (this.columns.length !== numColumns) {
             this.buildColumns(numColumns);
         }
         else {
-            this.columns.forEach(col => { col.innerHTML = ''; });
+            this.columns.forEach((col) => {
+                col.innerHTML = '';
+            });
         }
-        items.forEach(item => this.addToShortestColumn(item));
+        items.forEach((item) => this.addToShortestColumn(item));
     }
-    handleScroll = () => {
+    handleScroll() {
         if (this.isFetching)
             return;
         const rect = this.container.getBoundingClientRect();
         if (rect.bottom > 0 && rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
             this.loadMoreImages();
         }
-    };
+    }
     async loadMoreImages(isAutoFill = false) {
         if (!isAutoFill)
             this.reloaded++;
@@ -123,7 +124,7 @@ class MasonryGallery {
                 const index = startIndex + i;
                 item.addEventListener('click', () => {
                     new Lightbox({
-                        images: this.allImages.map(img => ({
+                        images: this.allImages.map((img) => ({
                             src: img.src,
                             alt: img.title,
                             caption: img.desc,
@@ -174,14 +175,7 @@ class MasonryGallery {
         shortestCol.appendChild(element);
     }
     destroy() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-        if (this.abortController) {
-            this.abortController.abort();
-            this.abortController = null;
-        }
+        this.listeners.destroy();
         this.allImages = [];
     }
 }

package/js/group-picker.d.ts

@@ -26,7 +26,7 @@ declare class GroupPicker {
     private container;
     private data;
     private options;
-    private abortController;
+    private listeners;
     private selectedParents;
     private selectedSubs;
     private expandedGroups;

package/js/group-picker.js

@@ -1,9 +1,10 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class GroupPicker {
     container;
     data;
     options;
-    abortController;
+    listeners = new ListenerGroup();
     selectedParents = new Set();
     selectedSubs = new Map();
     expandedGroups = new Set();
@@ -12,14 +13,11 @@ class GroupPicker {
     listEl;
     selectionEl;
     constructor(selector, data, options = {}) {
-        const el = typeof selector === 'string'
-            ? document.querySelector(selector)
-            : selector;
+        const el = typeof selector === 'string' ? document.querySelector(selector) : selector;
         if (!el)
             throw new Error(`GroupPicker: Element not found for "${selector}"`);
         this.container = el;
         this.data = data;
-        this.abortController = new AbortController();
         this.options = {
             onSelectionChange: options.onSelectionChange ?? (() => { }),
             searchPlaceholder: options.searchPlaceholder ?? 'Gruppen durchsuchen...',
@@ -61,7 +59,7 @@ class GroupPicker {
         for (const group of this.data) {
             const subs = group.subgroups ?? [];
             const groupMatches = group.label.toLowerCase().includes(query);
-            const matchingSubs = subs.filter(s => s.label.toLowerCase().includes(query));
+            const matchingSubs = subs.filter((s) => s.label.toLowerCase().includes(query));
             if (!groupMatches && matchingSubs.length === 0 && query)
                 continue;
             visibleCount++;
@@ -86,8 +84,7 @@ class GroupPicker {
         el.dataset.groupId = group.id;
         if (!hasChildren)
             el.classList.add('is-leaf');
-        const isExpanded = hasChildren && (this.expandedGroups.has(group.id) ||
-            (query.length > 0 && matchingSubs.length > 0));
+        const isExpanded = hasChildren && (this.expandedGroups.has(group.id) || (query.length > 0 && matchingSubs.length > 0));
         const isParentSelected = this.selectedParents.has(group.id);
         if (isExpanded)
             el.classList.add('is-expanded');
@@ -97,9 +94,7 @@ class GroupPicker {
         header.className = 'group-picker__group-header';
         const label = document.createElement('span');
         label.className = 'group-picker__group-label';
-        label.innerHTML = query && groupMatches
-            ? this.highlightText(group.label, query)
-            : escapeHtml(group.label);
+        label.innerHTML = query && groupMatches ? this.highlightText(group.label, query) : escapeHtml(group.label);
         if (hasChildren) {
             const chevron = document.createElement('span');
             chevron.className = 'icon icon-navigate_next group-picker__chevron';
@@ -119,11 +114,11 @@ class GroupPicker {
             actionBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
                 this.toggleParentGroup(group.id);
-            }, { signal: this.abortController.signal });
+            }, { signal: this.listeners.signal });
             header.append(chevron, label, count, actionBtn);
             header.addEventListener('click', () => {
                 this.toggleExpand(group.id);
-            }, { signal: this.abortController.signal });
+            }, { signal: this.listeners.signal });
             const subsContainer = document.createElement('div');
             subsContainer.className = 'group-picker__subgroups';
             const subsList = document.createElement('div');
@@ -144,14 +139,14 @@ class GroupPicker {
                     if (!isParentSelected) {
                         this.toggleSubgroup(group.id, sub.id);
                     }
-                }, { signal: this.abortController.signal });
+                }, { signal: this.listeners.signal });
                 subsList.appendChild(subEl);
             }
             subsContainer.appendChild(subsList);
             el.append(header, subsContainer);
             if (isExpanded) {
                 requestAnimationFrame(() => {
-                    subsContainer.style.height = subsContainer.scrollHeight + 'px';
+                    subsContainer.style.height = `${subsContainer.scrollHeight}px`;
                     subsContainer.addEventListener('transitionend', () => {
                         subsContainer.style.height = 'auto';
                     }, { once: true });
@@ -165,7 +160,7 @@ class GroupPicker {
             header.append(label, checkEl);
             header.addEventListener('click', () => {
                 this.toggleParentGroup(group.id);
-            }, { signal: this.abortController.signal });
+            }, { signal: this.listeners.signal });
             el.appendChild(header);
         }
         return el;
@@ -173,17 +168,17 @@ class GroupPicker {
     renderSelection() {
         this.selectionEl.innerHTML = '';
         for (const groupId of this.selectedParents) {
-            const group = this.data.find(g => g.id === groupId);
+            const group = this.data.find((g) => g.id === groupId);
             if (!group)
                 continue;
             this.selectionEl.appendChild(this.createChip(group.label, true, () => this.toggleParentGroup(groupId)));
         }
         for (const [groupId, subs] of this.selectedSubs) {
-            const group = this.data.find(g => g.id === groupId);
+            const group = this.data.find((g) => g.id === groupId);
             if (!group)
                 continue;
             for (const subId of subs) {
-                const sub = group.subgroups?.find(s => s.id === subId);
+                const sub = group.subgroups?.find((s) => s.id === subId);
                 if (!sub)
                     continue;
                 this.selectionEl.appendChild(this.createChip(sub.label, false, () => this.toggleSubgroup(groupId, subId)));
@@ -192,16 +187,14 @@ class GroupPicker {
     }
     createChip(label, isParent, onRemove) {
         const chip = document.createElement('span');
-        chip.className = isParent
-            ? 'chip closeable group-picker__chip--parent'
-            : 'chip closeable';
+        chip.className = isParent ? 'chip closeable group-picker__chip--parent' : 'chip closeable';
         const btn = document.createElement('button');
         btn.setAttribute('aria-label', `${label} entfernen`);
         btn.innerHTML = `<span class="icon icon-close"></span>`;
         btn.addEventListener('click', (e) => {
             e.stopPropagation();
             onRemove();
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
         chip.append(document.createTextNode(label), btn);
         return chip;
     }
@@ -229,7 +222,7 @@ class GroupPicker {
         else {
             subs.add(subId);
         }
-        const group = this.data.find(g => g.id === groupId);
+        const group = this.data.find((g) => g.id === groupId);
         if (group && subs.size === (group.subgroups ?? []).length) {
             this.selectedSubs.delete(groupId);
             this.selectedParents.add(groupId);
@@ -244,7 +237,7 @@ class GroupPicker {
             this.expandedGroups.delete(groupId);
             groupEl?.classList.remove('is-expanded');
             if (subsEl) {
-                subsEl.style.height = subsEl.scrollHeight + 'px';
+                subsEl.style.height = `${subsEl.scrollHeight}px`;
                 requestAnimationFrame(() => {
                     subsEl.style.height = '0';
                 });
@@ -254,7 +247,7 @@ class GroupPicker {
             this.expandedGroups.add(groupId);
             groupEl?.classList.add('is-expanded');
             if (subsEl) {
-                subsEl.style.height = subsEl.scrollHeight + 'px';
+                subsEl.style.height = `${subsEl.scrollHeight}px`;
                 subsEl.addEventListener('transitionend', () => {
                     if (this.expandedGroups.has(groupId)) {
                         subsEl.style.height = 'auto';
@@ -275,7 +268,7 @@ class GroupPicker {
                 this.searchQuery = this.searchInput.value;
                 this.renderGroups();
             }, 120);
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
     }
     emitChange() {
         const selection = this.getSelection();
@@ -322,7 +315,7 @@ class GroupPicker {
         this.emitChange();
     }
     expandAll() {
-        this.data.forEach(g => this.expandedGroups.add(g.id));
+        this.data.forEach((g) => this.expandedGroups.add(g.id));
         this.renderGroups();
     }
     collapseAll() {
@@ -330,7 +323,7 @@ class GroupPicker {
         this.renderGroups();
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.innerHTML = '';
         this.container.classList.remove('group-picker');
     }

package/js/lightbox.d.ts

@@ -24,10 +24,10 @@ declare class Lightbox {
     private captionEl;
     private counterEl;
     private isZoomed;
-    private abortController;
+    private listeners;
     constructor(options: LightboxOptions);
     show(): void;
-    hide: () => void;
+    hide(): void;
     next(): void;
     prev(): void;
     isVisible(): boolean;