@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.4

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

@@ -0,0 +1,472 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { 
+  autoUpdate, 
+  computePosition, 
+  flip, 
+  offset, 
+  shift, 
+  size, 
+  platform,
+  type Placement,
+  type MiddlewareData,
+  type ComputePositionConfig,
+  type Boundary
+} from '@floating-ui/dom';
+import { PortalUtils } from '../nile-select/portal-utils';
+
+export class PortalManager {
+  private portalContainer: HTMLElement | null = null;
+  private originalListboxParent: HTMLElement | null = null;
+  private measuredPopupHeight: number | null = null;
+  private component: any;
+  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.className = 'nile-virtual-select-portal-append';
+    return container;
+  }
+
+  positionPortalAppend(): void {
+    if (!this.portalContainer || !this.component.popup) return;
+
+    this.measurePopupHeight();
+    this.computeFloatingUIPosition();
+  }
+
+  private measurePopupHeight(): void {
+    if (this.measuredPopupHeight || !this.portalContainer) return;
+
+    // Temporarily position the container to measure its height
+    this.portalContainer.style.position = 'absolute';
+    this.portalContainer.style.visibility = 'hidden';
+    this.portalContainer.style.top = '0px';
+    this.portalContainer.style.left = '0px';
+    
+    // Force a reflow to ensure the container is rendered
+    this.portalContainer.offsetHeight;
+    
+    // Measure the actual height
+    this.measuredPopupHeight = this.portalContainer.offsetHeight;
+    
+    // Reset visibility
+    this.portalContainer.style.visibility = '';
+  }
+
+
+  private async computeFloatingUIPosition(): Promise<void> {
+    if (!this.portalContainer) return;
+
+    const referenceElement = this.component.combobox || 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);
+    const initialPlacement = PortalUtils.getOptimalPlacement(referenceElement);
+    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', 'top', 'bottom-start', 'top-start', '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 {
+    Object.assign(floatingElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      position: 'fixed',
+      pointerEvents: 'auto'
+    });
+
+    this.currentPlacement = placement;
+    this.currentMiddlewareData = middlewareData;
+    
+    PortalUtils.applyCollisionData(floatingElement, middlewareData, placement);
+    
+    const placementClass = placement.split('-')[0];
+    floatingElement.className = `nile-virtual-select-portal-append select__listbox--${placementClass}`;
+
+    const referenceRect = (referenceElement as HTMLElement).getBoundingClientRect();
+    floatingElement.style.width = `${referenceRect.width}px`;
+  }
+
+  private fallbackPositioning(): void {
+    if (!this.portalContainer) return;
+
+    const referenceElement = this.component.combobox || this.component;
+    const rect = referenceElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const popupHeight = this.measuredPopupHeight || 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`;
+    this.portalContainer.style.width = `${rect.width}px`;
+    this.portalContainer.style.maxHeight = `${maxHeight}px`;
+    this.portalContainer.style.pointerEvents = 'auto';
+    this.portalContainer.className = `nile-virtual-select-portal-append select__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 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 '';
+  }
+
+  private injectStylesToDocument(): void {
+    if (!this.portalContainer) return;
+
+    // Create a unique identifier for this component instance
+    const styleId = `nile-virtual-select-styles-${Math.random().toString(36).substring(2, 11)}`;
+    
+    // Check if styles are already injected
+    if (document.getElementById(styleId)) return;
+
+    // Get the component's styles
+    const componentStyles = (this.component.constructor as any).styles;
+    if (!componentStyles) return;
+
+    // Create a style element
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.textContent = this.extractStylesAsCSS(componentStyles);
+    
+    // Inject into document head
+    document.head.appendChild(styleElement);
+    
+    // Store reference for cleanup
+    (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(() => {
+      const listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;
+      if (listbox) {
+        this.originalListboxParent = listbox.parentElement as HTMLElement;
+        
+        this.portalContainer = this.createPortalAppendContainer();
+        this.portalContainer.appendChild(listbox);
+        document.body.appendChild(this.portalContainer);
+        
+        // Adopt the component's styles to the body append container
+        this.adoptStylesToPortalAppend();
+        
+        listbox.style.display = '';
+        this.positionPortalAppend();
+        
+        this.setupAutoUpdatePositioning();
+        
+        window.addEventListener('resize', this.handleWindowResize.bind(this));
+      }
+    });
+  }
+
+  cleanupPortalAppend(): void {
+    this.cleanupAutoUpdatePositioning();
+    
+    if (this.portalContainer && this.portalContainer.parentNode) {
+      const listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;
+      
+      if (listbox && this.originalListboxParent) {
+        this.originalListboxParent.appendChild(listbox);
+        listbox.style.display = this.component.portal ? 'none' : '';
+      }
+      
+      // Clean up injected styles if they exist
+      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.originalListboxParent = null;
+    this.measuredPopupHeight = null;
+    this.currentPlacement = 'bottom';
+    this.currentMiddlewareData = null;
+  }
+
+  async resetScrollPosition(): Promise<void> {
+    await this.component.updateComplete;
+
+    requestAnimationFrame(() => {
+      let listbox: HTMLElement | null = null;
+
+      if (this.component.portal && this.portalContainer) {
+        listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;
+      } else {
+        listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;
+      }
+
+      if (!listbox || !listbox.isConnected) return;
+      listbox.scrollTop = 0;
+
+      const virtualized = listbox.querySelector('.virtualized') as HTMLElement;
+      if (virtualized && virtualized.isConnected) {
+        const fewItems = this.component.data?.length <= 5;
+
+        if (fewItems) {
+          virtualized.style.overflowY = 'hidden';
+          virtualized.style.maxHeight = 'none';
+          listbox.style.overflowY = 'hidden';
+          listbox.style.maxHeight = 'fit-content';
+        } else {
+          virtualized.style.overflowY = 'auto';
+          virtualized.style.maxHeight = '';
+          listbox.style.overflowY = 'auto';
+          listbox.style.maxHeight = '';
+        }
+
+        virtualized.scrollTop = 0;
+      }
+
+      const virtualizer = listbox.querySelector('lit-virtualizer') as HTMLElement;
+      if (virtualizer && virtualizer.isConnected) {
+        virtualizer.scrollTop = 0;
+      }
+    });
+  }
+
+
+  get portalContainerElement(): HTMLElement | null {
+    return this.portalContainer;
+  }
+
+  resetMeasuredHeight(): void {
+    this.measuredPopupHeight = null;
+  }
+
+  forceReposition(): void {
+    if (this.portalContainer) {
+      this.computeFloatingUIPosition();
+    }
+  }
+
+  getCurrentPlacement(): Placement {
+    return this.currentPlacement;
+  }
+
+  getCurrentMiddlewareData(): MiddlewareData | null {
+    return this.currentMiddlewareData;
+  }
+
+  isUsingFloatingUI(): boolean {
+    return this.cleanupAutoUpdate !== null;
+  }
+
+  handleViewportChange(): void {
+    if (this.portalContainer) {
+      this.resetMeasuredHeight();
+      this.forceReposition();
+    }
+  }
+
+  isPositioningOptimal(): boolean {
+    if (!this.portalContainer || !this.currentMiddlewareData) return true;
+
+    const referenceElement = this.component.combobox || 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;
+  }
+
+
+}
+

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

@@ -0,0 +1,108 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, type TemplateResult } from 'lit';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+export class VirtualSelectRenderer {
+  static getVirtualizedContent(
+    data: any[], 
+    searchEnabled: boolean, 
+    renderItemFunction: (item: any) => string,
+    value: string | string[],
+    multiple: boolean,
+    getDisplayText?: (item: any) => string,
+    getItemValue?: (item: any) => string,
+    showNoResults?: boolean,
+    noResultsMessage?: string,
+    loading?: boolean,
+    onScroll?: (e: Event) => void
+  ): TemplateResult {
+    return html`
+      <div part="select-options" class="select__options ${
+        searchEnabled ? 'select__options__search-enabled' : ``
+      } ${loading ? 'loading' : ''}">
+        ${showNoResults && !loading
+          ? html`
+              <div part="select-no-results" class="select__no-results">
+                ${noResultsMessage || 'No results found'}
+              </div>
+            `
+          : html`
+              <div
+                class="virtualized"
+                part="virtualized"
+                @scroll=${onScroll}
+              >
+                ${VirtualSelectRenderer.shouldUseVirtualizer(data)
+                  ? html`
+                      ${virtualize({
+                        items: data,
+                        renderItem: (item: any): TemplateResult =>
+                          VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue),
+                        scroller: true,
+                      })}
+                    `
+                  : html`
+                      ${data.map((item: any) => 
+                        VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue)
+                      )}
+                    `}
+              </div>
+            `}
+      </div>`;
+  }
+
+  static getItemRenderFunction(
+    item: any, 
+    renderItemFunction: (item: any) => string, 
+    value: string | string[], 
+    multiple: boolean,
+    getDisplayText?: (item: any) => string,
+    getItemValue?: (item: any) => string
+  ): TemplateResult {
+    if(!item) {
+      return html``;
+    }
+    const displayTextFn = getDisplayText || renderItemFunction;
+    const valueFn = getItemValue || ((item: any) => item?.value || item);
+    
+    const optionValue = valueFn(item);
+    const displayText = displayTextFn(item);
+    const isDisabled = item?.disabled || false;
+    const className = item?.className;
+    
+    let isSelected = false;
+    if (multiple) {
+      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));
+    } else {
+      isSelected = (Array.isArray(value) ? value[0] : value) === optionValue;
+    }
+    
+    return html`
+      <nile-option 
+        value=${optionValue} 
+        .selected=${isSelected} 
+        .disabled=${isDisabled}
+        .showCheckbox=${multiple}
+        class=${ifDefined(className || undefined)}
+      >
+        ${unsafeHTML(displayText)}
+      </nile-option>
+    `;
+  }
+
+  /**
+   * Determines whether to use virtualizer based on dataset size
+   * For small datasets (less than 5 items), use regular rendering for better sizing
+   */
+  private static shouldUseVirtualizer(data: any[]): boolean {
+    return data.length >= 5;
+  }
+} 

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

