@aquera/nile-elements 1.3.0-beta-1.1 → 1.3.0-beta-1.2

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

@@ -42,6 +42,7 @@ import NileOptionGroup from '../nile-option-group/nile-option-group';
 import { GroupAttributes } from './nile-select.interface';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import { PortalManager } from './portal-manager';
+import { VisibilityManager } from '../utilities/visibility-manager';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -123,6 +124,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   private scrolling = false;
   private options: NileOption[] = [];
   private resizeController?: ResizeController;
+  private visibilityManager?: VisibilityManager;
+
 
   @query('.select') popup: NilePopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -333,6 +336,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = undefined;
     }
+    this.visibilityManager?.cleanup();
     // Clean up body append elements
     this.portalManager.cleanupPortalAppend();
     this.emit('nile-destroy');
@@ -373,6 +377,31 @@ export class NileSelect extends NileElement implements NileFormControl{
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
+  this.visibilityManager = new VisibilityManager({
+    host: this,
+    target: this.combobox,
+    enableVisibilityEffect: this.enableVisibilityEffect,
+    enableTabClose: this.enableTabClose,
+    isOpen: () => this.open,
+    onAnchorOutOfView: () => {
+      this.hide();
+      this.emit('nile-visibility-change', {
+        visible: false,
+        reason: 'anchor-out-of-view',
+        name: this.name,
+      });
+    },
+    onDocumentHidden: () => {
+      this.hide();
+      this.emit('nile-visibility-change', {
+        visible: false,
+        reason: 'document-hidden',
+        name: this.name,
+      });
+    },
+    emit: (event, detail) => this.emit(`nile-${event}`, detail),
+  });
+  
   }
 
   setCheckBoxInOption(checked: boolean): void {
@@ -428,89 +457,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
 
  
-   private anchorVisibilityObservers: IntersectionObserver[] = [];
- 
-   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;
-   }
- 
- 
-   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,
-       });
-     }
-   };
- 
- 
-   private setupAnchorVisibilityObserver(): void {
-     if (!this.enableVisibilityEffect) return;
- 
-     this.cleanupAnchorVisibilityObserver();
- 
-     const combobox = this.combobox;
-     if (!combobox) return;
-     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; 
-             }
-           }
-         },
-         {
-           root: rootContainer,
-           threshold: 0.1, 
-         }
-       );
- 
-       observer.observe(combobox);
-       this.anchorVisibilityObservers.push(observer);
-     });
- 
-     if (this.enableTabClose) {
-       document.addEventListener(
-         'visibilitychange',
-         this.handleDocumentVisibilityChange
-       );
-     }
-   }
-   
-   private cleanupAnchorVisibilityObserver(): void {
-     this.anchorVisibilityObservers.forEach((o) => o.disconnect());
-     this.anchorVisibilityObservers = [];
- 
-     document.removeEventListener(
-       'visibilitychange',
-       this.handleDocumentVisibilityChange
-     );
-   }
  
  
 
@@ -1162,6 +1108,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
 
       this.addOpenListeners();
+      this.visibilityManager?.setup();
 
       this.showNoResults = !this.getAllOptions()?.length;
 
@@ -1174,10 +1121,6 @@ export class NileSelect extends NileElement implements NileFormControl{
         this.setCurrentOption(this.currentOption);
       });
 
-      if (this.enableVisibilityEffect) {
-        this.setupAnchorVisibilityObserver();
-      }
-
       const { keyframes, options } = getAnimation(this, 'select.show', {
         dir: 'ltr',
       });
@@ -1203,6 +1146,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.emit('nile-hide', { value: this.value, name: this.name });
       this.showSelected = false;
       this.removeOpenListeners();
