@smilodon/core 1.0.5 → 1.0.7

package/dist/index.js

@@ -1479,7 +1479,6 @@ class EnhancedSelect extends HTMLElement {
         this._input.addEventListener('input', (e) => {
             if (!this._config.searchable)
                 return;
-            console.log('[EnhancedSelect] Input event fired', e.target.value);
             const query = e.target.value;
             this._handleSearch(query);
         });
@@ -1505,7 +1504,6 @@ class EnhancedSelect extends HTMLElement {
             this._intersectionObserver = new IntersectionObserver((entries) => {
                 entries.forEach((entry) => {
                     if (entry.isIntersecting) {
-                        console.log('[InfiniteScroll] Sentinel intersected. isBusy:', this._state.isBusy);
                         if (!this._state.isBusy) {
                             this._loadMoreItems();
                         }
@@ -1597,7 +1595,6 @@ class EnhancedSelect extends HTMLElement {
         }
     }
     _handleSearch(query) {
-        console.log('[EnhancedSelect] _handleSearch called with:', JSON.stringify(query));
         this._state.searchQuery = query;
         // Clear previous search timeout
         if (this._searchTimeout) {
@@ -1608,12 +1605,10 @@ class EnhancedSelect extends HTMLElement {
         this._state.isSearching = false;
         // Ensure dropdown is open when searching
         if (!this._state.isOpen) {
-            console.log('[EnhancedSelect] Opening dropdown for search');
             this._handleOpen();
         }
         else {
             // Filter and render options immediately
-            console.log('[EnhancedSelect] Dropdown already open, re-rendering options');
             this._renderOptions();
         }
         // Get filtered items based on search query - searches ENTIRE phrase
@@ -1633,7 +1628,6 @@ class EnhancedSelect extends HTMLElement {
             })
             : this._state.loadedItems;
         const count = filteredItems.length;
-        console.log(`[EnhancedSelect] Search results: ${count} items found for query "${searchQuery}"`);
         // Announce search results for accessibility
         if (searchQuery) {
             this._announce(`${count} result${count !== 1 ? 's' : ''} found for "${query}"`);
@@ -1914,32 +1908,49 @@ class EnhancedSelect extends HTMLElement {
             return;
         const target = this._config.scrollToSelected.multiSelectTarget;
         const indices = Array.from(this._state.selectedIndices).sort((a, b) => a - b);
-        const targetIndex = target === 'first' ? indices[0] : indices[indices.length - 1];
-        // FIX: Find the option element by ID instead of index in children
-        // because children list might be filtered or reordered
+        // For multi-select, find the closest selected item to the current scroll position
+        let targetIndex;
+        if (this._config.selection.mode === 'multi' && indices.length > 1) {
+            // Calculate which selected item is closest to the center of the viewport
+            const dropdownRect = this._dropdown.getBoundingClientRect();
+            const viewportCenter = this._dropdown.scrollTop + (dropdownRect.height / 2);
+            // Find the selected item closest to viewport center
+            let closestIndex = indices[0];
+            let closestDistance = Infinity;
+            for (const index of indices) {
+                const optionId = `${this._uniqueId}-option-${index}`;
+                const option = this._optionsContainer.querySelector(`[id="${optionId}"]`);
+                if (option) {
+                    const optionTop = option.offsetTop;
+                    const distance = Math.abs(optionTop - viewportCenter);
+                    if (distance < closestDistance) {
+                        closestDistance = distance;
+                        closestIndex = index;
+                    }
+                }
+            }
+            targetIndex = closestIndex;
+        }
+        else {
+            // For single select or only one selected item, use the configured target
+            targetIndex = target === 'first' ? indices[0] : indices[indices.length - 1];
+        }
+        // Find and scroll to the target option
         const optionId = `${this._uniqueId}-option-${targetIndex}`;
-        // We need to search in shadow root or options container
-        // Since options are custom elements, we can find them by ID if we set it (we do)
-        // But wait, we set ID on the element instance, but is it in the DOM?
-        // If filtered out, it won't be in the DOM.
-        // If we are searching, we might not want to scroll to selected if it's not visible
-        // But if we just opened the dropdown, we usually want to see the selected item.
-        // If the selected item is filtered out, we can't scroll to it.
-        // Try to find the element in the options container
-        // Note: querySelector on shadowRoot works if we set the ID attribute
-        // In _renderOptions we set: option.id = ...
         const option = this._optionsContainer.querySelector(`[id="${optionId}"]`);
         if (option) {
+            // Use smooth scrolling with center alignment for better UX
             option.scrollIntoView({
                 block: this._config.scrollToSelected.block || 'center',
                 behavior: 'smooth',
             });
+            // Also set it as active for keyboard navigation
+            this._setActive(targetIndex);
         }
     }
     async _loadMoreItems() {
         if (this._state.isBusy)
             return;
-        console.log('[InfiniteScroll] _loadMoreItems triggered');
         this._setBusy(true);
         // Save scroll position before loading
         if (this._dropdown) {
@@ -1953,7 +1964,6 @@ class EnhancedSelect extends HTMLElement {
         try {
             // Emit event for parent to handle
             this._state.currentPage++;
-            console.log(`[InfiniteScroll] Emitting loadMore event for page ${this._state.currentPage}`);
             this._emit('loadMore', { page: this._state.currentPage, items: [] });
             this._config.callbacks.onLoadMore?.(this._state.currentPage);
             // NOTE: We do NOT set isBusy = false here.
@@ -2008,14 +2018,6 @@ class EnhancedSelect extends HTMLElement {
         // we need to maintain scroll position during the update
         if (this._state.preserveScrollPosition && this._dropdown) {
             const targetScrollTop = this._state.lastScrollPosition;
-            console.log('[InfiniteScroll] setItems: before render', {
-                previousLength,
-                newLength,
-                lastScrollPosition: this._state.lastScrollPosition,
-                scrollTop: this._dropdown.scrollTop,
-                scrollHeight: this._dropdown.scrollHeight,
-                clientHeight: this._dropdown.clientHeight
-            });
             // Only clear loading if we actually got more items
             if (newLength > previousLength) {
                 this._state.isBusy = false;
@@ -2029,13 +2031,6 @@ class EnhancedSelect extends HTMLElement {
             requestAnimationFrame(() => {
                 if (this._dropdown) {
                     this._dropdown.scrollTop = targetScrollTop;
-                    console.log('[InfiniteScroll] setItems: after render', {
-                        newLength,
-                        lastScrollPosition: this._state.lastScrollPosition,
-                        scrollTop: this._dropdown.scrollTop,
-                        scrollHeight: this._dropdown.scrollHeight,
-                        clientHeight: this._dropdown.clientHeight
-                    });
                 }
             });
             // Only clear preserveScrollPosition if we got new items
@@ -2211,7 +2206,6 @@ class EnhancedSelect extends HTMLElement {
      * Render options based on current state
      */
     _renderOptions() {
-        console.log('[EnhancedSelect] _renderOptions called');
         // Cleanup observer
         if (this._loadMoreTrigger && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this._loadMoreTrigger);
@@ -2367,7 +2361,6 @@ class EnhancedSelect extends HTMLElement {
         this._optionsContainer.appendChild(container);
         // Setup intersection observer for auto-load
         if (this._intersectionObserver && this._loadMoreTrigger) {
-            console.log('[InfiniteScroll] Observing sentinel');
             this._intersectionObserver.observe(this._loadMoreTrigger);
         }
     }