@smilodon/core 1.0.9 → 1.0.11

package/dist/index.umd.js

@@ -869,6 +869,13 @@
             preloadAdjacent: true,
             scrollRestoration: 'auto',
         },
+        expandable: {
+            enabled: false,
+            collapsedHeight: '300px',
+            expandedHeight: '500px',
+            expandLabel: 'Show more',
+            collapseLabel: 'Show less',
+        },
         callbacks: {},
         enabled: true,
         searchable: false,
@@ -979,6 +986,7 @@
                 lastScrollPosition: 0,
                 lastNotifiedQuery: null,
                 lastNotifiedResultCount: 0,
+                isExpanded: false,
             };
             // Create DOM structure
             this._container = this._createContainer();
@@ -1271,17 +1279,39 @@
         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 {
@@ -1544,6 +1574,13 @@
                 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
@@ -2268,24 +2305,33 @@
                     });
                     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) {
@@ -2296,11 +2342,6 @@
                     }
                     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) {
@@ -2322,27 +2363,57 @@
             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);
         }