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

package/dist/utilities/visibility-manager.cjs.js

@@ -0,0 +1,2 @@
+System.register([],function(_export,_context){"use strict";var t;function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}function _createForOfIteratorHelper(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!t){if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var _n=0,F=function F(){};return{s:F,n:function n(){return _n>=r.length?{done:!0}:{done:!1,value:r[_n++]};},e:function e(r){throw r;},f:F};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}var o,a=!0,u=!1;return{s:function s(){t=t.call(r);},n:function n(){var r=t.next();return a=r.done,r;},e:function e(r){u=!0,o=r;},f:function f(){try{a||null==t["return"]||t["return"]();}finally{if(u)throw o;}}};}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0;}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r);}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r);}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n;}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}return{setters:[],execute:function execute(){_export("V",t=/*#__PURE__*/function(){function t(_t){_classCallCheck(this,t);this.observers=[],this.options=_t,this.handleVisibilityChange=this.onDocumentVisibilityChange.bind(this);}return _createClass(t,[{key:"setup",value:function setup(){var _this=this;var _this$options=this.options,_t2=_this$options.target,i=_this$options.enableVisibilityEffect,e=_this$options.enableTabClose;if(!i||!_t2)return;this.cleanup();[].concat(_toConsumableArray(this.getScrollableAncestors(this.options.host)),[null]).forEach(function(i){var e=new IntersectionObserver(function(_t3){var _iterator=_createForOfIteratorHelper(_t3),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var _this$options$isOpen,_this$options2,_this$options$onAncho,_this$options3,_this$options$emit,_this$options4;var _e=_step.value;if(!_e.isIntersecting&&(_this$options$isOpen=(_this$options2=_this.options).isOpen)!==null&&_this$options$isOpen!==void 0&&_this$options$isOpen.call(_this$options2))return(_this$options$onAncho=(_this$options3=_this.options).onAnchorOutOfView)!==null&&_this$options$onAncho!==void 0&&_this$options$onAncho.call(_this$options3,i),void((_this$options$emit=(_this$options4=_this.options).emit)===null||_this$options$emit===void 0?void 0:_this$options$emit.call(_this$options4,"visibility-change",{visible:!1,reason:"anchor-out-of-view",root:i}));}}catch(err){_iterator.e(err);}finally{_iterator.f();}},{root:i,threshold:.1});e.observe(_t2),_this.observers.push(e);}),e&&document.addEventListener("visibilitychange",this.handleVisibilityChange);}},{key:"cleanup",value:function cleanup(){this.observers.forEach(function(_t4){return _t4.disconnect();}),this.observers=[],document.removeEventListener("visibilitychange",this.handleVisibilityChange);}},{key:"onDocumentVisibilityChange",value:function onDocumentVisibilityChange(){var _this$options5=this.options,_t5=_this$options5.enableTabClose,i=_this$options5.isOpen,e=_this$options5.onDocumentHidden,s=_this$options5.emit;_t5&&"hidden"===document.visibilityState&&(i===null||i===void 0?void 0:i())&&(e!==null&&e!==void 0&&e(),s===null||s===void 0?void 0:s("visibility-change",{visible:!1,reason:"document-hidden"}));}},{key:"getScrollableAncestors",value:function getScrollableAncestors(_t6){var i=[];var e=_t6.parentElement;for(;e;){var _t7=getComputedStyle(e);/(auto|scroll)/.test(_t7.overflow+_t7.overflowY+_t7.overflowX)&&i.push(e),e=e.parentElement;}return i;}}]);}());}};});
+//# sourceMappingURL=visibility-manager.cjs.js.map

package/dist/utilities/visibility-manager.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility-manager.cjs.js","sources":["../../../src/utilities/visibility-manager.ts"],"sourcesContent":["\nexport interface VisibilityManagerOptions {\n \n    host: HTMLElement;\n\n    target: HTMLElement | null;\n  \n    enableVisibilityEffect?: boolean;\n  \n    enableTabClose?: boolean;\n  \n    onAnchorOutOfView?: (root?: Element | Document | null) => void;\n \n    onDocumentHidden?: () => void;\n  \n    emit?: (event: string, detail?: Record<string, any>) => void;\n  \n    isOpen?: () => boolean;\n  }\n  \n  export class VisibilityManager {\n    private observers: IntersectionObserver[] = [];\n    private options: VisibilityManagerOptions;\n    private handleVisibilityChange: () => void;\n  \n    constructor(options: VisibilityManagerOptions) {\n      this.options = options;\n      this.handleVisibilityChange = this.onDocumentVisibilityChange.bind(this);\n    }\n  \n \n    setup(): void {\n      const {\n        target,\n        enableVisibilityEffect,\n        enableTabClose,\n      } = this.options;\n  \n      if (!enableVisibilityEffect || !target) return;\n  \n      this.cleanup(); \n  \n      const scrollContainers = [...this.getScrollableAncestors(this.options.host), null];\n  \n      scrollContainers.forEach(rootContainer => {\n        const observer = new IntersectionObserver(\n          entries => {\n            for (const entry of entries) {\n              if (!entry.isIntersecting && this.options.isOpen?.()) {\n                this.options.onAnchorOutOfView?.(rootContainer);\n                this.options.emit?.('visibility-change', {\n                  visible: false,\n                  reason: 'anchor-out-of-view',\n                  root: rootContainer,\n                });\n                return;\n              }\n            }\n          },\n          { root: rootContainer, threshold: 0.1 }\n        );\n        observer.observe(target);\n        this.observers.push(observer);\n      });\n  \n      if (enableTabClose) {\n        document.addEventListener('visibilitychange', this.handleVisibilityChange);\n      }\n    }\n  \n    cleanup(): void {\n      this.observers.forEach(o => o.disconnect());\n      this.observers = [];\n      document.removeEventListener('visibilitychange', this.handleVisibilityChange);\n    }\n  \n    private onDocumentVisibilityChange(): void {\n      const { enableTabClose, isOpen, onDocumentHidden, emit } = this.options;\n      if (!enableTabClose) return;\n  \n      if (document.visibilityState === 'hidden' && isOpen?.()) {\n        onDocumentHidden?.();\n        emit?.('visibility-change', {\n          visible: false,\n          reason: 'document-hidden',\n        });\n      }\n    }\n  \n    private getScrollableAncestors(element: HTMLElement): HTMLElement[] {\n      const scrollables: HTMLElement[] = [];\n      let parent = element.parentElement;\n      while (parent) {\n        const style = getComputedStyle(parent);\n        const canScroll = /(auto|scroll)/.test(\n          style.overflow + style.overflowY + style.overflowX\n        );\n        if (canScroll) scrollables.push(parent);\n        parent = parent.parentElement;\n      }\n      return scrollables;\n    }\n  }\n  "],"names":["VisibilityManager","t","options","this","observers","handleVisibilityChange","onDocumentVisibilityChange","bind","_createClass","key","value","setup","_this","_this$options","target","enableVisibilityEffect","enableTabClose","cleanup","concat","_toConsumableArray","getScrollableAncestors","host","forEach","rootContainer","observer","IntersectionObserver","entries","_step","_iterator","s","n","done","_this$options$isOpen","_this$options2","_this$options$onAncho","_this$options3","_this$options$emit","_this$options4","entry","isIntersecting","isOpen","onAnchorOutOfView","emit","visible","reason","root","err","e","f","threshold","observe","push","document","addEventListener","o","disconnect","removeEventListener","_this$options5","onDocumentHidden","visibilityState","element","scrollables","parent","parentElement","style","getComputedStyle","test","overflow","overflowY","overflowX"],"mappings":"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"}

package/dist/utilities/visibility-manager.esm.js

@@ -0,0 +1 @@
+class t{constructor(t){this.observers=[],this.options=t,this.handleVisibilityChange=this.onDocumentVisibilityChange.bind(this)}setup(){const{target:t,enableVisibilityEffect:i,enableTabClose:e}=this.options;if(!i||!t)return;this.cleanup();[...this.getScrollableAncestors(this.options.host),null].forEach((i=>{const e=new IntersectionObserver((t=>{for(const e of t)if(!e.isIntersecting&&this.options.isOpen?.())return this.options.onAnchorOutOfView?.(i),void this.options.emit?.("visibility-change",{visible:!1,reason:"anchor-out-of-view",root:i})}),{root:i,threshold:.1});e.observe(t),this.observers.push(e)})),e&&document.addEventListener("visibilitychange",this.handleVisibilityChange)}cleanup(){this.observers.forEach((t=>t.disconnect())),this.observers=[],document.removeEventListener("visibilitychange",this.handleVisibilityChange)}onDocumentVisibilityChange(){const{enableTabClose:t,isOpen:i,onDocumentHidden:e,emit:s}=this.options;t&&"hidden"===document.visibilityState&&i?.()&&(e?.(),s?.("visibility-change",{visible:!1,reason:"document-hidden"}))}getScrollableAncestors(t){const i=[];let e=t.parentElement;for(;e;){const t=getComputedStyle(e);/(auto|scroll)/.test(t.overflow+t.overflowY+t.overflowX)&&i.push(e),e=e.parentElement}return i}}export{t as V};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.3.0-beta-1.1",
+  "version": "1.3.0-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -220,4 +220,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -16,12 +16,16 @@ import { NileInput } from '../nile-input';
 
 import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
