@aquera/nile-elements 1.2.6-beta-1.0 → 1.2.6-beta-1.1

package/dist/src/nile-virtual-select/nile-virtual-select.js

@@ -115,7 +115,6 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.searchValue = '';
         /** Enable search functionality */
         this.searchEnabled = false;
-        this.enableVisibilityEffect = false;
         /** Search input placeholder */
         this.internalSearchPlaceHolder = 'Search...';
         /** Disable local search filtering */
@@ -187,24 +186,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
          */
         this.maxOptionsVisible = 3;
         this.oldMaxOptionsVisible = 1;
-        this.enableTabClose = false;
         this.showListbox = false;
         this.wasShowSelectedCheckedOnClose = false;
-        /** All active IntersectionObservers for visibility detection */
-        this.anchorVisibilityObservers = [];
-        /** Handles tab visibility (page hidden / tab switched) */
-        this.handleDocumentVisibilityChange = () => {
-            if (!this.enableTabClose)
-                return;
-            if (document.visibilityState === 'hidden' && this.open) {
-                this.hide();
-                this.emit('nile-visibility-change', {
-                    visible: false,
-                    reason: 'document-hidden',
-                    name: this.name,
-                });
-            }
-        };
         this.handleDocumentMouseDown = (event) => {
             if (!this.open)
                 return;
@@ -352,63 +335,6 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.hasFocus = false;
         this.emit('nile-blur');
     }
-    /** Utility: find ALL scrollable ancestors (not just the nearest) */
-    getScrollableAncestors(element) {
-        const scrollables = [];
-        let parent = element.parentElement;
-        while (parent) {
-            const style = getComputedStyle(parent);
-            const canScroll = /(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX);
-            if (canScroll) {
-                scrollables.push(parent);
-            }
-            parent = parent.parentElement;
-        }
-        return scrollables;
-    }
-    /** Sets up visibility tracking for all relevant contexts */
-    setupAnchorVisibilityObserver() {
-        if (!this.enableVisibilityEffect)
-            return;
-        this.cleanupAnchorVisibilityObserver();
-        const combobox = this.combobox;
-        if (!combobox)
-            return;
-        // Get all scrollable ancestors and viewport
-        const scrollContainers = [...this.getScrollableAncestors(this), null];
-        scrollContainers.forEach((rootContainer) => {
-            const observer = new IntersectionObserver((entries) => {
-                for (const entry of entries) {
-                    if (!entry.isIntersecting && this.open) {
-                        this.hide();
-                        this.emit('nile-visibility-change', {
-                            visible: false,
-                            reason: 'anchor-out-of-view',
-                            name: this.name,
-                            root: rootContainer,
-                        });
-                        return; // stop further triggers
-                    }
-                }
-            }, {
-                root: rootContainer,
-                threshold: 0.1, // 10% visible = visible
-            });
-            observer.observe(combobox);
-            this.anchorVisibilityObservers.push(observer);
-        });
-        // Attach tab visibility listener only if property enabled
-        if (this.enableTabClose) {
-            document.addEventListener('visibilitychange', this.handleDocumentVisibilityChange);
-        }
-    }
-    /** Cleans up all visibility observers and listeners */
-    cleanupAnchorVisibilityObserver() {
-        this.anchorVisibilityObservers.forEach((o) => o.disconnect());
-        this.anchorVisibilityObservers = [];
-        // Always remove listener to avoid stale callbacks
-        document.removeEventListener('visibilitychange', this.handleDocumentVisibilityChange);
-    }
     handleDocumentFocusIn(event) {
         if (!this.open)
             return;
@@ -648,6 +574,9 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     }
     handleSearchChange(e) {
         this.searchValue = e.detail.value;
+        if (this.portal) {
+            this.portalManager.updatePortalAppendPosition();
+        }
         this.emit('nile-search', {
             query: this.searchValue,
             name: this.name
@@ -709,6 +638,19 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     }
     filterVirtualOptions(searchValue) {
         const result = VirtualSelectSearchManager.filterVirtualOptions(searchValue, this.originalOptionItems, this.data, this.getDisplayText.bind(this), this.renderItemConfig?.getSearchText);
+        if (this.portal) {
+            this.portalManager.updatePortalAppendPosition();
+            this.updateComplete.then(() => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        this.resetScrollPosition();
+                    });
+                });
+            });
+        }
+        else {
+            this.resetScrollPosition();
+        }
         this.data = result.filteredItems;
         this.showNoResults = result.showNoResults;
         this.showSelected = false;
