@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-2.0

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

@@ -247,6 +247,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Disable width synchronization */
   @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 }) bodyAppend = false;
+
   /**
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
@@ -256,6 +262,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @state() oldMaxOptionsVisible: number = 1;
   @state() showListbox: boolean = false;
+  
+  // Body append-related state
+  @state() private bodyAppendContainer: HTMLElement | null = null;
+  @state() private bodyAppendListbox: HTMLElement | null = null;
 
   /** Gets the validity state object */
   get validity() {
@@ -286,6 +296,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = undefined;
     }
+    // Clean up body append elements
+    this.cleanupBodyAppend();
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -343,6 +355,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.handleWindowError = this.handleWindowError.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.handleWindowScroll = this.handleWindowScroll.bind(this);
   }
 
   private addOpenListeners(): void {
@@ -350,6 +364,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
     window.addEventListener('error', this.handleWindowError);
+    
+    if (this.bodyAppend) {
+      window.addEventListener('resize', this.handleWindowResize);
+      window.addEventListener('scroll', this.handleWindowScroll, true);
+    }
   }
 
   private removeOpenListeners(): void {
@@ -357,6 +376,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
     window.removeEventListener('error', this.handleWindowError);
+    window.removeEventListener('resize', this.handleWindowResize);
+    window.removeEventListener('scroll', this.handleWindowScroll, true);
   }
 
   private handleFocus(): void {
@@ -374,8 +395,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     const path = event.composedPath(); 
     const hitSelf  = path.includes(this);
     const hitPopup = this.popup && path.includes(this.popup);
+    const hitBodyAppend = this.bodyAppend && this.bodyAppendContainer && path.includes(this.bodyAppendContainer);
 
-    if (!hitSelf && !hitPopup) {
+    if (!hitSelf && !hitPopup && !hitBodyAppend) {
       this.hide();
     }
   }
@@ -437,8 +459,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     const path = event.composedPath();
     const hitSelf  = path.includes(this);
     const hitPopup = this.popup && path.includes(this.popup);
+    const hitBodyAppend = this.bodyAppend && this.bodyAppendContainer && path.includes(this.bodyAppendContainer);
   
-    if (!hitSelf && !hitPopup) {
+    if (!hitSelf && !hitPopup && !hitBodyAppend) {
       this.hide();
     }
   };
@@ -456,6 +479,14 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   };
 
+  private handleWindowResize = (): void => {
+    this.updateBodyAppendPosition();
+  };
+
+  private handleWindowScroll = (): void => {
+    this.updateBodyAppendPosition();
+  };
+
   private handleFooterClick(event: MouseEvent): void {
     event.stopPropagation();
     event.preventDefault();
@@ -480,7 +511,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
 
     this.requestUpdate();
-    this.resetScrollPosition();
+    this.repaintOptionsContainer();
   }
 
   private unSelectAll(): void {
@@ -675,6 +706,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
     if (this.selectedOptions.length === 0) {
       this.showSelected = false;
+      this.filterVirtualOptions('');
+      this.repaintOptionsContainer();
     }
 
     this.calculateTotalWidthOfTags();
@@ -699,6 +732,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     
     if (!this.disableLocalSearch) {
       this.filterVirtualOptions(this.searchValue);
+      this.repaintOptionsContainer();
+    }
+  }
+  
+  repaintOptionsContainer() {
       this.resetScrollPosition();
       this.updateComplete.then(() => {
         const virtualized = this.shadowRoot?.querySelector('.virtualized') as HTMLElement;
@@ -710,7 +748,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
           }
         }
       });
-    }
   }
 
   handleScroll(e: Event): void {
@@ -801,6 +838,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = false;
     }
     this.requestUpdate();
+    
+    // Update body append content if it's active
+    if (this.bodyAppend && this.bodyAppendContainer) {
+      this.updateBodyAppendContent();
+    }
   }
 
   @watch('renderItemConfig', { waitUntilFirstUpdate: true })
@@ -818,6 +860,22 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = true;
     }
     this.requestUpdate();
