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

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

@@ -41,6 +41,7 @@ import { VirtualScrollHelper } from './virtual-scroll-helper';
 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';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -109,7 +110,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   private formControlController: FormControlController | null;
   private virtualScrollHelper!: VirtualScrollHelper;
-
+  private readonly portalManager = new PortalManager(this);
 
   private readonly hasSlotController = new HasSlotController(
     this,
@@ -174,6 +175,12 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
+  /** 
+   * When true, the listbox will be appended to the document body instead of the parent container.
+   * This is useful when the parent has overflow: hidden, clip-path, or transform applied.
+   */
+  @property({ type: Boolean, reflect: true }) portal = false;
+
   /** Allows more than one option to be selected. */
   @property({
     reflect: true,
@@ -305,6 +312,8 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.handleWindowScroll = this.handleWindowScroll.bind(this);
 
     // Because this is a form control, it shouldn't be opened initially
     this.open = false;
@@ -318,6 +327,8 @@ export class NileSelect extends NileElement implements NileFormControl{
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = undefined;
     }
+    // Clean up body append elements
+    this.portalManager.cleanupPortalAppend();
     this.emit('nile-destroy');
   }
 
@@ -371,12 +382,19 @@ export class NileSelect extends NileElement implements NileFormControl{
     document.addEventListener('focusin', this.handleDocumentFocusIn);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    
+    if (this.portal) {
+      window.addEventListener('resize', this.handleWindowResize);
+      window.addEventListener('scroll', this.handleWindowScroll, true);
+    }
   }
 
   private removeOpenListeners() {
     document.removeEventListener('focusin', this.handleDocumentFocusIn);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    window.removeEventListener('resize', this.handleWindowResize);
+    window.removeEventListener('scroll', this.handleWindowScroll, true);
   }
 
   private handleFocus() {
@@ -391,9 +409,13 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   private handleDocumentFocusIn(event: FocusEvent) {
-    // Close when focusing out of the select
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
+    if (!this.open) return;                         
+    const path = event.composedPath(); 
+    const hitSelf  = path.includes(this);
+    const hitPopup = this.popup && path.includes(this.popup);
+    const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+
+    if (!hitSelf && !hitPopup && !hitPortalAppend) {
       this.hide();
     }
   }
@@ -411,7 +433,7 @@ export class NileSelect extends NileElement implements NileFormControl{
    * Toggles the display of selected options in the dropdown
    * @param event - the event object
    */
-  private toggleShowSelected(event: Event): void {
+  toggleShowSelected(event: Event): void {
     event.stopPropagation();
     event.preventDefault();
     // Only toggle if there are selected options
@@ -432,13 +454,18 @@ export class NileSelect extends NileElement implements NileFormControl{
     if(this.enableGroupHeader) {
       this.handleGroupShowSelected();
     }
+
+    // Update portal content if portal is active
+    if (this.portal && this.open) {
+      this.portalManager.updatePortalOptions();
+    }
     // this.requestUpdate();
   }
 
   /**
    * Deselects all options and updates the value, selectedOptions, and displayLabel properties accordingly
    */
-  private unSlectAll(): void {
+  unSlectAll(): void {
     this.showSelected = false;
     const allOptions = this.getAllOptions();
     allOptions.forEach(el => {
@@ -452,6 +479,11 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.selectionChanged();
     this.emit('nile-change', { value: this.value, name: this.name });
     this.emit('nile-clear',{ value: this.multiple?this.value:'', name: this.name })
+    
+    // Update portal content if portal is active
+    if (this.portal && this.open) {
+      this.portalManager.updatePortalOptions();
+    }
   }
 
   private handleDocumentKeyDown(event: KeyboardEvent) {
@@ -555,13 +587,26 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   private handleDocumentMouseDown(event: MouseEvent) {
-    // Close when clicking outside of the select
+    if (!this.open) return;                        
+  
     const path = event.composedPath();
-    if (this && !path.includes(this)) {
+    const hitSelf  = path.includes(this);
+    const hitPopup = this.popup && path.includes(this.popup);
+    const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+  
+    if (!hitSelf && !hitPopup && !hitPortalAppend) {
       this.hide();
     }
   }
 
+  private handleWindowResize = (): void => {
+    this.portalManager.updatePortalAppendPosition();
+  };
+
+  private handleWindowScroll = (): void => {
+    this.portalManager.updatePortalAppendPosition();
+  };
+
   private handleLabelClick() {
     this.displayInput.focus();
     this.hide();
@@ -617,7 +662,7 @@ export class NileSelect extends NileElement implements NileFormControl{
     event.preventDefault();
   }
 
-  private handleOptionClick(event: MouseEvent) {
+  handleOptionClick(event: MouseEvent) {
     const target = event.target as HTMLElement;
     const option = target.closest('nile-option');
 
@@ -668,6 +713,11 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
       this.requestUpdate();
     }
+
+    // Update portal content if portal is active
+    if (this.portal && this.open) {
+      this.portalManager.updatePortalOptions();
+    }
   }
 
   private handleDefaultSlotChange() {
@@ -689,6 +739,11 @@ export class NileSelect extends NileElement implements NileFormControl{
         .whenDefined('nile-option')
         .then(() => this.handleDefaultSlotChange());
     }
+
+    // Update portal content if portal is active
+    if (this.portal && this.open) {
+      this.portalManager.updatePortalOptions();
+    }
   }
 
   private handleTagRemove(event: NileRemoveEvent, option: NileOption) {
@@ -809,6 +864,11 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     // Update selection, value, and display label
     this.selectionChanged();
+    
+    // Update portal content if portal is active
+    if (this.portal && this.open) {
+      this.portalManager.updatePortalOptions();
+    }
   }
 
   // Toggles an option's selected state
@@ -950,6 +1010,11 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
     });
 
+    // Update portal content if portal is active
+    if (this.portal && this.open) {
+      this.portalManager.updatePortalOptions();
+    }
+
     return filteredOptions;
   }
 
@@ -977,6 +1042,17 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
+  @watch('portal', { waitUntilFirstUpdate: true })
+  handlePortalAppendChange(): void {
+    if (this.open) {
+      if (this.portal) {
+        this.portalManager.setupPortalAppend();
+      } else {
+        this.portalManager.cleanupPortalAppend();
+      }
+    }
+  }
+
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open && !this.disabled) {
@@ -1016,6 +1092,10 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.searchValue = '';
       this.filterOptions(this.searchValue);
 
+      if (this.portal) {
+        this.portalManager.setupPortalAppend();
+      }
+
       this.emit('nile-after-show', { value: this.value, name: this.name });
       if (this.autoFocusSearch) {
         this.handleInputAfterInit();
@@ -1034,6 +1114,10 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.listbox.hidden = true;
       this.popup.active = false;
 
+      if (this.portal) {
+        this.portalManager.cleanupPortalAppend();
+      }
+
       this.searchValue = '';
       this.emit('nile-after-hide', { value: this.value, name: this.name });
     }
@@ -1260,10 +1344,10 @@ export class NileSelect extends NileElement implements NileFormControl{
               'select--large': this.size === 'large',
             })}
             placement=${this.placement}
-            strategy=${this.hoist ? 'fixed' : 'absolute'}
+            strategy=${this.portal ? 'fixed' : (this.hoist ? 'fixed' : 'absolute')}
             distance="6"
-            flip
-            shift
+            ?flip=${!this.portal}
+            ?shift=${!this.portal}
             sync=${ifDefined(!this.noWidthSync ? 'width' : undefined)}
             auto-size="vertical"
             auto-size-padding="10"
@@ -1434,11 +1518,12 @@ export class NileSelect extends NileElement implements NileFormControl{
               part="listbox"
               class="select__listbox ${this.searchEnabled
                 ? 'select__search-enabled '
-                : ''}"
+                : ''} ${this.portal ? 'select__portal-append-hidden' : ''}"
               tabindex="-1"
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
               @scroll=${this.handleScroll}
+              style=${this.portal ? 'display: none;' : ''}
             >
               ${this.searchEnabled
                 ? html` <div class="select__search">