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

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

@@ -0,0 +1,221 @@
+import { 
+  type Placement,
+  type MiddlewareData
+} from '@floating-ui/dom';
+
+export class PortalUtils {
+  static calculateAvailableSpace(referenceElement: HTMLElement): {
+    spaceAbove: number;
+    spaceBelow: number;
+    viewportHeight: number;
+  } {
+    const rect = referenceElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    
+    return { spaceAbove, spaceBelow, viewportHeight };
+  }
+
+  static getOptimalPlacement(referenceElement: HTMLElement): Placement {
+    const { spaceAbove, spaceBelow } = this.calculateAvailableSpace(referenceElement);
+    
+    if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+      return 'top';
+    }
+    
+    return 'bottom';
+  }
+
+  static findBoundaryElements(component: HTMLElement): Element[] | undefined {
+    const boundaryElements: Element[] = [];
+    
+    let currentElement = component.parentElement;
+    
+    while (currentElement && currentElement !== document.body) {
+      const computedStyle = window.getComputedStyle(currentElement);
+      const overflow = computedStyle.overflow;
+      const overflowY = computedStyle.overflowY;
+      const overflowX = computedStyle.overflowX;
+      
+      if (overflow === 'auto' || overflow === 'scroll' || 
+          overflowY === 'auto' || overflowY === 'scroll' ||
+          overflowX === 'auto' || overflowX === 'scroll') {
+        boundaryElements.push(currentElement);
+      }
+      
+      if (currentElement.hasAttribute('data-floating-boundary') ||
+          currentElement.classList.contains('floating-boundary') ||
+          currentElement.classList.contains('scroll-container')) {
+        boundaryElements.push(currentElement);
+      }
+      
+      currentElement = currentElement.parentElement;
+    }
+    
+    return boundaryElements.length > 0 ? boundaryElements : undefined;
+  }
+
+  static calculateOptimalHeight(
+    referenceRect: { x: number; y: number; width: number; height: number },
+    viewportHeight: number,
+    placement: Placement
+  ): number {
+    const spaceBelow = viewportHeight - (referenceRect.y + referenceRect.height);
+    const spaceAbove = referenceRect.y;
+    
+    if (spaceAbove > spaceBelow) {
+      return Math.max(spaceAbove - 20, 100);
+    }
+    else if (spaceBelow > spaceAbove) {
+      return Math.max(spaceBelow - 20, 100);
+    }
+    
+    return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);
+  }
+
+  static extractStylesAsCSS(styles: any): string {
+    if (typeof styles === 'string') {
+      return styles;
+    }
+    
+    if (Array.isArray(styles)) {
+      return styles.map(style => this.extractStylesAsCSS(style)).join('\n');
+    }
+    
+    if (styles && typeof styles === 'object' && styles.cssText) {
+      return styles.cssText;
+    }
+    
+    return '';
+  }
+
+  static generateStyleId(): string {
+    return `nile-auto-complete-styles-${Math.random().toString(36).substring(2, 11)}`;
+  }
+
+  static isPositioningOptimal(
+    placement: Placement,
+    referenceElement: HTMLElement
+  ): boolean {
+    const { spaceAbove, spaceBelow } = this.calculateAvailableSpace(referenceElement);
+    
+    const isAbove = placement.startsWith('top');
+    const isBelow = placement.startsWith('bottom');
+    
+    if (isAbove && spaceBelow > spaceAbove) return false;
+    if (isBelow && spaceAbove > spaceBelow) return false;
+    
+    return true;
+  }
+
+  static applyCollisionData(
+    element: HTMLElement,
+    middlewareData: MiddlewareData,
+    placement: Placement
+  ): void {
+    if (middlewareData.flip) {
+      const { overflows } = middlewareData.flip;
+      
+      element.setAttribute('data-placement', placement);
+      
+      if (overflows && overflows.length > 0) {
+        const overflowPlacements = overflows.map(overflow => overflow.placement).join(',');
+        element.setAttribute('data-overflow', overflowPlacements);
+      } else {
+        element.removeAttribute('data-overflow');
+      }
+    }
+
+    if (middlewareData.shift) {
+      const { x, y } = middlewareData.shift;
+      
+      if (x !== undefined && y !== undefined && (x !== 0 || y !== 0)) {
+        element.setAttribute('data-shift', `${x},${y}`);
+      } else {
+        element.removeAttribute('data-shift');
+      }
+    }
+
+    if (middlewareData.size) {
+      const { availableWidth, availableHeight } = middlewareData.size;
+      
+      if (availableWidth !== undefined) {
+        element.setAttribute('data-available-width', availableWidth.toString());
+      }
+      if (availableHeight !== undefined) {
+        element.setAttribute('data-available-height', availableHeight.toString());
+      }
+    }
+  }
+}
+
+export class PortalContentUtils {
+  static createBaseMenu(component: any): HTMLElement {
+    const menu = document.createElement('nile-menu');
+    menu.id = 'content-menu';
+    menu.className = component.enableVirtualScroll ? 'virtualized__menu' : '';
+    
+    if (component.enableVirtualScroll) {
+      menu.setAttribute('exportparts', 'menu__items-wrapper:options__wrapper');
+    } else {
+      menu.setAttribute('exportparts', 'menu__items-wrapper:options__wrapper');
+    }
+    
+    return menu;
+  }
+
+  static addMenuItems(menu: HTMLElement, component: any): void {
+    const menuItems = component.menuItems || [];
+    
+    menuItems.forEach((item: any) => {
+      const menuItem = this.createMenuItem(item, component);
+      menu.appendChild(menuItem);
+    });
+  }
+
+  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;
+  }
+
+  static createPortalMenu(component: any): HTMLElement {
+    const menu = this.createBaseMenu(component);
+    this.addMenuItems(menu, component);
+    return menu;
+  }
+
+  static updatePortalMenuItems(clonedMenu: HTMLElement, component: any): void {
+    if (!clonedMenu) return;
+
+    // Remove existing items
+    const existingItems = clonedMenu.querySelectorAll('nile-menu-item');
+    existingItems.forEach(item => item.remove());
+
+    // Add updated items
+    this.addMenuItems(clonedMenu, component);
+  }
+}
+
+export class PortalEventUtils {
+  static setupPortalEventListeners(clonedMenu: HTMLElement, component: any): void {
+    if (!clonedMenu) return;
+
+    this.setupMenuSelectListeners(clonedMenu, component);
+  }
+
+  static setupMenuSelectListeners(clonedMenu: HTMLElement, component: any): void {
+    if (!clonedMenu) return;
+
+    clonedMenu.addEventListener('nile-select', (event: Event) => {
+      const customEvent = event as CustomEvent;
+      if (component.handleSelect) {
+        // Call the component's handleSelect method directly
+        component.handleSelect(customEvent);
+      }
+    });
+  }
+}

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