@@ -0,0 +1,50 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export class VirtualSelectSearchManager {
+    static filterVirtualOptions(
+    searchValue: string,
+    originalOptionItems: any[],
+    data: any[], 
+    renderItemFunction: (item: any) => string,
+    getSearchText?: (item: any) => string
+  ): { filteredItems: any[], showNoResults: boolean } {
+    if (originalOptionItems.length === 0 && data.length > 0) {
+      return {
+        filteredItems: [...data],
+        showNoResults: false
+      };
+    }
+
+    if (!originalOptionItems || originalOptionItems.length === 0) {
+      return {
+        filteredItems: [],
+        showNoResults: true
+      };
+    }
+
+    if (!searchValue || searchValue.trim() === '') {
+      return {
+        filteredItems: [...originalOptionItems],
+        showNoResults: false
+      };
+    }
+
+    const lowerCaseSearchValue = searchValue.toLowerCase();
+    const searchTextFn = getSearchText || renderItemFunction;
+    const filteredItems = originalOptionItems.filter((item: any) => {
+      const itemValue = searchTextFn(item);
+      const lowerCaseItemValue = itemValue.toLowerCase();
+      return lowerCaseItemValue.includes(lowerCaseSearchValue);
+    });
+
+    return {
+      filteredItems,
+      showNoResults: filteredItems.length === 0
+    };
+  }
+} 

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

