@aquera/nile-elements 1.2.8-beta-1.7 → 1.2.8-beta-1.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.2.8-beta-1.7",
+  "version": "1.2.8-beta-1.9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -10,8 +10,12 @@ import { styles } from './nile-auto-complete.css';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import { NileDropdown } from '../nile-dropdown';
+import { watch } from '../internal/watch';
+import { AutoCompletePortalManager } from './portal-manager';
+import { NileInput } from '../nile-input';
 
 import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 // Define the custom element 'nile-auto-complete'
 @customElement('nile-auto-complete')
@@ -21,12 +25,22 @@ export class NileAutoComplete extends NileElement {
 
   @query('nile-dropdown') dropdownElement: NileDropdown;
 
+  @query('nile-input') inputElement: NileInput;
+
   // Define component properties
 
   @property({ type: Boolean }) disabled: boolean = false;
 
   @property({ type: Boolean }) isDropdownOpen: boolean = false;
 
+  /** 
+   * When true, the dropdown menu 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;
+
+  private readonly portalManager = new AutoCompletePortalManager(this);
+
   @property({ type: Boolean }) enableVirtualScroll: boolean = false;
 
   @property({ type: Boolean }) openOnFocus: boolean = false;
@@ -54,6 +68,16 @@ export class NileAutoComplete extends NileElement {
   connectedCallback() {
     super.connectedCallback();
     this.renderItemFunction=(item:any)=>item;
+    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.handleWindowScroll = this.handleWindowScroll.bind(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+    this.portalManager.cleanupPortalAppend();
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -61,13 +85,102 @@ export class NileAutoComplete extends NileElement {
     if (changedProperties.has('allMenuItems')){
       this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
       this.setVirtualMenuWidth();
+      if (this.portal && this.isDropdownOpen) {
+        this.portalManager.updatePortalOptions();
+      }
+    }
+    if (changedProperties.has('isDropdownOpen')) {
+      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
+      this.handleDropdownOpenChange();
     }
-    if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
     if (changedProperties.has('value')){
       this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
+      if (this.portal && this.isDropdownOpen) {
+        this.portalManager.updatePortalOptions();
+    }
+  }
+    if (changedProperties.has('portal')) {
+      this.handlePortalChange();
     }
   }
 
+  @watch('portal', { waitUntilFirstUpdate: true })
+  handlePortalChange(): void {
+    if (this.isDropdownOpen) {
+      if (this.portal) {
+        this.portalManager.setupPortalAppend();
+      } else {
+        this.portalManager.cleanupPortalAppend();
+      }
+    }
+  }
+
+  private handleDropdownOpenChange(): void {
+    if (this.isDropdownOpen) {
+      this.addOpenListeners();
+      if (this.portal) {
+        this.portalManager.setupPortalAppend();
+      }
+    } else {
+      this.removeOpenListeners();
+      if (this.portal) {
+        this.portalManager.cleanupPortalAppend();
+      }
+    }
+  }
+
+  private addOpenListeners(): void {
+    document.addEventListener('focusin', this.handleDocumentFocusIn);
+    document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    
+    if (this.portal) {
+      window.addEventListener('resize', this.handleWindowResize);
+      window.addEventListener('scroll', this.handleWindowScroll, true);
+    }
+  }
+
+  private removeOpenListeners(): void {
+    document.removeEventListener('focusin', this.handleDocumentFocusIn);
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    window.removeEventListener('resize', this.handleWindowResize);
+    window.removeEventListener('scroll', this.handleWindowScroll, true);
+  }
+
+  private handleDocumentFocusIn(event: FocusEvent) {
+    if (!this.isDropdownOpen) return;
+    const path = event.composedPath();
+    const hitSelf = path.includes(this);
+    const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);
+    const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+
+    if (!hitSelf && !hitDropdown && !hitPortalAppend) {
+      this.isDropdownOpen = false;
+      this.dropdownElement?.hide();
+    }
+  }
+
+  private handleDocumentMouseDown(event: MouseEvent) {
+    if (!this.isDropdownOpen) return;
+  
+    const path = event.composedPath();
+    const hitSelf = path.includes(this);
+    const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);
+    const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+  
+    if (!hitSelf && !hitDropdown && !hitPortalAppend) {
+      this.isDropdownOpen = false;
+      this.dropdownElement?.hide();
+    }
+  }
+
+  private handleWindowResize = (): void => {
+    this.portalManager.updatePortalAppendPosition();
+  };
+
+  private handleWindowScroll = (): void => {
+    this.portalManager.updatePortalAppendPosition();
+  };
+
   public render(): TemplateResult {
     const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();
     return html`
@@ -96,7 +209,7 @@ export class NileAutoComplete extends NileElement {
   
   getVirtualizedContent():TemplateResult{
     return html`
-      <nile-menu class="virtualized__menu" @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper">
+      <nile-menu class="virtualized__menu" @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper" style=${this.portal ? 'display: none;' : ''}>
         ${virtualize({
           items: this.menuItems,
           renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),
@@ -108,21 +221,34 @@ export class NileAutoComplete extends NileElement {
 
   getContent():TemplateResult{
     return html`
-      <nile-menu id="content-menu" @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
+      <nile-menu id="content-menu" @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper" style=${this.portal ? 'display: none;' : ''}>
         ${this.menuItems.map((item: any)  => this.getItemRenderFunction(item))}
       </nile-menu>`
   }
 
-  getItemRenderFunction(item:any):TemplateResult{
-    const value=this.renderItemFunction(item)
-    return html`
-      <nile-menu-item value=${value}>
-        ${value}
-      </nile-menu-item>
-    `;
-  }
+ getItemRenderFunction(item: any): TemplateResult {
+  const value = this.renderItemFunction(item);
+  const hasTooltip = !!item.tooltip;
+  const shouldShowTooltip =
+    hasTooltip && (!item.tooltip.for || item.tooltip.for === 'menu');
+  const tooltipContent = hasTooltip ? item.tooltip.content : value;
+
+  return shouldShowTooltip
+    ? html`
+        <nile-menu-item value=${value}>
+          <nile-lite-tooltip allowHTML .content=${tooltipContent}>
+            <span class="menu-item-text">${unsafeHTML(value)}</span>
+          </nile-lite-tooltip>
+        </nile-menu-item>
+      `
+    : html`
+        <nile-menu-item value=${value}>${unsafeHTML(value)}</nile-menu-item>
+      `;
+}
+
+  
 
-  private handleSelect(event: CustomEvent) {
+  handleSelect(event: CustomEvent) {
     this.value = event.detail.value;
     this.emit('nile-complete', { value: event.detail.value });
     this.isDropdownOpen = false;
@@ -148,7 +274,12 @@ export class NileAutoComplete extends NileElement {
     this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);
 
     this.isDropdownOpen = this.menuItems.length > 0;
-    if (this.isDropdownOpen) this.dropdownElement?.show();
+    if (this.isDropdownOpen) {
+      this.dropdownElement?.show();
+      if (this.portal) {
+        this.portalManager.updatePortalOptions();
+      }
+    }
   }
 
   public handleFocus() {
@@ -156,6 +287,10 @@ export class NileAutoComplete extends NileElement {
       return;
     }
 
+    if(this.portal) {
+      this.inputElement?.focus();
+    }
+
     // Delay opening the dropdown to allow focus to take effect
     setTimeout(() => {
       this.isDropdownOpen = true;

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

@@ -0,0 +1,410 @@
+import { 
+  autoUpdate, 
+  computePosition, 
+  flip, 
+  offset, 
+  shift, 
+  size, 
+  platform,
+  type Placement,
+  type MiddlewareData,
+  type ComputePositionConfig
+} from '@floating-ui/dom';
+import { PortalUtils, PortalContentUtils, PortalEventUtils } from './portal-utils';
+
+export class AutoCompletePortalManager {
+  private portalContainer: HTMLElement | null = null;
+  private originalMenuParent: HTMLElement | null = null;
+  private measuredMenuHeight: number | null = null;
+  private component: any;
+  private clonedMenu: HTMLElement | null = null;
+  private cleanupAutoUpdate: (() => void) | null = null;
+  private currentPlacement: Placement = 'bottom';
+  private currentMiddlewareData: MiddlewareData | null = null;
+
+  constructor(component: any) {
+    this.component = component;
+  }
+
+  private createPortalAppendContainer(): HTMLElement {
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.zIndex = '9999';
+    container.style.pointerEvents = 'none';
+    container.style.width = 'auto';
+    container.style.minWidth = 'auto';
+    container.className = 'nile-auto-complete-portal-append';
+    return container;
+  }
+
+  positionPortalAppend(): void {
+    if (!this.portalContainer || !this.component.dropdownElement) return;
+
+    this.measureMenuHeight();
+    this.computeFloatingUIPosition();
+  }
+
+  private measureMenuHeight(): void {
+    if (this.measuredMenuHeight || !this.portalContainer) return;
+
+    this.portalContainer.style.position = 'absolute';
+    this.portalContainer.style.visibility = 'hidden';
+    this.portalContainer.style.top = '0px';
+    this.portalContainer.style.left = '0px';
+    
+    this.portalContainer.offsetHeight;
+    
+    this.measuredMenuHeight = this.portalContainer.offsetHeight;
+    
+    this.portalContainer.style.visibility = '';
+  }
+
+  private async computeFloatingUIPosition(): Promise<void> {
+    if (!this.portalContainer) return;
+
+    const referenceElement = this.component.inputElement || this.component;
+    const floatingElement = this.portalContainer;
+
+    try {
+      const { x, y, placement, middlewareData } = await this.calculateFloatingUIPosition(
+        referenceElement,
+        floatingElement
+      );
+
+      this.applyFloatingUIPosition(floatingElement, referenceElement, x, y, placement, middlewareData);
+
+    } catch (error) {
+      console.warn('Floating UI positioning failed, falling back to simple positioning:', error);
+      this.fallbackPositioning();
+    }
+  }
+
+  private async calculateFloatingUIPosition(
+    referenceElement: HTMLElement,
+    floatingElement: HTMLElement
+  ): Promise<{ x: number; y: number; placement: Placement; middlewareData: MiddlewareData }> {
+    const boundary = PortalUtils.findBoundaryElements(referenceElement);
+    // Use 'bottom-start' or 'top-start' to align left edges for auto-width menu
+    const basePlacement = PortalUtils.getOptimalPlacement(referenceElement);
+    const initialPlacement = basePlacement === 'top' ? 'top-start' : 'bottom-start';
+    const middleware = this.createFloatingUIMiddleware(boundary);
+
+    return await computePosition(referenceElement, floatingElement, {
+      placement: initialPlacement,
+      strategy: 'fixed',
+      middleware,
+      platform: this.createCustomPlatform()
+    });
+  }
+
+  private createFloatingUIMiddleware(boundary: Element[] | undefined): ComputePositionConfig['middleware'] {
+    return [
+      offset(4),
+      size({
+        apply: this.handleSizeMiddleware.bind(this),
+        padding: 10,
+        boundary: boundary
+      }),
+      flip({
+        fallbackPlacements: ['bottom-start', 'top-start', 'bottom', 'top', 'bottom-end', 'top-end'],
+        fallbackStrategy: 'bestFit',
+        padding: 10,
+        boundary: boundary
+      }),
+      shift({
+        padding: 10,
+        crossAxis: true,
+        boundary: boundary
+      })
+    ];
+  }
+
+  private handleSizeMiddleware({ availableWidth, availableHeight, elements, rects }: {
+    availableWidth: number;
+    availableHeight: number;
+    elements: { floating: HTMLElement };
+    rects: { reference: { x: number; y: number; width: number; height: number } };
+  }): void {
+    const maxHeight = PortalUtils.calculateOptimalHeight(
+      rects.reference,
+      window.innerHeight,
+      this.currentPlacement
+    );
+
+    // elements.floating.style.maxWidth = `${availableWidth}px`;
+    elements.floating.style.maxHeight = `${maxHeight}px`;
+    
+    elements.floating.style.setProperty('--auto-size-available-width', `${availableWidth}px`);
+    elements.floating.style.setProperty('--auto-size-available-height', `${maxHeight}px`);
+  }
+
+  private createCustomPlatform() {
+    return platform;
+  }
+
+  private applyFloatingUIPosition(
+    floatingElement: HTMLElement,
+    referenceElement: HTMLElement,
+    x: number,
+    y: number,
+    placement: Placement,
+    middlewareData: MiddlewareData
+  ): void {
+    // For auto-complete, align left edge with input element
+    // Use reference element's left position, not Floating UI's x (which might shift)
+    const referenceRect = referenceElement.getBoundingClientRect();
+    
+    Object.assign(floatingElement.style, {
+      left: `${referenceRect.left}px`,
+      top: `${y}px`,
+      position: 'fixed',
+      pointerEvents: 'auto',
+      width: 'auto',
+      minWidth: 'auto'
+    });
+
+    this.currentPlacement = placement;
+    this.currentMiddlewareData = middlewareData;
+    
+    PortalUtils.applyCollisionData(floatingElement, middlewareData, placement);
+    
+    const placementClass = placement.split('-')[0];
+    floatingElement.className = `nile-auto-complete-portal-append menu__listbox--${placementClass}`;
+  }
+
+  private fallbackPositioning(): void {
+    if (!this.portalContainer) return;
+
+    const referenceElement = this.component.inputElement || this.component;
+    const rect = referenceElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const menuHeight = this.measuredMenuHeight || 200;
+    
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    
+    let topPosition: number;
+    let placementClass: string;
+    let maxHeight: number;
+    
+    if (spaceAbove > spaceBelow) {
+      maxHeight = Math.max(spaceAbove - 20, 100);
+      topPosition = Math.max(rect.top - maxHeight - 4, 10);
+      placementClass = 'top';
+    } else {
+      maxHeight = Math.max(spaceBelow - 20, 100);
+      topPosition = rect.bottom + 4;
+      placementClass = 'bottom';
+    }
+
+    this.portalContainer.style.left = `${rect.left}px`;
+    this.portalContainer.style.top = `${topPosition}px`;
+    // Let the menu auto-size based on its content, don't force width to match input
+    this.portalContainer.style.width = 'auto';
+    this.portalContainer.style.minWidth = 'auto';
+    this.portalContainer.style.maxHeight = `${maxHeight}px`;
+    this.portalContainer.style.pointerEvents = 'auto';
+    this.portalContainer.className = `nile-auto-complete-portal-append menu__listbox--${placementClass}`;
+    
+    this.calculateAndSetAutoSizeProperties(rect, topPosition, placementClass);
+  }
+
+  private calculateAndSetAutoSizeProperties(rect: DOMRect, topPosition: number, placementClass: string): void {
+    if (!this.portalContainer) return;
+
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    
+    let availableHeight: number;
+    if (placementClass === 'top') {
+      availableHeight = rect.top - 10;
+    } else {
+      availableHeight = viewportHeight - rect.bottom - 10;
+    }
+    
+    const availableWidth = Math.min(rect.width, viewportWidth - rect.left - 10);
+    
+    this.portalContainer.style.setProperty('--auto-size-available-height', `${Math.max(availableHeight, 100)}px`);
+    this.portalContainer.style.setProperty('--auto-size-available-width', `${Math.max(availableWidth, 200)}px`);
+  }
+
+  updatePortalAppendPosition(): void {
+    if (this.component.portal && this.portalContainer) {
+      this.positionPortalAppend();
+    }
+  }
+
+  handleWindowResize(): void {
+    if (this.component.portal && this.portalContainer) {
+      this.positionPortalAppend();
+    }
+  }
+
+  private setupAutoUpdatePositioning(): void {
+    if (!this.portalContainer || !this.component) return;
+
+    this.cleanupAutoUpdatePositioning();
+
+    this.cleanupAutoUpdate = autoUpdate(
+      this.component,
+      this.portalContainer,
+      () => {
+        this.computeFloatingUIPosition();
+      },
+      {
+        ancestorScroll: true,
+        ancestorResize: true,
+        elementResize: true,
+        layoutShift: true,
+        animationFrame: true
+      }
+    );
+  }
+
+  private cleanupAutoUpdatePositioning(): void {
+    if (this.cleanupAutoUpdate) {
+      this.cleanupAutoUpdate();
+      this.cleanupAutoUpdate = null;
+    }
+  }
+
+  private injectStylesToDocument(): void {
+    if (!this.portalContainer) return;
+
+    const styleId = PortalUtils.generateStyleId();
+    
+    if (document.getElementById(styleId)) return;
+
+    const componentStyles = (this.component.constructor as any).styles;
+    if (!componentStyles) return;
+
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.textContent = PortalUtils.extractStylesAsCSS(componentStyles);
+    
+    document.head.appendChild(styleElement);
+    
+    (this.portalContainer as any).__injectedStyleId = styleId;
+  }
+
+  private adoptStylesToPortalAppend(): void {
+    if (!this.portalContainer) return;
+    this.injectStylesToDocument();
+  }
+
+  setupPortalAppend(): void {
+    if (!this.component.portal) return;
+
+    this.component.updateComplete.then(() => {
+      setTimeout(() => {
+        // Try to find menu in shadow root first, then fallback to querySelector
+        const menu = this.component.shadowRoot?.querySelector('#content-menu') as HTMLElement ||
+                     this.component.querySelector('#content-menu') as HTMLElement;
+        if (menu && this.component.isDropdownOpen) {
+          this.originalMenuParent = menu.parentElement as HTMLElement;
+          
+          this.clonedMenu = this.createPortalMenu();
+          
+          this.portalContainer = this.createPortalAppendContainer();
+          this.portalContainer.appendChild(this.clonedMenu);
+          document.body.appendChild(this.portalContainer);
+          
+          this.adoptStylesToPortalAppend();
+          
+          this.clonedMenu.style.display = '';
+          this.positionPortalAppend();
+          
+          this.setupPortalEventListeners();
+          
+          this.setupAutoUpdatePositioning();
+          
+          window.addEventListener('resize', this.handleWindowResize.bind(this));
+        }
+      }, 10);
+    });
+  }
+
+  private createPortalMenu(): HTMLElement {
+    return PortalContentUtils.createPortalMenu(this.component);
+  }
+
+  private setupPortalEventListeners(): void {
+    PortalEventUtils.setupPortalEventListeners(this.clonedMenu!, this.component);
+  }
+
+  cleanupPortalAppend(): void {
+    this.cleanupAutoUpdatePositioning();
+    
+    if (this.portalContainer && this.portalContainer.parentNode) {
+      const injectedStyleId = (this.portalContainer as any).__injectedStyleId;
+      if (injectedStyleId) {
+        const styleElement = document.getElementById(injectedStyleId);
+        if (styleElement) {
+          styleElement.remove();
+        }
+      }
+      
+      this.portalContainer.parentNode.removeChild(this.portalContainer);
+    }
+    
+    window.removeEventListener('resize', this.handleWindowResize.bind(this));
+    
+    this.portalContainer = null;
+    this.originalMenuParent = null;
+    this.clonedMenu = null;
+    this.measuredMenuHeight = null;
+    this.currentPlacement = 'bottom';
+    this.currentMiddlewareData = null;
+  }
+
+  get portalContainerElement(): HTMLElement | null {
+    return this.portalContainer;
+  }
+
+  resetMeasuredHeight(): void {
+    this.measuredMenuHeight = null;
+  }
+
+  updatePortalOptions(): void {
+    if (this.portalContainer && this.clonedMenu) {
+      PortalContentUtils.updatePortalMenuItems(this.clonedMenu, this.component);
+      this.forceReposition();
+    }
+  }
+
+  forceReposition(): void {
+    if (this.portalContainer) {
+      this.computeFloatingUIPosition();
+    }
+  }
+
+  getCurrentPlacement(): Placement {
+    return this.currentPlacement;
+  }
+
+  getCurrentMiddlewareData(): MiddlewareData | null {
+    return this.currentMiddlewareData;
+  }
+
+  isUsingFloatingUI(): boolean {
+    return this.cleanupAutoUpdate !== null;
+  }
+
+  isPositioningOptimal(): boolean {
+    if (!this.portalContainer || !this.currentMiddlewareData) return true;
+
+    const referenceElement = this.component.inputElement || this.component;
+    const rect = referenceElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    
+    const isAbove = this.currentPlacement.startsWith('top');
+    const isBelow = this.currentPlacement.startsWith('bottom');
+    
+    if (isAbove && spaceBelow > spaceAbove) return false;
+    if (isBelow && spaceAbove > spaceBelow) return false;
+    
+    return true;
+  }
+}