+    
+    // Update body append content if it's active
+    if (this.bodyAppend && this.bodyAppendContainer) {
+      this.updateBodyAppendContent();
+    }
+  }
+
+  @watch('bodyAppend', { waitUntilFirstUpdate: true })
+  handleBodyAppendChange(): void {
+    if (this.open) {
+      if (this.bodyAppend) {
+        this.setupBodyAppend();
+      } else {
+        this.cleanupBodyAppend();
+      }
+    }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
@@ -825,9 +883,17 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     if (this.open && !this.disabled) {
       await this.handleOpen();
       this.showListbox = true;
+      
+      if (this.bodyAppend) {
+        this.setupBodyAppend();
+      }
     } else {
       await this.handleClose();
       this.showListbox = false;
+      
+      if (this.bodyAppend) {
+        this.cleanupBodyAppend();
+      }
     }
   }
 
@@ -1213,9 +1279,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         part="listbox"
         class="select__listbox ${this.searchEnabled
           ? 'select__search-enabled '
-          : ''}"
+          : ''} ${this.bodyAppend ? 'select__body-append-hidden' : ''}"
         tabindex="-1"
         @mouseup=${this.handleOptionClick}
+        style=${this.bodyAppend ? 'display: none;' : ''}
       >
         ${this.renderSearch()}
         ${this.renderLoader()}
@@ -1419,6 +1486,199 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       }
     });
   }
