@smilodon/core 1.3.0 → 1.3.2

package/dist/index.umd.js

@@ -1539,9 +1539,6 @@
             // 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();
@@ -1578,11 +1575,6 @@
                 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);
@@ -2122,40 +2114,6 @@
                 }, { 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;
@@ -2371,13 +2329,31 @@
             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}`);
@@ -2410,10 +2386,23 @@
                     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();
@@ -2876,11 +2865,6 @@
             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 = '';
@@ -2997,23 +2981,28 @@
             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() {