@aquera/nile-elements 1.3.1-beta-1.0 → 1.3.1-beta-1

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,37 @@ export class NileTooltip extends NileElement {
       this.popup.active = true;
       this.popup.reposition();
     }
+
+  const anchorSlot = this.renderRoot.querySelector('slot:not([name])') as HTMLSlotElement | null;
+  const anchorEl = anchorSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+
+  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 +227,7 @@ export class NileTooltip extends NileElement {
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open) {
+      this.visibilityManager?.setup();
       if (this.disabled) {
         return;
       }
@@ -209,6 +245,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,32 @@ 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) {
+    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 +950,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 +959,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         this.portalManager.setupPortalAppend();
       }
     } else {
+      this.visibilityManager?.cleanup();
       await this.handleClose();
       this.showListbox = false;
       
@@ -1056,17 +1005,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;
+    }
+  }
+