+
 
 // Define the custom element 'nile-auto-complete'
 @customElement('nile-auto-complete')
 export class NileAutoComplete extends NileElement {
 
   static styles: CSSResultGroup = styles;
+  private visibilityManager?: VisibilityManager;
+
 
   @query('nile-dropdown') dropdownElement: NileDropdown;
 
@@ -63,8 +67,45 @@ export class NileAutoComplete extends NileElement {
 
   @property({ type: Array }) allMenuItems: any = [];
 
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+
   @state() menuItems: any = [];
 
+
+  protected async firstUpdated(_changed: PropertyValues) {
+    
+    super.firstUpdated?.(_changed);
+    await this.updateComplete;
+    console.log('AutoComplete target:', this.inputElement?.input);
+
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: this.inputElement.input,               // element to observe
+      enableVisibilityEffect: this.enableVisibilityEffect,
+enableTabClose: this.enableTabClose,
+      isOpen: () => this.isDropdownOpen,
+      onAnchorOutOfView: () => {
+        this.isDropdownOpen = false;
+        this.dropdownElement?.hide();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.isDropdownOpen = false;
+        this.dropdownElement?.hide();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
+  }
   connectedCallback() {
     super.connectedCallback();
     this.renderItemFunction=(item:any)=>item;
@@ -77,6 +118,7 @@ export class NileAutoComplete extends NileElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeOpenListeners();
+    this.visibilityManager?.cleanup();
     this.portalManager.cleanupPortalAppend();
   }
 
@@ -118,11 +160,13 @@ export class NileAutoComplete extends NileElement {
   private handleDropdownOpenChange(): void {
     if (this.isDropdownOpen) {
       this.addOpenListeners();
+      this.visibilityManager?.setup();
       if (this.portal) {
         this.portalManager.setupPortalAppend();
       }
     } else {
       this.removeOpenListeners();
+      this.visibilityManager?.cleanup();
       if (this.portal) {
         this.portalManager.cleanupPortalAppend();
       }

package/src/nile-chip/nile-chip.ts

@@ -18,6 +18,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
 import NileElement, { NileFormControl } from '../internal/nile-element';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
 
 interface CustomEventDetail {
   value: string;
@@ -111,6 +112,15 @@ export class NileChip extends NileElement {
 
   @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;
 
+  private visibilityManager?: VisibilityManager;
+
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+
+  
+
 
   @property({ type: Boolean }) showTooltip: boolean = false;
 
@@ -142,6 +152,46 @@ export class NileChip extends NileElement {
     }
   }
  
+  protected async firstUpdated(_changed: PropertyValues) {
+    super.firstUpdated?.(_changed);
+    await this.updateComplete;
+  
+    const inputTarget =
+      this.noAutoComplete
+        ? this.renderRoot.querySelector('nile-input')?.input
+        : this.autoComplete?.inputElement?.input || this.autoComplete?.inputElement;
+  
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: inputTarget,
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.isDropdownOpen,
+      onAnchorOutOfView: () => {
+        this.isDropdownOpen = false;
+        if (this.autoComplete) {
+          this.autoComplete.isDropdownOpen = false;
+        }        
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.isDropdownOpen = false;
+        if (this.autoComplete) {
+          this.autoComplete.isDropdownOpen = false;
+        }
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
+  }
+
+  
   private handleDocumentClick = (event: MouseEvent) => {
     const path = event.composedPath();
     if (!path.includes(this)) {
@@ -163,6 +213,7 @@ export class NileChip extends NileElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.visibilityManager?.cleanup();
     document.removeEventListener('click', this.handleDocumentClick);
     this.emit('nile-destroy');
   }
@@ -394,6 +445,7 @@ export class NileChip extends NileElement {
     if (this.noAutoComplete) {
       return;
     }
+    this.visibilityManager?.setup();
     this.isDropdownOpen = true;
   }
 
@@ -407,6 +459,7 @@ export class NileChip extends NileElement {
     // Reset the input-related properties
     this.inputValue = '';
     this.isDropdownOpen = false;
+    this.visibilityManager?.cleanup();
     if (!this.noAutoComplete && this.autoComplete) {
       this.autoComplete.value = '';
       this.autoComplete.handleFocus();

package/src/nile-dropdown/nile-dropdown.ts

@@ -23,6 +23,7 @@ import type { NileMenu } from '../nile-menu';
 import type { NilePopup } from '../nile-popup';
 import '../nile-popup';
 import { DropdownPortalManager } from './portal-manager';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
 
 /**
  * Nile icon component.
@@ -118,7 +119,13 @@ export class NileDropdown extends NileElement {
    */
   @property({ type: Boolean, reflect: true }) portal = false;
 
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+
   private portalManager: DropdownPortalManager | null = null;
+  private visibilityManager?: VisibilityManager;
 
   connectedCallback() {
     super.connectedCallback();
@@ -139,7 +146,9 @@ export class NileDropdown extends NileElement {
     });
   }
 
-  firstUpdated() {
+  protected async firstUpdated(_changed: PropertyValues) {
+    super.firstUpdated?.(_changed);
+  
     this.panel.hidden = !this.open;
 
     // If the dropdown is visible on init, update its position
@@ -147,10 +156,38 @@ export class NileDropdown extends NileElement {
       this.addOpenListeners();
       this.popup.active = true;
     }
+  
+    await this.updateComplete;
+    const triggerNode = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+  
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: triggerNode || 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.removeOpenListeners();
     this.hide();
     this.emit('nile-destroy');
@@ -408,6 +445,7 @@ export class NileDropdown extends NileElement {
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
+    this.visibilityManager?.setup();
     if (this.disabled) {
       this.open = false;
       return;
@@ -442,6 +480,7 @@ export class NileDropdown extends NileElement {
       // Hide
       this.emit('nile-hide');
       this.removeOpenListeners();
+      this.visibilityManager?.cleanup();
 
       if (this.portal && this.portalManager) {
         this.portalManager.cleanupPortalAppend();

package/src/nile-inline-edit/nile-inline-edit.ts

@@ -14,15 +14,6 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-inline-edit.css';
 import NileElement from '../internal/nile-element';
-import {
-  getValueFromSlottedElement,
-  getDisplayValue,
-  setSlottedElementValue,
-  updateSlottedElementValue,
-  updateValueFromSlottedElement,
-  handleDocumentFocusIn,
-  handleDocumentMouseDown,
-} from './nile-inline-edit-utils';
 
 /**
  * Nile inline-edit component.
@@ -52,9 +43,6 @@ export class NileInlineEdit extends NileElement {
   /** Gives the Value to the Inline Edit */
   @property({ type: String, reflect: true }) value = '';
 
-  /** Maximum length for the placeholder value. Values longer than this will be truncated */
-  @property({ type: Number, attribute: 'max-placeholder-length' }) maxPlaceholderLength: number = 25;
-
   /* #endregion */
 
   /* #region Methods */
@@ -64,57 +52,11 @@ export class NileInlineEdit extends NileElement {
    * @slot This is a slot test
    */
 
-  private handleCloseResult(result: { shouldClose: boolean; newValue: string | null }) {
-    if (result.shouldClose) {
-      if (result.newValue !== null) {
-        this.value = result.newValue;
-      }
-      this.open = false;
-    }
-  }
-
-  private handleDocumentFocusInWrapper = (event: FocusEvent) => {
-    const result = handleDocumentFocusIn(event, this, this.open);
-    this.handleCloseResult(result);
-  };
-
-  private handleDocumentMouseDownWrapper = (event: MouseEvent) => {
-    const result = handleDocumentMouseDown(event, this, this.open);
-    this.handleCloseResult(result);
-  };
-
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    super.updated(changedProperties);
-    
-    if (changedProperties.has('open')) {
-      if (this.open) {
-        updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);
-        document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);
-        document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
-      } else {
-        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
-        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
-      }
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
-    document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
-  }
-
   private handleClick() {
     this.open = true;
   }
   public render(): TemplateResult {
-    // Use truncated value for display, or placeholder if empty
-    const displayValue = getDisplayValue(this.value, this.maxPlaceholderLength);
-    const textInsideContainer = displayValue || this.placeholder;
+    const textInsideContainer = this.value || this.placeholder;
     return html`
       <div class="inline__edit--label" part="label">${this.label}</div>
       ${this.open

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

@@ -10,6 +10,8 @@ import tippy, {
   createSingleton,
 } from 'tippy.js';
 import { parseFollowCursor, parseDuration,  } from './utils';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
+
 
 /**
  * Nile lite-tooltip component.
@@ -115,6 +117,14 @@ export class NileliteTooltip extends NileElement {
 
   @property({ type: Number }) interactiveBorder = 2;
 
+  private visibilityManager?: VisibilityManager;
+
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+  
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+
+
   private tooltipInstances?: Instance[];
   private singleInstance?: Instance;
   private singletonInstance?: Instance;
@@ -126,9 +136,40 @@ export class NileliteTooltip extends NileElement {
     super();
   }
 
-  firstUpdated(): void {
+  protected firstUpdated(): void {
     this.attachTooltip();
+  
+    // Get the target element (either 'for' reference or first child)
+    const targetEl =
+      (this.for && document.getElementById(this.for)) ||
+      (this.firstElementChild as HTMLElement | null);
+  
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: targetEl,
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.open,
+      onAnchorOutOfView: () => {
+        this.open = false;
+        this.hideAllTooltips();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.open = false;
+        this.hideAllTooltips();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
   }
+  
 
   public refresh() {
     this.attachTooltip();
@@ -332,8 +373,16 @@ if (this.enableRecursiveMode) {
     }
   }
 
+  private hideAllTooltips(): void {
+    this.singleInstance?.hide();
+    this.singletonInstance?.hide();
+    this.tooltipInstances?.forEach(t => t.hide());
+  }
+
+  
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    this.visibilityManager?.cleanup();
     this.destroyTooltips();
   }
 
@@ -360,10 +409,12 @@ if (this.enableRecursiveMode) {
 
     if (changed.has('open')) {
       if (this.open) {
+        this.visibilityManager?.setup();
         this.singleInstance?.show();
         this.singletonInstance?.show();
         this.tooltipInstances?.forEach(t => t.show());
       } else {
+        this.visibilityManager?.cleanup();
         this.singleInstance?.hide();
         this.singletonInstance?.hide();
         this.tooltipInstances?.forEach(t => t.hide());

package/src/nile-popover/nile-popover.ts

@@ -18,6 +18,8 @@ import NileElement from '../internal/nile-element';
 import { watch } from '../internal/watch';
 import { CSSResultGroup } from 'lit';
 import { PopoverPortalManager } from './portal-manager';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
+
 
 /**
  * Nile icon component.
@@ -74,6 +76,12 @@ export class NilePopover extends NileElement {
     | 'anchor' = 'anchor';
 
   private portalManager: PopoverPortalManager | null = null;
+  private visibilityManager?: VisibilityManager;
+
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
 
   /**
    * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
@@ -113,6 +121,7 @@ export class NilePopover extends NileElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.emit('nile-destroy');
+    this.visibilityManager?.cleanup();
     document.removeEventListener('click', this.handleDocumentClick);
     
     if (this.portalManager) {
@@ -121,6 +130,39 @@ export class NilePopover extends NileElement {
     }
   }
 
+  protected async firstUpdated(_changed: PropertyValues) {
+    super.firstUpdated?.(_changed);
+    await this.updateComplete;
+  
+    const anchorSlot = this.renderRoot.querySelector('slot[name="anchor"]') 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.isShow,
+      onAnchorOutOfView: () => {
+        this.isShow = false;
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.isShow = false;
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
+  }
+
+  
   protected updated(_changedProperties: PropertyValues): void {
     if (_changedProperties.has('open')) {
       this.isShow = this.open;
@@ -140,6 +182,7 @@ export class NilePopover extends NileElement {
   handleShowHide() {
     if (this.isShow) {
       this.emit('nile-show');
+      this.visibilityManager?.setup();
       if (this.portal && this.portalManager) {
         this.portalManager.setupPortalAppend();
       } else if (this.portal && !this.portalManager) {
@@ -148,6 +191,7 @@ export class NilePopover extends NileElement {
       }
     } else {
       this.emit('nile-hide');
+      this.visibilityManager?.cleanup();
       if (this.portal && this.portalManager) {
         this.portalManager.cleanupPortalAppend();
       }