@aquera/nile-elements 1.2.8 → 1.2.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",
+  "version": "1.2.9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -259,8 +259,6 @@ export class NileAutoComplete extends NileElement {
       </nile-menu-item>
     `;
   }
-  
-  
 
   handleSelect(event: CustomEvent) {
     this.value = event.detail.value;

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

@@ -2,6 +2,7 @@ import {
   type Placement,
   type MiddlewareData
 } from '@floating-ui/dom';
+import { render } from 'lit-html';
 
 export class PortalUtils {
   static calculateAvailableSpace(referenceElement: HTMLElement): {
@@ -175,11 +176,10 @@ export class PortalContentUtils {
   }
 
   static createMenuItem(item: any, component: any): HTMLElement {
-    const menuItem = document.createElement('nile-menu-item');
-    const value = component.renderItemFunction ? component.renderItemFunction(item) : item;
-    menuItem.setAttribute('value', String(value));
-    menuItem.innerHTML = String(value);
-    return menuItem;
+    const container = document.createElement('div');
+    const templateResult = component.getItemRenderFunction(item);
+    render(templateResult, container);
+    return container.firstElementChild as HTMLElement;
   }
 
   static createPortalMenu(component: any): HTMLElement {

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

@@ -302,21 +302,25 @@ export class NileChip extends NileElement {
     );
 
     let tooltipContent: string | null = null;
-
-    if (selectedOption?.tooltip) {
-      const { content, for: showFor } = selectedOption.tooltip;
-      if (!showFor || showFor === 'tag') {
-        if (content instanceof Promise) {
-          this.tooltips = [...this.tooltips, 'Loading...'];
   
-          const currentIndex = this.tooltips.length - 1;
-          content.then((resolved) => {
-            this.tooltips[currentIndex] = resolved;
-            this.requestUpdate(); 
-          });
-        } else {
-          tooltipContent = content;
+    if (this.showTooltip) {
+      if (selectedOption?.tooltip?.content) {
+        const { content, for: showFor } = selectedOption.tooltip;
+        if (!showFor || showFor === 'tag') {
+          if (content instanceof Promise) {
+            this.tooltips = [...this.tooltips, 'Loading...'];
+  
+            const currentIndex = this.tooltips.length - 1;
+            content.then((resolved) => {
+              this.tooltips[currentIndex] = resolved;
+              this.requestUpdate();
+            });
+          } else {
+            tooltipContent = content;
+          }
         }
+      } else {
+        tooltipContent = selectedOption?.name || selectedValue;
       }
     }
 
@@ -367,6 +371,12 @@ export class NileChip extends NileElement {
     ) {
       event.preventDefault()
       this.tags = [...this.tags, this.inputValue];
+      if (this.showTooltip) {
+        this.tooltips = [...this.tooltips, this.inputValue];
+      } else {
+        this.tooltips = [...this.tooltips, null];
+      }
+    
       this.resetInput();
       this.emit('nile-chip-change', { value: this.tags });
     }

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
+import {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import {styles} from './nile-dropdown.css';
 import { animateTo, stopAnimations } from '../internal/animate';
@@ -22,6 +22,7 @@ import type NileIconButton from '../nile-icon-button/nile-icon-button';
 import type { NileMenu } from '../nile-menu';
 import type { NilePopup } from '../nile-popup';
 import '../nile-popup';
+import { DropdownPortalManager } from './portal-manager';
 
 /**
  * Nile icon component.
@@ -111,6 +112,14 @@ export class NileDropdown extends NileElement {
    */
   @property({ type: Boolean }) hoist = false;
 
+  /**
+   * Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.
+   * This provides better positioning control and prevents clipping issues in complex layouts.
+   */
+  @property({ type: Boolean, reflect: true }) portal = false;
+
+  private portalManager: DropdownPortalManager | null = null;
+
   connectedCallback() {
     super.connectedCallback();
     this.handlePanelSelect = this.handlePanelSelect.bind(this);
@@ -122,6 +131,12 @@ export class NileDropdown extends NileElement {
       this.containingElement = this;
     }
     this.emit('nile-init');
+
+    requestAnimationFrame(() => {
+      if (this.portal && !this.portalManager) {
+        this.portalManager = new DropdownPortalManager(this);
+      }
+    });
   }
 
   firstUpdated() {
@@ -139,6 +154,11 @@ export class NileDropdown extends NileElement {
     this.removeOpenListeners();
     this.hide();
     this.emit('nile-destroy');
+
+    if (this.portalManager) {
+      this.portalManager.cleanupPortalAppend();
+      this.portalManager = null;
+    }
   }
 
   focusOnTrigger() {
@@ -193,10 +213,12 @@ export class NileDropdown extends NileElement {
             ? document.activeElement?.shadowRoot?.activeElement
             : document.activeElement;
 
-        if (
-          !this.containingElement ||
-          activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement
-        ) {
+        const hitSelf = this.containingElement && activeElement?.closest(this.containingElement.tagName.toLowerCase()) === this.containingElement;
+        const hitPortalAppend = this.portal && this.portalManager?.portalContainerElement && 
+                                (activeElement === this.portalManager.portalContainerElement || 
+                                 activeElement?.closest('.nile-dropdown-portal-append') === this.portalManager.portalContainerElement);
+
+        if (!hitSelf && !hitPortalAppend) {
           this.hide();
         }
       });
@@ -206,7 +228,10 @@ export class NileDropdown extends NileElement {
   handleDocumentMouseDown(event: MouseEvent) {
     // Close when clicking outside of the containing element
     const path = event.composedPath();
-    if (this.containingElement && !path.includes(this.containingElement)) {
+    const hitSelf = this.containingElement && path.includes(this.containingElement);
+    const hitPortalAppend = this.portal && this.portalManager?.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+
+    if (!hitSelf && !hitPortalAppend) {
       this.hide();
     }
   }
@@ -365,6 +390,22 @@ export class NileDropdown extends NileElement {
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('portal')) {
+      if (this.portal && !this.portalManager) {
+        this.portalManager = new DropdownPortalManager(this);
+        if (this.open) {
+          this.portalManager.setupPortalAppend();
+        }
+      } else if (!this.portal && this.portalManager) {
+        this.portalManager.cleanupPortalAppend();
+        this.portalManager = null;
+      }
+    }
+  }
+
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.disabled) {
@@ -379,11 +420,22 @@ export class NileDropdown extends NileElement {
       this.emit('nile-show');
       this.addOpenListeners();
 
+      if (this.portal && this.portalManager) {
+        this.portalManager.setupPortalAppend();
+      } else if (this.portal && !this.portalManager) {
+        this.portalManager = new DropdownPortalManager(this);
+        this.portalManager.setupPortalAppend();
+      }
+
       await stopAnimations(this);
-      this.panel.hidden = false;
-      this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });
-      await animateTo(this.popup.popup, keyframes, options);
+      
+      // Only show panel and animate if not using portal
+      if (!this.portal) {
+        this.panel.hidden = false;
+        this.popup.active = true;
+        const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });
+        await animateTo(this.popup.popup, keyframes, options);
+      }
 
       this.emit('nile-after-show');
     } else {
@@ -391,11 +443,19 @@ export class NileDropdown extends NileElement {
       this.emit('nile-hide');
       this.removeOpenListeners();
 
+      if (this.portal && this.portalManager) {
+        this.portalManager.cleanupPortalAppend();
+      }
+
       await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.panel.hidden = true;
-      this.popup.active = false;
+      
+      // Only hide panel and animate if not using portal
+      if (!this.portal) {
+        const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
+        await animateTo(this.popup.popup, keyframes, options);
+        this.panel.hidden = true;
+        this.popup.active = false;
+      }
 
       this.emit('nile-after-hide');
     }
@@ -436,6 +496,7 @@ export class NileDropdown extends NileElement {
           class="dropdown__panel"
           aria-hidden=${this.open ? 'false' : 'true'}
           aria-labelledby="dropdown"
+          style=${this.portal && this.portalManager ? 'display: none;' : ''}
         ></slot>
       </nile-popup>
     `;