@@ -0,0 +1,75 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type { VirtualOption } from './types.js';
+
+export class VirtualSelectSelectionManager {
+  static createVirtualOptionsFromValues(
+    value: string | string[], 
+    data: any[], 
+    getDisplayText: (item: any) => string,
+    getItemValue?: (item: any) => string
+  ): VirtualOption[] {
+    if (!value || (Array.isArray(value) && value.length === 0)) {
+      return [];
+    }
+
+    const values = Array.isArray(value) ? value : [value];
+    
+    return values.map(valueItem => {
+      // Use enhanced functions if available, otherwise fallback to basic logic
+      const displayTextFn = getDisplayText;
+      const valueFn = getItemValue || ((item: any) => item?.value || item);
+      
+      const item = data.find((item: any) => {
+        const itemValue = valueFn(item);
+        const itemDisplayText = displayTextFn(item);
+        return String(itemValue) === String(valueItem) || String(itemDisplayText) === String(valueItem);
+      });
+      
+      const displayText = item ? displayTextFn(item) : valueItem;
+      
+      return {
+        value: valueItem,
+        selected: true,
+        getTextLabel: () => {
+          // If displayText contains HTML, strip tags
+          if (typeof displayText === 'string' && /<[^>]+>/.test(displayText)) {
+            const div = document.createElement('div');
+            div.innerHTML = displayText;
+            return div.textContent || div.innerText || '';
+          }
+          return displayText;
+        },
+        getOptionPrefix: () => '',
+      };
+    });
+  }
+
+  static updateDisplayLabel(selectedOptions: VirtualOption[], placeholder: string, multiple: boolean, value: string | string[]): string {
+    if (multiple) {
+      if (placeholder && selectedOptions.length === 0) {
+        return '';
+      } else {
+        return selectedOptions.length + ' selected';
+      }
+    } else {
+      const currentValue = Array.isArray(value) ? value[0] : value;
+      return selectedOptions[0]?.getTextLabel()
+        ? selectedOptions[0].getTextLabel()
+        : currentValue ?? '';
+    }
+  }
+
+  static updateValue(selectedOptions: VirtualOption[], multiple: boolean): string | string[] {
+    if (multiple) {
+      return selectedOptions.map(el => el.value);
+    } else {
+      return selectedOptions[0]?.value ?? '';
+    }
+  }
+}