@smilodon/core 1.3.1 → 1.3.2

package/dist/index.cjs

@@ -1535,9 +1535,6 @@ class EnhancedSelect extends HTMLElement {
         // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
         this._initializeStyles();
         console.log('[EnhancedSelect] Styles initialized');
-        // Initialize option renderer
-        this._initializeOptionRenderer();
-        console.log('[EnhancedSelect] Option renderer initialized');
         this._assembleDOM();
         console.log('[EnhancedSelect] DOM assembled');
         this._attachEventListeners();
@@ -1574,11 +1571,6 @@ class EnhancedSelect extends HTMLElement {
             clearTimeout(this._typeTimeout);
         if (this._searchTimeout)
             clearTimeout(this._searchTimeout);
-        // Cleanup option renderer
-        if (this._optionRenderer) {
-            this._optionRenderer.unmountAll();
-            console.log('[EnhancedSelect] Option renderer cleaned up');
-        }
         // Cleanup arrow click listener
         if (this._boundArrowClick && this._arrowContainer) {
             this._arrowContainer.removeEventListener('click', this._boundArrowClick);
@@ -2118,40 +2110,6 @@ class EnhancedSelect extends HTMLElement {
             }, { threshold: 0.1 });
         }
     }
-    _initializeOptionRenderer() {
-        const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
-        const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
-        const getDisabled = (item) => item?.disabled ?? false;
-        const rendererConfig = {
-            enableRecycling: true,
-            maxPoolSize: 100,
-            getValue,
-            getLabel,
-            getDisabled,
-            onSelect: (index) => {
-                this._selectOption(index);
-            },
-            onCustomEvent: (index, eventName, data) => {
-                console.log(`[EnhancedSelect] Custom event from option ${index}: ${eventName}`, data);
-                // Emit as a generic event since these aren't in the standard event map
-                this.dispatchEvent(new CustomEvent('option:custom-event', {
-                    detail: { index, eventName, data },
-                    bubbles: true,
-                    composed: true
-                }));
-            },
-            onError: (index, error) => {
-                console.error(`[EnhancedSelect] Error in option ${index}:`, error);
-                this.dispatchEvent(new CustomEvent('option:mount-error', {
-                    detail: { index, error },
-                    bubbles: true,
-                    composed: true
-                }));
-            }
-        };
-        this._optionRenderer = new OptionRenderer(rendererConfig);
-        console.log('[EnhancedSelect] Option renderer initialized with config:', rendererConfig);
-    }
     async _loadInitialSelectedItems() {
         if (!this._config.serverSide.fetchSelectedItems || !this._config.serverSide.initialSelectedValues) {
             return;
@@ -2367,13 +2325,31 @@ class EnhancedSelect extends HTMLElement {
         const options = Array.from(this._optionsContainer.children);
         // Clear previous active state
         if (this._state.activeIndex >= 0 && options[this._state.activeIndex]) {
-            options[this._state.activeIndex].setActive(false);
+            const prevOption = options[this._state.activeIndex];
+            // Check if it's a custom SelectOption or a lightweight DOM element
+            if ('setActive' in prevOption && typeof prevOption.setActive === 'function') {
+                prevOption.setActive(false);
+            }
+            else {
+                // Lightweight option - remove active class
+                prevOption.classList.remove('smilodon-option--active');
+                prevOption.setAttribute('aria-selected', 'false');
+            }
         }
         this._state.activeIndex = index;
         // Set new active state
         if (options[index]) {
-            options[index].setActive(true);
-            options[index].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            const option = options[index];
+            // Check if it's a custom SelectOption or a lightweight DOM element
+            if ('setActive' in option && typeof option.setActive === 'function') {
+                option.setActive(true);
+            }
+            else {
+                // Lightweight option - add active class
+                option.classList.add('smilodon-option--active');
+                option.setAttribute('aria-selected', 'true');
+            }
+            option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
             // Announce position for screen readers
             const total = options.length;
             this._announce(`Item ${index + 1} of ${total}`);
@@ -2406,10 +2382,23 @@ class EnhancedSelect extends HTMLElement {
                 return;
             }
             if (!this._state.selectedIndices.has(index)) {
-                const config = option.getConfig();
-                this._state.selectedIndices.add(index);
-                this._state.selectedItems.set(index, config.item);
-                option.setSelected(true);
+                // Check if it's a custom SelectOption or a lightweight DOM element
+                if ('getConfig' in option && typeof option.getConfig === 'function') {
+                    const config = option.getConfig();
+                    this._state.selectedIndices.add(index);
+                    this._state.selectedItems.set(index, config.item);
+                    option.setSelected(true);
+                }
+                else {
+                    // Lightweight option - get item from data attribute or state
+                    const item = this._state.loadedItems[index];
+                    if (item) {
+                        this._state.selectedIndices.add(index);
+                        this._state.selectedItems.set(index, item);
+                        option.classList.add('smilodon-option--selected');
+                        option.setAttribute('aria-selected', 'true');
+                    }
+                }
             }
         });
         this._updateInputDisplay();
@@ -2872,11 +2861,6 @@ class EnhancedSelect extends HTMLElement {
         if (this._loadMoreTrigger && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this._loadMoreTrigger);
         }
-        // Cleanup all rendered options (including custom components)
-        if (this._optionRenderer) {
-            this._optionRenderer.unmountAll();
-            console.log('[EnhancedSelect] Unmounted all option components');
-        }
         // Clear options container
         console.log('[EnhancedSelect] Clearing options container, previous children:', this._optionsContainer.children.length);
         this._optionsContainer.innerHTML = '';
@@ -2993,23 +2977,28 @@ class EnhancedSelect extends HTMLElement {
         console.log('[EnhancedSelect] _renderOptions complete, optionsContainer children:', this._optionsContainer.children.length);
     }
     _renderSingleOption(item, index, getValue, getLabel) {
-        if (!this._optionRenderer) {
-            console.error('[EnhancedSelect] Option renderer not initialized');
-            return;
-        }
-        // Check if selected
+        const option = document.createElement('div');
+        option.className = 'option';
+        option.id = `${this._uniqueId}-option-${index}`;
+        const value = getValue(item);
+        const label = getLabel(item);
+        console.log('[EnhancedSelect] Rendering option', index, ':', { value, label });
+        option.textContent = label;
+        option.dataset.value = String(value);
+        option.dataset.index = String(index); // Also useful for debugging/selectors
+        // Check if selected using selectedItems map
         const isSelected = this._state.selectedIndices.has(index);
-        const isFocused = this._state.activeIndex === index;
-        console.log('[EnhancedSelect] Rendering option', index, ':', {
-            value: getValue(item),
-            label: getLabel(item),
-            isSelected,
-            isFocused,
-            hasCustomComponent: !!item.optionComponent
+        if (isSelected) {
+            option.classList.add('selected');
+            option.setAttribute('aria-selected', 'true');
+        }
+        else {
+            option.setAttribute('aria-selected', 'false');
+        }
+        option.addEventListener('click', () => {
+            this._selectOption(index);
         });
-        // Use the OptionRenderer to render both lightweight and custom component options
-        const optionElement = this._optionRenderer.render(item, index, isSelected, isFocused, this._uniqueId);
-        this._optionsContainer.appendChild(optionElement);
+        this._optionsContainer.appendChild(option);
         console.log('[EnhancedSelect] Option', index, 'appended to optionsContainer');
     }
     _addLoadMoreTrigger() {