@@ -810,15 +752,11 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.data = [...this.originalOptionItems];
             this.wasShowSelectedCheckedOnClose = false;
         }
-        if (this.enableVisibilityEffect) {
-            this.setupAnchorVisibilityObserver();
-        }
         this.filterVirtualOptions("");
         this.resetScrollPosition();
         this.emit('nile-after-show', { value: this.value, name: this.name });
     }
     async handleClose() {
-        this.cleanupAnchorVisibilityObserver();
         this.emit('nile-hide', { value: this.value, name: this.name });
         this.removeOpenListeners();
         this.wasShowSelectedCheckedOnClose = this.showSelected;
@@ -1298,19 +1236,48 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.maxOptionsVisible = lastindex;
         }, 1);
     }
-    resetScrollPosition() {
-        this.updateComplete.then(() => {
-            if (this.virtualizedContainer && this.virtualizedContainer.isConnected) {
-                this.virtualizedContainer.scrollTop = 0;
-                const listbox = this.shadowRoot?.querySelector('.select__listbox');
-                if (listbox && listbox.isConnected) {
-                    listbox.scrollTop = 0;
+    async resetScrollPosition() {
+        await this.updateComplete;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                let listbox = null;
+                // Select listbox (portal vs non-portal)
+                if (this.portal && this.portalManager.portalContainerElement) {
+                    listbox = this.portalManager.portalContainerElement.querySelector('#listbox');
                 }
-                const virtualizer = this.virtualizedContainer.querySelector('lit-virtualizer');
+                else {
+                    listbox = this.shadowRoot?.querySelector('#listbox');
+                }
+                if (!listbox || !listbox.isConnected)
+                    return;
+                // Always reset scroll position
+                listbox.scrollTop = 0;
+                // When very few items, collapse overflow completely
+                const virtualized = listbox.querySelector('.virtualized');
+                if (virtualized && virtualized.isConnected) {
+                    const fewItems = this.data.length <= 5;
+                    if (fewItems) {
+                        // 👇 Prevent *any* scrolling and let height shrink
+                        virtualized.style.overflowY = 'hidden';
+                        virtualized.style.maxHeight = 'none';
+                        listbox.style.overflowY = 'hidden';
+                        listbox.style.maxHeight = 'fit-content';
+                    }
+                    else {
+                        // 👇 Re-enable scrolling when many items
+                        virtualized.style.overflowY = 'auto';
+                        virtualized.style.maxHeight = '';
+                        listbox.style.overflowY = 'auto';
+                        listbox.style.maxHeight = '';
+                    }
+                    virtualized.scrollTop = 0;
+                }
+                // lit-virtualizer (if used)
+                const virtualizer = listbox.querySelector('lit-virtualizer');
                 if (virtualizer && virtualizer.isConnected) {
                     virtualizer.scrollTop = 0;
                 }
-            }
+            });
         });
     }
 };
@@ -1377,9 +1344,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileVirtualSelect.prototype, "searchEnabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], NileVirtualSelect.prototype, "enableVisibilityEffect", void 0);
 __decorate([
     property({ attribute: 'internal-search-placeholder' })
 ], NileVirtualSelect.prototype, "internalSearchPlaceHolder", void 0);
@@ -1467,9 +1431,6 @@ __decorate([
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "oldMaxOptionsVisible", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], NileVirtualSelect.prototype, "enableTabClose", void 0);
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "showListbox", void 0);