+
+  private createBodyAppendContainer(): HTMLElement {
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.zIndex = '9999';
+    container.style.pointerEvents = 'none';
+    container.className = 'nile-virtual-select-body-append';
+    
+    // Apply additional styling to match the original popup
+    container.style.background = 'white';
+    container.style.border = '1px solid #e0e0e0';
+    container.style.borderRadius = '4px';
+    container.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+    container.style.maxHeight = '300px';
+    container.style.overflow = 'hidden';
+    
+    return container;
+  }
+
+  private createBodyAppendListbox(): HTMLElement {
+    const listbox = document.createElement('div');
+    listbox.id = 'listbox';
+    listbox.setAttribute('role', 'listbox');
+    listbox.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    listbox.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+    listbox.setAttribute('aria-labelledby', 'label');
+    listbox.setAttribute('part', 'listbox');
+    listbox.className = `select__listbox ${this.searchEnabled ? 'select__search-enabled ' : ''}`;
+    listbox.setAttribute('tabindex', '-1');
+    
+    // Apply styling to match the original listbox
+    listbox.style.background = 'white';
+    listbox.style.border = 'none';
+    listbox.style.borderRadius = '4px';
+    listbox.style.maxHeight = '300px';
+    listbox.style.overflowY = 'auto';
+    
+    listbox.addEventListener('mouseup', this.handleOptionClick.bind(this));
+    return listbox;
+  }
+
+  private positionBodyAppend(): void {
+    if (!this.bodyAppendContainer || !this.popup) return;
+
+    const rect = this.getBoundingClientRect();
+    
+    // Position the body append container to match the popup position
+    this.bodyAppendContainer.style.left = `${rect.left}px`;
+    this.bodyAppendContainer.style.top = `${rect.bottom + 6}px`; // 6px is the distance from the popup
+    this.bodyAppendContainer.style.width = `${rect.width}px`;
+    this.bodyAppendContainer.style.pointerEvents = 'auto';
+  }
+
+  private updateBodyAppendPosition(): void {
+    if (this.bodyAppend && this.bodyAppendContainer) {
+      this.positionBodyAppend();
+    }
+  }
+
+  private async updateBodyAppendContent(): Promise<void> {
+    if (!this.bodyAppendListbox) return;
+
+    // Clear the body append listbox
+    this.bodyAppendListbox.innerHTML = '';
+    
+    // Create a new listbox element
+    const listbox = document.createElement('div');
+    listbox.id = 'listbox';
+    listbox.setAttribute('role', 'listbox');
+    listbox.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    listbox.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+    listbox.setAttribute('aria-labelledby', 'label');
+    listbox.setAttribute('part', 'listbox');
+    listbox.className = `select__listbox ${this.searchEnabled ? 'select__search-enabled ' : ''}`;
+    listbox.setAttribute('tabindex', '-1');
+    
+    // Render the content using Lit's render function
+    const { render } = await import('lit');
+    
+    // Render search
+    if (this.searchEnabled) {
+      const searchContent = this.renderSearch();
+      const searchDiv = document.createElement('div');
+      render(searchContent, searchDiv);
+      listbox.appendChild(searchDiv.firstElementChild as HTMLElement);
+    }
+    
+    // Render loader
+    const loaderContent = this.renderLoader();
+    const loaderDiv = document.createElement('div');
+    render(loaderContent, loaderDiv);
+    if (loaderDiv.firstElementChild) {
+      listbox.appendChild(loaderDiv.firstElementChild as HTMLElement);
+    }
+    
+    // Render virtualized content
+    const virtualizedContent = this.getVirtualizedContent();
+    const virtualizedDiv = document.createElement('div');
+    render(virtualizedContent, virtualizedDiv);
+    if (virtualizedDiv.firstElementChild) {
+      listbox.appendChild(virtualizedDiv.firstElementChild as HTMLElement);
+    }
+    
+    // Render footer
+    if (this.multiple) {
+      const footerContent = this.renderFooter();
+      const footerDiv = document.createElement('div');
+      render(footerContent, footerDiv);
+      if (footerDiv.firstElementChild) {
+        listbox.appendChild(footerDiv.firstElementChild as HTMLElement);
+      }
+    }
+    
+    // Append the listbox to the body append container
+    this.bodyAppendListbox.appendChild(listbox);
+    
+    // Re-attach event listeners
+    this.attachBodyAppendEventListeners();
+  }
+
+  private attachBodyAppendEventListeners(): void {
+    if (!this.bodyAppendListbox) return;
+
+    // Find the cloned listbox within the body append container
+    const clonedListbox = this.bodyAppendListbox.querySelector('.select__listbox') as HTMLElement;
+    if (!clonedListbox) return;
+
+    // Re-attach the option click handler - use event delegation for better performance
+    clonedListbox.addEventListener('mouseup', this.handleOptionClick.bind(this));
+    
+    // Also add click handler for nile-option elements specifically
+    clonedListbox.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      const option = target.closest('nile-option');
+      if (option) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleOptionClick(event);
+      }
+    });
+    
+    // Re-attach search handlers if search is enabled
+    const searchInput = clonedListbox.querySelector('nile-input');
+    if (searchInput) {
+      searchInput.addEventListener('nile-input', this.handleSearchChange.bind(this));
+      searchInput.addEventListener('nile-focus', this.handleSearchFocus.bind(this));
+      searchInput.addEventListener('nile-change', this.onInputChange.bind(this));
+    }
+
+    // Re-attach scroll handler
+    const virtualizedContainer = clonedListbox.querySelector('.virtualized') as HTMLElement;
+    if (virtualizedContainer) {
+      virtualizedContainer.addEventListener('scroll', this.handleScroll.bind(this));
+    }
+
+    // Re-attach footer handlers if multiple
+    if (this.multiple) {
+      const showSelectedSpan = clonedListbox.querySelector('.select__footer span[style*="cursor: pointer"]');
+      if (showSelectedSpan) {
+        showSelectedSpan.addEventListener('click', this.toggleShowSelected.bind(this));
+      }
+
+      const clearSpan = clonedListbox.querySelector('.select__clear');
+      if (clearSpan) {
+        clearSpan.addEventListener('click', this.unSelectAll.bind(this));
+      }
+    }
+  }
+
+  private setupBodyAppend(): void {
+    if (!this.bodyAppend) return;
+
+    this.bodyAppendContainer = this.createBodyAppendContainer();
+    this.bodyAppendListbox = this.createBodyAppendListbox();
+    
+    this.bodyAppendContainer.appendChild(this.bodyAppendListbox);
+    document.body.appendChild(this.bodyAppendContainer);
+    
+    this.positionBodyAppend();
+    
+    // Wait for the next tick to ensure the original listbox is rendered
+    this.updateComplete.then(async () => {
+      await this.updateBodyAppendContent();
+    });
+  }
+
+  private cleanupBodyAppend(): void {
+    if (this.bodyAppendContainer && this.bodyAppendContainer.parentNode) {
+      this.bodyAppendContainer.parentNode.removeChild(this.bodyAppendContainer);
+    }
+    this.bodyAppendContainer = null;
+    this.bodyAppendListbox = null;
+  }
 }
 
 setDefaultAnimation('select.show', {