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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.2.6-beta-1.0",
+  "version": "1.2.6-beta-1.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-select/nile-select.ts

@@ -167,8 +167,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
 
-  @property({ type: Boolean, reflect: true, attribute: true }) enableVisibilityEffect = false;
-
   @property({ type: Boolean, reflect: true }) blockValueChange = false;
 
   @property({ type: Boolean, reflect: true }) disableLocalSearch = false;
@@ -269,10 +267,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @state() oldMaxOptionsVisible: number = 1;
 
- 
-  @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
-
-
   @property({ type: Boolean }) showNoResults: boolean = false;
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
@@ -293,6 +287,10 @@ export class NileSelect extends NileElement implements NileFormControl{
   /** loading indicator for virtual select */
   @property({ type: Boolean, reflect: true, attribute: true }) loading = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -426,100 +424,6 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
-
-   /** All active IntersectionObservers for visibility detection */
-   private anchorVisibilityObservers: IntersectionObserver[] = [];
-
-   /** Utility: find ALL scrollable ancestors (not just the nearest) */
-   private getScrollableAncestors(element: HTMLElement): HTMLElement[] {
-     const scrollables: HTMLElement[] = [];
-     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;
-   }
- 
-   /** Handles tab visibility (page hidden / tab switched) */
-   private handleDocumentVisibilityChange = (): void => {
-     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,
-       });
-     }
-   };
- 
-   /** Sets up visibility tracking for all relevant contexts */
-   private setupAnchorVisibilityObserver(): void {
-     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 */
-   private cleanupAnchorVisibilityObserver(): void {
-     this.anchorVisibilityObservers.forEach((o) => o.disconnect());
-     this.anchorVisibilityObservers = [];
- 
-     // Always remove listener to avoid stale callbacks
-     document.removeEventListener(
-       'visibilitychange',
-       this.handleDocumentVisibilityChange
-     );
-   }
- 
- 
-
   /**
    * Handles the click event on the footer.
    * @param event - The click event.
@@ -712,6 +616,97 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.hide();
   }
 
+   /** All active IntersectionObservers for visibility detection */
+   private anchorVisibilityObservers: IntersectionObserver[] = [];
+
+   /** Utility: find ALL scrollable ancestors (not just the nearest) */
+   private getScrollableAncestors(element: HTMLElement): HTMLElement[] {
+     const scrollables: HTMLElement[] = [];
+     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;
+   }
+ 
+   /** Handles tab visibility (page hidden / tab switched) */
+   private handleDocumentVisibilityChange = (): void => {
+     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,
+       });
+     }
+   };
+ 
+   /** Sets up visibility tracking for all relevant contexts */
+   private setupAnchorVisibilityObserver(): void {
+     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 */
+   private cleanupAnchorVisibilityObserver(): void {
+     this.anchorVisibilityObservers.forEach((o) => o.disconnect());
+     this.anchorVisibilityObservers = [];
+ 
+     // Always remove listener to avoid stale callbacks
+     document.removeEventListener(
+       'visibilitychange',
+       this.handleDocumentVisibilityChange
+     );
+   }
+
   private handleComboboxMouseDown(event: MouseEvent) {
     const path = event.composedPath();
     const isIconButton = path.some(
@@ -1183,7 +1178,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       if (this.enableVisibilityEffect) {
         this.setupAnchorVisibilityObserver();
       }
-
+      
       const { keyframes, options } = getAnimation(this, 'select.show', {
         dir: 'ltr',
       });

package/src/nile-select/virtual-scroll-helper.ts

@@ -27,11 +27,11 @@ export class VirtualScrollHelper {
           .disableLocalSearch=${component.disableLocalSearch}
           .optionsLoading=${component.optionsLoading}
           .multiple=${component.multiple}
+          .enableVisibilityEffect=${component.enableVisibilityEffect}
           .enableTabClose=${component.enableTabClose}
           .helpText=${component.helpText}
           .errorMessage=${component.errorMessage}
           .warning=${component.warning}
-          .enableVisibilityEffect=${component.enableVisibilityEffect}
           .error=${component.error}
           .success=${component.success}
           .disabled=${component.disabled}

package/src/nile-virtual-select/nile-virtual-select.ts

@@ -162,8 +162,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Enable search functionality */
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
 
-  @property({ type: Boolean, reflect: true, attribute: true }) enableVisibilityEffect = false;
-
   /** Search input placeholder */
   @property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
 
@@ -188,6 +186,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Sets the input to a warning state */
   @property({ type: Boolean }) warning = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
+
   /** Sets the input to an error state */
   @property({ type: Boolean }) error = false;
 
@@ -266,10 +268,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   maxOptionsVisible = 3;
 
   @state() oldMaxOptionsVisible: number = 1;
-
-  @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
-
-
   @state() showListbox: boolean = false;
   @state() private wasShowSelectedCheckedOnClose: boolean = false;
 
@@ -396,101 +394,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.emit('nile-blur');
   }
 
-   /** All active IntersectionObservers for visibility detection */
-   private anchorVisibilityObservers: IntersectionObserver[] = [];
-
-   /** Utility: find ALL scrollable ancestors (not just the nearest) */
-   private getScrollableAncestors(element: HTMLElement): HTMLElement[] {
-     const scrollables: HTMLElement[] = [];
-     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;
-   }
- 
-   /** Handles tab visibility (page hidden / tab switched) */
-   private handleDocumentVisibilityChange = (): void => {
-     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,
-       });
-     }
-   };
- 
-   /** Sets up visibility tracking for all relevant contexts */
-   private setupAnchorVisibilityObserver(): void {
-     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 */
-   private cleanupAnchorVisibilityObserver(): void {
-     this.anchorVisibilityObservers.forEach((o) => o.disconnect());
-     this.anchorVisibilityObservers = [];
- 
-     // Always remove listener to avoid stale callbacks
-     document.removeEventListener(
-       'visibilitychange',
-       this.handleDocumentVisibilityChange
-     );
-   }
- 
- 
-  
-
-
   private handleDocumentFocusIn(event: FocusEvent): void {
     if (!this.open) return;                         
     const path = event.composedPath(); 
@@ -567,6 +470,98 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   };
 
+  /** All active IntersectionObservers for visibility detection */
+  private anchorVisibilityObservers: IntersectionObserver[] = [];
+
+  /** Utility: find ALL scrollable ancestors (not just the nearest) */
+  private getScrollableAncestors(element: HTMLElement): HTMLElement[] {
+    const scrollables: HTMLElement[] = [];
+    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;
+  }
+
+  /** Handles tab visibility (page hidden / tab switched) */
+  private handleDocumentVisibilityChange = (): void => {
+    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,
+      });
+    }
+  };
+
+  /** Sets up visibility tracking for all relevant contexts */
+  private setupAnchorVisibilityObserver(): void {
+    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 */
+  private cleanupAnchorVisibilityObserver(): void {
+    this.anchorVisibilityObservers.forEach((o) => o.disconnect());
+    this.anchorVisibilityObservers = [];
+
+    // Always remove listener to avoid stale callbacks
+    document.removeEventListener(
+      'visibilitychange',
+      this.handleDocumentVisibilityChange
+    );
+  }
+
+
   /**
    * This is a workaround for an error in the Lit Labs virtualizer.
    * Since there are no specific guidelines available to fix the issue,
@@ -831,6 +826,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   handleSearchChange(e: any): void {
     this.searchValue = e.detail.value;
+    if (this.portal) {
+      this.portalManager.updatePortalAppendPosition();
+    }
     
     this.emit('nile-search', { 
       query: this.searchValue,
@@ -908,7 +906,18 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       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;
@@ -928,7 +937,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   }
 
-  
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange(): void {
     this.selectionChanged();
@@ -1033,11 +1041,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       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 });
@@ -1597,23 +1606,48 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }, 1);
   }
 
-  private resetScrollPosition(): void {
-    this.updateComplete.then(() => {
-      if (this.virtualizedContainer && this.virtualizedContainer.isConnected) {
-        this.virtualizedContainer.scrollTop = 0;
-        
-        const listbox = this.shadowRoot?.querySelector('.select__listbox') as HTMLElement;
-        if (listbox && listbox.isConnected) {
-          listbox.scrollTop = 0;
+  private async resetScrollPosition(): Promise<void> {
+    await this.updateComplete;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        let listbox: HTMLElement | null = null;
+  
+
+        if (this.portal && this.portalManager.portalContainerElement) {
+          listbox = this.portalManager.portalContainerElement.querySelector('#listbox') as HTMLElement;
+        } else {
+          listbox = this.shadowRoot?.querySelector('#listbox') as HTMLElement;
         }
-        
-        const virtualizer = this.virtualizedContainer.querySelector('lit-virtualizer') as HTMLElement;
+  
+        if (!listbox || !listbox.isConnected) return;
+  
+        listbox.scrollTop = 0;
+        const virtualized = listbox.querySelector('.virtualized') as HTMLElement;
+        if (virtualized && virtualized.isConnected) {
+          const fewItems = this.data.length <= 5;
+  
+          if (fewItems) {
+            virtualized.style.overflowY = 'hidden';
+            virtualized.style.maxHeight = 'none';
+            listbox.style.overflowY = 'hidden';
+            listbox.style.maxHeight = 'fit-content';
+          } else {
+            virtualized.style.overflowY = 'auto';
+            virtualized.style.maxHeight = '';
+            listbox.style.overflowY = 'auto';
+            listbox.style.maxHeight = '';
+          }
+  
+          virtualized.scrollTop = 0;
+        }
+        const virtualizer = listbox.querySelector('lit-virtualizer') as HTMLElement;
         if (virtualizer && virtualizer.isConnected) {
           virtualizer.scrollTop = 0;
         }
-      }
+      });
     });
   }
+  
 
 }