@smilodon/core 1.0.9 → 1.0.11

package/dist/index.cjs

@@ -865,6 +865,13 @@ const defaultConfig = {
         preloadAdjacent: true,
         scrollRestoration: 'auto',
     },
+    expandable: {
+        enabled: false,
+        collapsedHeight: '300px',
+        expandedHeight: '500px',
+        expandLabel: 'Show more',
+        collapseLabel: 'Show less',
+    },
     callbacks: {},
     enabled: true,
     searchable: false,
@@ -975,6 +982,7 @@ class EnhancedSelect extends HTMLElement {
             lastScrollPosition: 0,
             lastNotifiedQuery: null,
             lastNotifiedResultCount: 0,
+            isExpanded: false,
         };
         // Create DOM structure
         this._container = this._createContainer();
@@ -1267,17 +1275,39 @@ class EnhancedSelect extends HTMLElement {
         right: 0;
         margin-top: 4px;
         max-height: 300px;
-        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
         background: var(--select-dropdown-bg, white);
         border: 1px solid var(--select-dropdown-border, #ccc);
         border-radius: var(--select-border-radius, 4px);
         box-shadow: var(--select-dropdown-shadow, 0 4px 6px rgba(0,0,0,0.1));
         z-index: var(--select-dropdown-z-index, 1000);
+        transition: max-height 0.3s ease-in-out;
       }
       
       .options-container {
         position: relative;
         transition: opacity 0.2s ease-in-out;
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      .expand-toggle {
+        padding: 8px;
+        text-align: center;
+        background: #f9fafb;
+        border-top: 1px solid #e5e7eb;
+        cursor: pointer;
+        font-size: 12px;
+        color: #6b7280;
+        font-weight: 500;
+        transition: background 0.2s;
+        flex-shrink: 0;
+      }
+
+      .expand-toggle:hover {
+        background: #f3f4f6;
+        color: #374151;
       }
 
       .option {
@@ -1540,6 +1570,13 @@ class EnhancedSelect extends HTMLElement {
             return;
         this._state.isOpen = true;
         this._dropdown.style.display = 'block';
+        // Set initial height based on expandable config
+        if (this._config.expandable.enabled) {
+            const height = this._state.isExpanded
+                ? (this._config.expandable.expandedHeight || '500px')
+                : (this._config.expandable.collapsedHeight || '300px');
+            this._dropdown.style.maxHeight = height;
+        }
         this._input.setAttribute('aria-expanded', 'true');
         this._updateArrowRotation();
         // Clear search query when opening to show all options
@@ -2264,24 +2301,33 @@ class EnhancedSelect extends HTMLElement {
                 });
                 this._optionsContainer.appendChild(header);
                 group.options.forEach(item => {
-                    this._renderSingleOption(item, getValue, getLabel);
+                    // Find original index for correct ID generation and selection
+                    const index = this._state.loadedItems.indexOf(item);
+                    if (index !== -1) {
+                        this._renderSingleOption(item, index, getValue, getLabel);
+                    }
                 });
             });
         }
         else {
             // Normal rendering (flat list or filtered)
-            const itemsToRender = query
-                ? this._state.loadedItems.filter((item) => {
+            let hasRenderedItems = false;
+            this._state.loadedItems.forEach((item, index) => {
+                // Apply filter if query exists
+                if (query) {
                     try {
                         const label = String(getLabel(item)).toLowerCase();
-                        return label.includes(query);
+                        if (!label.includes(query))
+                            return;
                     }
                     catch (e) {
-                        return false;
+                        return;
                     }
-                })
-                : this._state.loadedItems;
-            if (itemsToRender.length === 0 && !this._state.isBusy) {
+                }
+                hasRenderedItems = true;
+                this._renderSingleOption(item, index, getValue, getLabel);
+            });
+            if (!hasRenderedItems && !this._state.isBusy) {
                 const empty = document.createElement('div');
                 empty.className = 'empty-state';
                 if (query) {
@@ -2292,11 +2338,6 @@ class EnhancedSelect extends HTMLElement {
                 }
                 this._optionsContainer.appendChild(empty);
             }
-            else {
-                itemsToRender.forEach((item) => {
-                    this._renderSingleOption(item, getValue, getLabel);
-                });
-            }
         }
         // Append Busy Indicator if busy
         if (this._state.isBusy && this._config.busyBucket.enabled) {
@@ -2318,27 +2359,57 @@ class EnhancedSelect extends HTMLElement {
         else if ((this._config.loadMore.enabled || this._config.infiniteScroll.enabled) && this._state.loadedItems.length > 0) {
             this._addLoadMoreTrigger();
         }
+        // Render Expand Button if enabled
+        if (this._config.expandable.enabled) {
+            this._renderExpandButton();
+        }
     }
-    _renderSingleOption(item, getValue, getLabel) {
+    _renderExpandButton() {
+        const button = document.createElement('div');
+        button.className = 'expand-toggle';
+        button.textContent = this._state.isExpanded
+            ? (this._config.expandable.collapseLabel || 'Show less')
+            : (this._config.expandable.expandLabel || 'Show more');
+        button.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent closing dropdown
+            this._toggleExpand();
+        });
+        this._dropdown.appendChild(button);
+    }
+    _toggleExpand() {
+        this._state.isExpanded = !this._state.isExpanded;
+        const height = this._state.isExpanded
+            ? (this._config.expandable.expandedHeight || '500px')
+            : (this._config.expandable.collapsedHeight || '300px');
+        this._dropdown.style.maxHeight = height;
+        // Re-render button to update label
+        const existingButton = this._dropdown.querySelector('.expand-toggle');
+        if (existingButton) {
+            existingButton.textContent = this._state.isExpanded
+                ? (this._config.expandable.collapseLabel || 'Show less')
+                : (this._config.expandable.expandLabel || 'Show more');
+        }
+    }
+    _renderSingleOption(item, index, getValue, getLabel) {
         const option = document.createElement('div');
         option.className = 'option';
+        option.id = `${this._uniqueId}-option-${index}`;
         const value = getValue(item);
         const label = getLabel(item);
         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 = Array.from(this._state.selectedItems.values()).some(selectedItem => {
-            const selectedValue = getValue(selectedItem);
-            return selectedValue === value;
-        });
+        const isSelected = this._state.selectedIndices.has(index);
         if (isSelected) {
             option.classList.add('selected');
+            option.setAttribute('aria-selected', 'true');
+        }
+        else {
+            option.setAttribute('aria-selected', 'false');
         }
         option.addEventListener('click', () => {
-            const index = this._state.loadedItems.indexOf(item);
-            if (index !== -1) {
-                this._selectOption(index);
-            }
+            this._selectOption(index);
         });
         this._optionsContainer.appendChild(option);
     }