+      this.visibilityManager?.cleanup();
 
       await stopAnimations(this);
       const { keyframes, options } = getAnimation(this, 'select.hide', {

package/src/nile-tooltip/nile-tooltip.ts

@@ -22,6 +22,8 @@ import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup } from 'lit';
 import type NilePopup from '../nile-popup/nile-popup';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
+
 /**
  * Nile icon component.
  *
@@ -95,6 +97,12 @@ export class NileTooltip extends NileElement {
    */
   @property({ type: Boolean }) hoist = false;
 
+  private visibilityManager?: VisibilityManager;
+
+@property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+@property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+
   connectedCallback() {
     super.connectedCallback();
     this.handleBlur = this.handleBlur.bind(this);
@@ -122,10 +130,39 @@ export class NileTooltip extends NileElement {
       this.popup.active = true;
       this.popup.reposition();
     }
+
+     // Get the tooltip anchor (the element inside the default slot)
+  const anchorSlot = this.renderRoot.querySelector('slot:not([name])') as HTMLSlotElement | null;
+  const anchorEl = anchorSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+
+  // Initialize visibility manager
+  this.visibilityManager = new VisibilityManager({
+    host: this,
+    target: anchorEl || null,
+    enableVisibilityEffect: this.enableVisibilityEffect,
+    enableTabClose: this.enableTabClose,
+    isOpen: () => this.open,
+    onAnchorOutOfView: () => {
+      this.hide();
+      this.emit('nile-visibility-change', {
+        visible: false,
+        reason: 'anchor-out-of-view',
+      });
+    },
+    onDocumentHidden: () => {
+      this.hide();
+      this.emit('nile-visibility-change', {
+        visible: false,
+        reason: 'document-hidden',
+      });
+    },
+    emit: (event, detail) => this.emit(`nile-${event}`, detail),
+  });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.visibilityManager?.cleanup();
     this.removeEventListener('blur', this.handleBlur, true);
     this.removeEventListener('focus', this.handleFocus, true);
     this.removeEventListener('click', this.handleClick);
@@ -192,6 +229,7 @@ export class NileTooltip extends NileElement {
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open) {
+      this.visibilityManager?.setup();
       if (this.disabled) {
         return;
       }
@@ -209,6 +247,7 @@ export class NileTooltip extends NileElement {
 
       this.emit('nile-after-show');
     } else {
+      this.visibilityManager?.cleanup();
       // Hide
       this.emit('nile-hide');
 

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

@@ -42,6 +42,7 @@ import { VirtualSelectSearchManager } from './search-manager.js';
 import { VirtualSelectRenderer } from './renderer.js';
 import { PortalManager } from './portal-manager.js';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
 
 /**
  * Nile Virtual Select component.
@@ -123,6 +124,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   
   private scrollTimeout: number | undefined;
   private scrolling = false;
+  private visibilityManager?: VisibilityManager;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -297,6 +299,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   disconnectedCallback() {
     this.removeOpenListeners();
+    this.visibilityManager?.cleanup();
     // Clear any pending scroll timeout to prevent memory leaks
     if (this.scrollTimeout) {
       clearTimeout(this.scrollTimeout);
@@ -397,88 +400,33 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   
-   private anchorVisibilityObservers: IntersectionObserver[] = [];
-   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;
-   }
- 
-   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,
-       });
-     }
-   };
- 
-   private setupAnchorVisibilityObserver(): void {
-     if (!this.enableVisibilityEffect) return;
- 
-     this.cleanupAnchorVisibilityObserver();
- 
-     const combobox = this.combobox;
-     if (!combobox) return;
- 
-     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; 
-             }
-           }
-         },
-         {
-           root: rootContainer,
-           threshold: 0.1, 
-         }
-       );
- 
-       observer.observe(combobox);
-       this.anchorVisibilityObservers.push(observer);
-     });
- 
-     if (this.enableTabClose) {
-       document.addEventListener(
-         'visibilitychange',
-         this.handleDocumentVisibilityChange
-       );
-     }
-   }
- 
-   private cleanupAnchorVisibilityObserver(): void {
-     this.anchorVisibilityObservers.forEach((o) => o.disconnect());
-     this.anchorVisibilityObservers = [];
- 
-     document.removeEventListener(
-       'visibilitychange',
-       this.handleDocumentVisibilityChange
-     );
-   }
- 
+   protected firstUpdated(_changed: PropertyValues) {
+    super.firstUpdated?.(_changed);
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: this.combobox,               
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.open,
+      onAnchorOutOfView: () => {
+        this.hide();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+          name: this.name,
+        });
+      },
+      onDocumentHidden: () => {
+        this.hide();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+          name: this.name,
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
+  }
  
   
 
@@ -1003,6 +951,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange(): Promise<void> {
     if (this.open && !this.disabled) {
+      this.visibilityManager?.setup();
       this.showListbox = true;
       await this.updateComplete;
       await this.handleOpen();
@@ -1011,6 +960,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         this.portalManager.setupPortalAppend();
       }
     } else {
+      this.visibilityManager?.cleanup();
       await this.handleClose();
       this.showListbox = false;
       
@@ -1056,17 +1006,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.wasShowSelectedCheckedOnClose = false;
     }
  
-    if (this.enableVisibilityEffect) {
-      this.setupAnchorVisibilityObserver();
-    }
-
     this.filterVirtualOptions("");
     this.resetScrollPosition();
     this.emit('nile-after-show', { value: this.value, name: this.name });
   }
 
   private async handleClose(): Promise<void> {
-    this.cleanupAnchorVisibilityObserver();
     this.emit('nile-hide', { value: this.value, name: this.name });
     this.removeOpenListeners();
 

package/src/utilities/visibility-manager.ts

@@ -0,0 +1,104 @@
+
+export interface VisibilityManagerOptions {
+ 
+    host: HTMLElement;
+
+    target: HTMLElement | null;
+  
+    enableVisibilityEffect?: boolean;
+  
+    enableTabClose?: boolean;
+  
+    onAnchorOutOfView?: (root?: Element | Document | null) => void;
+ 
+    onDocumentHidden?: () => void;
+  
+    emit?: (event: string, detail?: Record<string, any>) => void;
+  
+    isOpen?: () => boolean;
+  }
+  
+  export class VisibilityManager {
+    private observers: IntersectionObserver[] = [];
+    private options: VisibilityManagerOptions;
+    private handleVisibilityChange: () => void;
+  
+    constructor(options: VisibilityManagerOptions) {
+      this.options = options;
+      this.handleVisibilityChange = this.onDocumentVisibilityChange.bind(this);
+    }
+  
+ 
+    setup(): void {
+      const {
+        target,
+        enableVisibilityEffect,
+        enableTabClose,
+      } = this.options;
+  
+      if (!enableVisibilityEffect || !target) return;
+  
+      this.cleanup(); 
+  
+      const scrollContainers = [...this.getScrollableAncestors(this.options.host), null];
+  
+      scrollContainers.forEach(rootContainer => {
+        const observer = new IntersectionObserver(
+          entries => {
+            for (const entry of entries) {
+              if (!entry.isIntersecting && this.options.isOpen?.()) {
+                this.options.onAnchorOutOfView?.(rootContainer);
+                this.options.emit?.('visibility-change', {
+                  visible: false,
+                  reason: 'anchor-out-of-view',
+                  root: rootContainer,
+                });
+                return;
+              }
+            }
+          },
+          { root: rootContainer, threshold: 0.1 }
+        );
+        observer.observe(target);
+        this.observers.push(observer);
+      });
+  
+      if (enableTabClose) {
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+      }
+    }
+  
+    cleanup(): void {
+      this.observers.forEach(o => o.disconnect());
+      this.observers = [];
+      document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+    }
+  
+    private onDocumentVisibilityChange(): void {
+      const { enableTabClose, isOpen, onDocumentHidden, emit } = this.options;
+      if (!enableTabClose) return;
+  
+      if (document.visibilityState === 'hidden' && isOpen?.()) {
+        onDocumentHidden?.();
+        emit?.('visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      }
+    }
+  
+    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;
+    }
+  }
+