@smilodon/core 1.3.0 → 1.3.2

package/README.md

@@ -97,13 +97,6 @@ See the [main documentation](https://github.com/navidrezadoost/smilodon#readme)
 - **Sub-millisecond Search**: Fenwick tree indexing for O(log n) queries
 - **60 FPS Scrolling**: Hardware-accelerated virtualization
 
-### ✨ Custom Components (NEW in v1.2.0)
-- **Framework Components**: Pass React, Vue, or Svelte components for option rendering
-- **Component Pooling**: Automatic recycling of up to 100 component instances
-- **Lifecycle Management**: Full mount/unmount/update lifecycle control
-- **Mixed Mode**: Use custom components alongside lightweight options
-- **See**: [Custom Option Components Guide](https://github.com/navidrezadoost/smilodon/blob/main/docs/CUSTOM-OPTION-COMPONENTS.md)
-
 ### 🎯 Production Ready
 - **TypeScript First**: Complete type definitions included
 - **Zero Dependencies**: 6.6 KB gzipped runtime
@@ -122,7 +115,7 @@ See the [main documentation](https://github.com/navidrezadoost/smilodon#readme)
 
 ```typescript
 interface SmilodonSelectElement extends HTMLElement {
-  items: SelectItem[];           // Dataset (can be millions of items)
+  items: SelectItem[] | string[] | number[];  // Dataset (can be millions of items)
   value: any;                    // Current selected value
   placeholder?: string;          // Placeholder text
   searchable?: boolean;          // Enable search (default: true)
@@ -137,10 +130,47 @@ interface SelectItem {
   value: any;                    // Value (can be any type)
   disabled?: boolean;            // Disable this option
   group?: string;                // Optgroup name
-  optionComponent?: CustomOptionFactory;  // (v1.2.0+) Custom component for this option
 }
 ```
 
+> **Flexible Input Formats:**
+> - **Object arrays**: `[{ value: '1', label: 'Option 1' }, ...]`
+> - **String arrays**: `['Apple', 'Banana', 'Cherry']` - automatically converted to `SelectItem` format
+> - **Number arrays**: `[1, 2, 3, 5, 8]` - automatically converted to `SelectItem` format
+
+### Examples with Different Input Types
+
+#### Object Array (Traditional)
+```javascript
+select.items = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' }
+];
+```
+
+#### String Array (Auto-converted)
+```javascript
+select.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
+// Automatically becomes:
+// [
+//   { value: 'Apple', label: 'Apple' },
+//   { value: 'Banana', label: 'Banana' },
+//   ...
+// ]
+```
+
+#### Number Array (Auto-converted)
+```javascript
+select.items = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89];
+// Automatically becomes:
+// [
+//   { value: 1, label: '1' },
+//   { value: 2, label: '2' },
+//   ...
+// ]
+```
+
 ### Events
 
 ```typescript

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() {