@@ -17,6 +17,7 @@ import { styles } from './nile-chip.css';
 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';
 
 interface CustomEventDetail {
   value: string;
@@ -39,6 +40,7 @@ export class NileChip extends NileElement {
   @state() inputValue: string = '';
 
   @state() isDropdownOpen: boolean = false;
+  @state() tooltips: (string | null)[] = [];
 
   @query('nile-auto-complete') autoComplete!: any;
 
@@ -78,6 +80,12 @@ export class NileChip extends NileElement {
   /** Disables the input. */
   @property({ type: Boolean, reflect: true }) disabled = 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;
+
   // AUTO-COMPLETE-OPTIONS
 
   /** Virtual scroll in  dropdown options. */
@@ -103,6 +111,9 @@ export class NileChip extends NileElement {
 
   @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;
 
+
+  @property({ type: Boolean }) showTooltip: boolean = false;
+
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has('autoCompleteOptions')) {
@@ -131,7 +142,6 @@ export class NileChip extends NileElement {
     }
   }
  
-  
   private handleDocumentClick = (event: MouseEvent) => {
     const path = event.composedPath();
     if (!path.includes(this)) {
@@ -199,21 +209,35 @@ export class NileChip extends NileElement {
             'nile-chip--open': this.isDropdownOpen, 
           })}
         >
-          ${this.tags.map(
-            (tag, index) => html`
+          ${this.tags.map((tag, index) => {
+            const tooltipContent = this.tooltips[index];
+            const tagTemplate = html`
               <nile-tag
                 class=${classMap({
                   'nile-chip__tags': true,
                 })}
-                .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}
+                .variant=${this.errorIndexes.includes(index)
+                  ? 'error'
+                  : 'normal'}
                 @nile-remove=${() => this.handleRemove(tag)}
-                  removable
-                  ?pill=${this.tagVariant !== 'normal'}
+                removable
+                ?pill=${this.tagVariant !== 'normal'}
               >
-                ${tag}
+                ${unsafeHTML(tag)}
               </nile-tag>
-            `
-          )}
+            `;
+
+            if (this.showTooltip && tooltipContent) {
+              return html`
+                <nile-lite-tooltip allowHTML .content=${tooltipContent}>
+                  ${tagTemplate}
+                </nile-lite-tooltip>
+              `;
+            }
+
+            return tagTemplate;
+          })}
+
           <div class="nile-chip__auto-complete">
             ${this.noAutoComplete
               ? html`
@@ -236,6 +260,7 @@ export class NileChip extends NileElement {
                     .allMenuItems=${this.filteredAutoCompleteOptions}
                     .filterFunction=${this.filterFunction}
                     .renderItemFunction=${this.renderItemFunction}
+                    .showTooltips=${this.showTooltip}
                     .loading="${this.loading}"
                     .value=${this.inputValue}
                     ?isDropdownOpen=${this.isDropdownOpen}
@@ -243,6 +268,7 @@ export class NileChip extends NileElement {
                     .noOutline=${true}
                     .noPadding=${true}
                     .disabled=${this.disabled}
+                    .portal=${this.portal}
                     openOnFocus
                     exportparts="options__wrapper, input, base"
                     .placeholder=${this.placeholder}
@@ -270,9 +296,25 @@ export class NileChip extends NileElement {
 
   private handleSelect(event: CustomEvent<CustomEventDetail>) {
     // Add the selected value to the tags array only if it doesn't already exist
-    if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {
-      this.tags = [...this.tags, event.detail.value];
-      this.emit('nile-chip-change', { value: this.tags });
+    const selectedValue = event.detail.value;
+    const selectedOption = this.autoCompleteOptions.find(
+      (opt) => opt.name === selectedValue || opt.id === selectedValue
+    );
+
+    let tooltipContent: string | null = null;
+
+    if (selectedOption?.tooltip) {
+      const { content, for: showFor } = selectedOption.tooltip;
+      if (!showFor || showFor === 'tag') {
+        tooltipContent = content;
+      }
+    }
+
+    if (!this.noDuplicates || !this.tags.includes(selectedValue)) {
+      this.tags = [...this.tags, selectedValue];
+      this.tooltips = [...this.tooltips, tooltipContent];
+
+      this.emit('nile-chip-change', { value: this.tags});
       this.resetInput();
     }
   }

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

@@ -260,7 +260,7 @@ export class NileliteTooltip extends NileElement {
       }
       return;
     }
-
+  
     const children = Array.from(this.querySelectorAll('*'));
     if (children.length > 0) {
       this.tooltipInstances = children.map(child => {
@@ -270,7 +270,7 @@ export class NileliteTooltip extends NileElement {
         instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
         return instance;
       });
-
+  
       if (this.singleton && this.tooltipInstances.length > 1) {
         this.singletonInstance = createSingleton(this.tooltipInstances, {
           delay: [75, 0],
@@ -278,13 +278,14 @@ export class NileliteTooltip extends NileElement {
           moveTransition: 'transform 0.15s ease-out',
         });
       }
-
+  
       if (this.open) {
         if (this.singletonInstance) this.singletonInstance.show();
         else this.tooltipInstances.forEach(t => t.show());
       }
     }
   }
+  
 
   private destroyTooltips(): void {
     this.tooltipInstances?.forEach(t => t.destroy());

package/vscode-html-custom-data.json

@@ -62,7 +62,7 @@
     },
     {
       "name": "nile-auto-complete",
-      "description": "Attributes:\n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\nProperties:\n\n  * `styles` - \n\n  * `dropdownElement` - \n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `allMenuItems` - \n\n  * `menuItems` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\nProperties:\n\n  * `styles` - \n\n  * `dropdownElement` - \n\n  * `inputElement` - \n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `portalManager` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `allMenuItems` - \n\n  * `menuItems` - \n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "disabled",
@@ -74,6 +74,11 @@
           "description": "`isDropdownOpen` {`boolean`} - \n\nProperty: isDropdownOpen\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "portal",
+          "description": "`portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\nProperty: portal\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "enableVirtualScroll",
           "description": "`enableVirtualScroll` {`boolean`} - \n\nProperty: enableVirtualScroll\n\nDefault: false",
@@ -726,7 +731,7 @@
     },
     {
       "name": "nile-chip",
-      "description": "Attributes:\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `noAutoComplete` {`boolean`} - \n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `tagVariant` {`string`} - \n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\nProperties:\n\n  * `hasSlotController` - \n\n  * `tags` {`string[]`} - \n\n  * `inputValue` {`string`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `autoComplete` - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `noAutoComplete` {`boolean`} - \n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `tagVariant` {`string`} - \n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `handleDocumentClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `noAutoComplete` {`boolean`} - \n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `tagVariant` {`string`} - \n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `showTooltip` {`boolean`} - \n\nProperties:\n\n  * `hasSlotController` - \n\n  * `tags` {`string[]`} - \n\n  * `inputValue` {`string`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `tooltips` {`(string | null)[]`} - \n\n  * `autoComplete` - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `noAutoComplete` {`boolean`} - \n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `noDuplicates` {`boolean`} - Disables the duplicate entries.\n\n  * `label` {`string`} - The input's label. If you need to display HTML, use the `label` slot instead.\n\n  * `tagVariant` {`string`} - \n\n  * `acceptUserInput` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `clearable` {`boolean`} - Adds a clear button when the input is not empty.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `readonly` {`boolean`} - Makes the input readonly.\n\n  * `disabled` {`boolean`} - Disables the input.\n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\n  * `autoCompleteOptions` {`any[]`} - \n\n  * `filteredAutoCompleteOptions` {`any[]`} - \n\n  * `value` {`any[]`} - \n\n  * `noWrap` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `errorIndexes` {`number[]`} - \n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `showTooltip` {`boolean`} - \n\n  * `handleDocumentClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "warning",
@@ -785,6 +790,11 @@
           "description": "`disabled` {`boolean`} - Disables the input.\n\nProperty: disabled\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "portal",
+          "description": "`portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\nProperty: portal\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "enableVirtualScroll",
           "description": "`enableVirtualScroll` {`boolean`} - Virtual scroll in  dropdown options.\n\nProperty: enableVirtualScroll\n\nDefault: false",
@@ -823,6 +833,11 @@
         {
           "name": "error-message",
           "description": "`error-message` {`string`} - \n\nProperty: errorMessage\n\nDefault: "
+        },
+        {
+          "name": "showTooltip",
+          "description": "`showTooltip` {`boolean`} - \n\nProperty: showTooltip\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },