@aquera/nile-elements 1.7.1 → 1.7.2

package/src/nile-combobox/portal-manager.ts

@@ -0,0 +1,263 @@
+/**
+ * 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,
+} from '@floating-ui/dom';
+import { PortalUtils } from '../nile-select/portal-utils';
+
+export class ComboboxPortalManager {
+  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';
+
+  constructor(component: any) {
+    this.component = component;
+  }
+
+  get portalContainerElement(): HTMLElement | null {
+    return this.portalContainer;
+  }
+
+  private createPortalContainer(): HTMLElement {
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.zIndex = '9999';
+    container.style.pointerEvents = 'none';
+    container.className = 'nile-combobox-portal';
+    return container;
+  }
+
+  private async computePosition(): Promise<void> {
+    if (!this.portalContainer) return;
+
+    const referenceElement = this.component.combobox || this.component;
+    const floatingElement = this.portalContainer;
+
+    try {
+      const boundary = PortalUtils.findBoundaryElements(referenceElement);
+      const initialPlacement = PortalUtils.getOptimalPlacement(referenceElement);
+
+      const { x, y, placement } = await computePosition(
+        referenceElement,
+        floatingElement,
+        {
+          placement: initialPlacement,
+          strategy: 'fixed',
+          middleware: [
+            offset(4),
+            size({
+              apply: ({ availableWidth, availableHeight, elements, rects }) => {
+                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`);
+              },
+              padding: 10,
+              boundary,
+            }),
+            flip({
+              fallbackPlacements: ['bottom', 'top', 'bottom-start', 'top-start'],
+              fallbackStrategy: 'bestFit',
+              padding: 10,
+              boundary,
+            }),
+            shift({ padding: 10, crossAxis: true, boundary }),
+          ],
+          platform,
+        },
+      );
+
+      const referenceRect = referenceElement.getBoundingClientRect();
+      Object.assign(floatingElement.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        position: 'fixed',
+        pointerEvents: 'auto',
+        width: `${referenceRect.width}px`,
+      });
+
+      this.currentPlacement = placement;
+      const placementClass = placement.split('-')[0];
+      floatingElement.className = `nile-combobox-portal combobox__listbox--${placementClass}`;
+    } catch {
+      this.fallbackPositioning();
+    }
+  }
+
+  private fallbackPositioning(): void {
+    if (!this.portalContainer) return;
+
+    const ref = this.component.combobox || this.component;
+    const rect = ref.getBoundingClientRect();
+    const vh = window.innerHeight;
+    const spaceBelow = vh - rect.bottom;
+    const spaceAbove = rect.top;
+
+    let top: number;
+    let maxH: number;
+    let cls: string;
+
+    if (spaceAbove > spaceBelow) {
+      maxH = Math.max(spaceAbove - 20, 100);
+      top = Math.max(rect.top - maxH - 4, 10);
+      cls = 'top';
+    } else {
+      maxH = Math.max(spaceBelow - 20, 100);
+      top = rect.bottom + 4;
+      cls = 'bottom';
+    }
+
+    Object.assign(this.portalContainer.style, {
+      left: `${rect.left}px`,
+      top: `${top}px`,
+      width: `${rect.width}px`,
+      maxHeight: `${maxH}px`,
+      pointerEvents: 'auto',
+    });
+    this.portalContainer.className = `nile-combobox-portal combobox__listbox--${cls}`;
+    this.portalContainer.style.setProperty('--auto-size-available-height', `${maxH}px`);
+    this.portalContainer.style.setProperty('--auto-size-available-width', `${rect.width}px`);
+  }
+
+  private extractStylesAsCSS(styles: any): string {
+    if (typeof styles === 'string') return styles;
+    if (Array.isArray(styles)) return styles.map(s => this.extractStylesAsCSS(s)).join('\n');
+    if (styles && typeof styles === 'object' && styles.cssText) return styles.cssText;
+    return '';
+  }
+
+  private injectStyles(): void {
+    if (!this.portalContainer) return;
+    const styleId = `nile-combobox-styles-${Math.random().toString(36).substring(2, 11)}`;
+    if (document.getElementById(styleId)) return;
+
+    const componentStyles = (this.component.constructor as any).styles;
+    if (!componentStyles) return;
+
+    const el = document.createElement('style');
+    el.id = styleId;
+    el.textContent = this.extractStylesAsCSS(componentStyles);
+    document.head.appendChild(el);
+    (this.portalContainer as any).__injectedStyleId = styleId;
+  }
+
+  setupPortal(): void {
+    if (!this.component.portal) return;
+
+    this.component.updateComplete.then(() => {
+      const listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;
+      if (!listbox) return;
+
+      this.originalListboxParent = listbox.parentElement as HTMLElement;
+      this.portalContainer = this.createPortalContainer();
+      this.portalContainer.appendChild(listbox);
+      document.body.appendChild(this.portalContainer);
+      this.injectStyles();
+      listbox.style.display = '';
+      this.computePosition();
+
+      this.cleanupAutoUpdate = autoUpdate(
+        this.component,
+        this.portalContainer,
+        () => this.computePosition(),
+        { ancestorScroll: true, ancestorResize: true, elementResize: true, layoutShift: true, animationFrame: true },
+      );
+    });
+  }
+
+  cleanupPortal(): void {
+    if (this.cleanupAutoUpdate) {
+      this.cleanupAutoUpdate();
+      this.cleanupAutoUpdate = null;
+    }
+
+    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' : '';
+      }
+
+      const sid = (this.portalContainer as any).__injectedStyleId;
+      if (sid) document.getElementById(sid)?.remove();
+
+      this.portalContainer.parentNode.removeChild(this.portalContainer);
+    }
+
+    this.portalContainer = null;
+    this.originalListboxParent = null;
+    this.measuredPopupHeight = null;
+    this.currentPlacement = 'bottom';
+  }
+
+  updatePosition(): void {
+    if (this.component.portal && this.portalContainer) {
+      this.computePosition();
+    }
+  }
+
+  resetMeasuredHeight(): void {
+    this.measuredPopupHeight = 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.filteredData?.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;
+      }
+    });
+  }
+}

package/src/nile-combobox/renderer.ts

@@ -0,0 +1,349 @@
+/**
+ * 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 { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import type { VirtualItem } from '@tanstack/virtual-core';
+
+export class ComboboxRenderer {
+
+  static renderVirtualizedOptions(
+    virtualItems: VirtualItem[],
+    totalSize: number,
+    data: any[],
+    value: string | string[],
+    multiple: boolean,
+    getDisplayText: (item: any) => string,
+    getItemValue: (item: any) => string,
+    isLoading: boolean,
+    allowHtmlLabel: boolean,
+    measureElement: (el: Element | null) => void,
+    getItemDescription?: (item: any) => string,
+    getItemPrefix?: (item: any) => string,
+    getItemSuffix?: (item: any) => string,
+    enableDescription?: boolean,
+  ): TemplateResult {
+    const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
+
+    return html`
+      <div
+        part="select-options"
+        class="combobox__options ${isLoading ? 'loading' : ''}"
+      >
+        <div style="position:relative;height:${totalSize}px;width:100%;">
+          <div style="position:absolute;top:0;left:0;width:100%;transform:translateY(${offsetTop}px);">
+            ${repeat(
+              virtualItems,
+              (vItem) => vItem.key,
+              (vItem) => {
+                const item = data[vItem.index];
+                return ComboboxRenderer.renderMeasuredItem(
+                  item, vItem.index, value, multiple, getDisplayText, getItemValue,
+                  allowHtmlLabel, measureElement, getItemDescription, getItemPrefix,
+                  getItemSuffix, enableDescription,
+                );
+              },
+            )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static renderPlainOptions(
+    data: any[],
+    value: string | string[],
+    multiple: boolean,
+    getDisplayText: (item: any) => string,
+    getItemValue: (item: any) => string,
+    showNoResults: boolean,
+    noResultsMessage: string,
+    isLoading: boolean,
+    onScroll: (e: Event) => void,
+    allowHtmlLabel: boolean,
+    getItemDescription?: (item: any) => string,
+    getItemPrefix?: (item: any) => string,
+    getItemSuffix?: (item: any) => string,
+    enableDescription?: boolean,
+    noResultsSubtitle?: string,
+  ): TemplateResult {
+    if (showNoResults && !isLoading && data.length === 0) {
+      return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);
+    }
+
+    return html`
+      <div
+        part="select-options"
+        class="combobox__options ${isLoading ? 'loading' : ''}"
+      >
+        <div class="combobox__options-plain" @scroll=${onScroll}>
+          ${data.map((item: any) =>
+            ComboboxRenderer.renderItem(
+              item, value, multiple, getDisplayText, getItemValue,
+              allowHtmlLabel, getItemDescription, getItemPrefix,
+              getItemSuffix, enableDescription,
+            ),
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult {
+    return html`
+      <div part="select-options" class="combobox__options">
+        <div part="no-results" class="combobox__no-results">
+          <div part="no-results-title" class="combobox__no-results-title">
+            ${noResultsMessage || 'No result found'}
+          </div>
+          ${noResultsSubtitle
+            ? html`<div part="no-results-subtitle" class="combobox__no-results-subtitle">${noResultsSubtitle}</div>`
+            : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  static renderNoData(noDataMessage: string): TemplateResult {
+    return html`
+      <div part="select-options" class="combobox__options">
+        <div part="no-data" class="combobox__no-results">
+          <div part="no-data-title" class="combobox__no-results-title">
+            ${noDataMessage || 'No data available'}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private static renderMeasuredItem(
+    item: any,
+    index: number,
+    value: string | string[],
+    multiple: boolean,
+    getDisplayText: (item: any) => string,
+    getItemValue: (item: any) => string,
+    allowHtmlLabel: boolean,
+    measureElement: (el: Element | null) => void,
+    getItemDescription?: (item: any) => string,
+    getItemPrefix?: (item: any) => string,
+    getItemSuffix?: (item: any) => string,
+    enableDescription?: boolean,
+  ): TemplateResult {
+    if (!item) return html``;
+
+    const optionValue = getItemValue(item);
+    const displayText = getDisplayText(item);
+    const isDisabled = item?.disabled || false;
+    const className = item?.className;
+    const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');
+    const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');
+    const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');
+
+    let isSelected = false;
+    if (multiple) {
+      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));
+    } else {
+      isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);
+    }
+
+    return html`
+      <nile-option
+        data-index=${index}
+        value=${optionValue}
+        .selected=${isSelected}
+        .disabled=${isDisabled}
+        .showCheckbox=${multiple}
+        class=${classMap({
+          option: enableDescription ?? false,
+          [className ?? '']: !!className,
+        })}
+        .description=${description}
+        .isDescriptionEnabled=${enableDescription}
+      >
+        ${unsafeHTML(prefix)}
+        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}
+        ${unsafeHTML(suffix)}
+      </nile-option>
+    `;
+  }
+
+  static renderItem(
+    item: any,
+    value: string | string[],
+    multiple: boolean,
+    getDisplayText: (item: any) => string,
+    getItemValue: (item: any) => string,
+    allowHtmlLabel: boolean,
+    getItemDescription?: (item: any) => string,
+    getItemPrefix?: (item: any) => string,
+    getItemSuffix?: (item: any) => string,
+    enableDescription?: boolean,
+  ): TemplateResult {
+    if (!item) return html``;
+
+    const optionValue = getItemValue(item);
+    const displayText = getDisplayText(item);
+    const isDisabled = item?.disabled || false;
+    const className = item?.className;
+    const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');
+    const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');
+    const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');
+
+    let isSelected = false;
+    if (multiple) {
+      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));
+    } else {
+      isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);
+    }
+
+    return html`
+      <nile-option
+        value=${optionValue}
+        .selected=${isSelected}
+        .disabled=${isDisabled}
+        .showCheckbox=${multiple}
+        class=${classMap({
+          option: enableDescription ?? false,
+          [className ?? '']: !!className,
+        })}
+        .description=${description}
+        .isDescriptionEnabled=${enableDescription}
+      >
+        ${unsafeHTML(prefix)}
+        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}
+        ${unsafeHTML(suffix)}
+      </nile-option>
+    `;
+  }
+
+  static renderVirtualizedGrid(
+    virtualItems: VirtualItem[],
+    totalSize: number,
+    data: any[],
+    value: string | string[],
+    multiple: boolean,
+    gridColumns: number,
+    getDisplayText: (item: any) => string,
+    getItemValue: (item: any) => string,
+    isLoading: boolean,
+    allowHtmlLabel: boolean,
+    getItemDescription?: (item: any) => string,
+    getItemPrefix?: (item: any) => string,
+    getItemSuffix?: (item: any) => string,
+    gridColumnWidth?: number,
+  ): TemplateResult {
+    const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
+    const colTemplate = gridColumnWidth
+      ? `repeat(${gridColumns}, ${gridColumnWidth}px)`
+      : `repeat(${gridColumns}, 1fr)`;
+
+    return html`
+      <div
+        part="select-options"
+        class="combobox__options ${isLoading ? 'loading' : ''}"
+      >
+        <div style="position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;">
+          <div style="position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);">
+            ${repeat(
+              virtualItems,
+              (vItem) => vItem.key,
+              (vItem) => {
+                const rowStart = vItem.index * gridColumns;
+                const rowItems = data.slice(rowStart, rowStart + gridColumns);
+                return html`
+                  <div class="combobox__grid-row" style="display:grid;grid-template-columns:${colTemplate};gap:4px;">
+                    ${rowItems.map((item: any) =>
+                      ComboboxRenderer.renderItem(
+                        item, value, multiple, getDisplayText, getItemValue,
+                        allowHtmlLabel, getItemDescription, getItemPrefix,
+                        getItemSuffix,
+                      ),
+                    )}
+                  </div>
+                `;
+              },
+            )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static renderHorizontalGrid(
+    virtualItems: VirtualItem[],
+    totalSize: number,
+    data: any[],
+    value: string | string[],
+    multiple: boolean,
+    gridRows: number,
+    gridColumnWidth: number,
+    getDisplayText: (item: any) => string,
+    getItemValue: (item: any) => string,
+    isLoading: boolean,
+    allowHtmlLabel: boolean,
+    getItemDescription?: (item: any) => string,
+    getItemPrefix?: (item: any) => string,
+    getItemSuffix?: (item: any) => string,
+  ): TemplateResult {
+    const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;
+    const rowHeight = 38;
+
+    return html`
+      <div
+        part="select-options"
+        class="combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}"
+      >
+        <div style="position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;">
+          <div style="position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);">
+            ${repeat(
+              virtualItems,
+              (vCol) => vCol.key,
+              (vCol) => {
+                const colStart = vCol.index * gridRows;
+                const colItems = data.slice(colStart, colStart + gridRows);
+                return html`
+                  <div class="combobox__grid-col" style="width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;">
+                    ${colItems.map((item: any) =>
+                      ComboboxRenderer.renderItem(
+                        item, value, multiple, getDisplayText, getItemValue,
+                        allowHtmlLabel, getItemDescription, getItemPrefix,
+                        getItemSuffix,
+                      ),
+                    )}
+                  </div>
+                `;
+              },
+            )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static renderAddCustomOption(
+    searchValue: string,
+    multiple: boolean,
+  ): TemplateResult {
+    return html`
+      <nile-option
+        value=${searchValue}
+        class="combobox__add-option"
+        .showCheckbox=${multiple}
+      >
+        + Add "${searchValue}"
+      </nile-option>
+    `;
+  }
+
+  static shouldUseVirtualizer(data: any[], gridColumns = 1): boolean {
+    if (gridColumns > 1) return true;
+    return data.length >= 5;
+  }
+}

package/src/nile-combobox/search-manager.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 ComboboxSearchManager {
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  filter(
+    searchValue: string,
+    originalItems: any[],
+    getSearchText: (item: any) => string,
+  ): { filteredItems: any[]; showNoResults: boolean } {
+    if (!originalItems || originalItems.length === 0) {
+      return { filteredItems: [], showNoResults: true };
+    }
+
+    if (!searchValue || searchValue.trim() === '') {
+      return { filteredItems: [...originalItems], showNoResults: false };
+    }
+
+    const needle = searchValue.toLowerCase();
+    const filteredItems = originalItems.filter((item: any) => {
+      const text = getSearchText(item);
+      return text.toLowerCase().includes(needle);
+    });
+
+    return { filteredItems, showNoResults: filteredItems.length === 0 };
+  }
+
+  debounceSearch(
+    callback: (query: string) => void,
+    query: string,
+    debounceMs: number,
+  ): void {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+    this.debounceTimer = setTimeout(() => {
+      callback(query);
+      this.debounceTimer = null;
+    }, debounceMs);
+  }
+
+  cancelDebounce(): void {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+  }
+}