@smilodon/core 1.0.10 → 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
@@ -2322,6 +2359,36 @@ 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();
+        }
+    }
+    _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');