@aquera/nile-elements 0.1.74 → 0.1.75-beta-1.2

package/package.json

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

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

@@ -944,8 +944,9 @@ export class NileSelect extends NileElement implements NileFormControl{
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
 
-    // Select only the options that match the new value
-    this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
+    if(!this.enableVirtualScroll) {
+      this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
+    }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })

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

@@ -32,6 +32,10 @@ export const styles = css`
     flex-direction: column;
   }
 
+  .virtualized div[virtualizer-sizer] {
+    display: none !important;
+  }
+
   .virtualized:not(:has(lit-virtualizer)) nile-option {
     flex-shrink: 0;
   }

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

@@ -29,7 +29,7 @@ import { HasSlotController } from '../internal/slot';
 import { waitForEvent } from '../internal/event';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
@@ -73,6 +73,10 @@ import { VirtualSelectRenderer } from './renderer.js';
  * @event nile-hide - Emitted when the select's menu closes.
  * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
  * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
+ * @event nile-scroll - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.
+ * @event nile-scroll-start - Emitted when the user starts scrolling within the virtualized container.
+ * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -111,6 +115,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   @state() displayLabel = '';
   @state() selectedOptions: VirtualOption[] = [];
   @state() oldValue: string | string[] = '';
+  
+  private scrollTimeout: number | undefined;
+  private scrolling = false;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -265,6 +272,17 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   disconnectedCallback() {
     this.removeOpenListeners();
+    // Clear any pending scroll timeout to prevent memory leaks
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = undefined;
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+      if(changedProperties.has('value')) {
+         this.selectionChanged();
+      }
   }
 
   private initializeComponent(): void {
@@ -307,18 +325,21 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    this.handleWindowError = this.handleWindowError.bind(this);
   }
 
   private addOpenListeners(): void {
     document.addEventListener('focusin', this.handleDocumentFocusIn);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    window.addEventListener('error', this.handleWindowError);
   }
 
   private removeOpenListeners(): void {
     document.removeEventListener('focusin', this.handleDocumentFocusIn);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    window.removeEventListener('error', this.handleWindowError);
   }
 
   private handleFocus(): void {
@@ -405,6 +426,14 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   };
 
+  private handleWindowError = (event: ErrorEvent): void => {
+    const errorMessage = event.error?.message || event.message || '';
+    if (errorMessage.includes('Cannot read properties of null (reading \'insertBefore\')')) {
+      event.preventDefault();
+      return;
+    }
+  };
+
   private handleFooterClick(event: MouseEvent): void {
     event.stopPropagation();
     event.preventDefault();
@@ -628,12 +657,58 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   handleSearchChange(e: any): void {
     this.searchValue = e.detail.value;
+    
+    this.emit('nile-search', { 
+      query: this.searchValue,
+      name: this.name 
+    });
+    
     if (!this.disableLocalSearch) {
       this.filterVirtualOptions(this.searchValue);
       this.resetScrollPosition();
     }
   }
 
+  handleScroll(e: Event): void {
+    if(this.showSelected) {
+      return;
+    }
+
+    const target = e.target as HTMLElement;
+    
+    this.emit('nile-scroll', {
+      scrollTop: target.scrollTop,
+      scrollLeft: target.scrollLeft,
+      name: this.name
+    });
+
+    if (!this.scrolling) {
+      this.scrolling = true;
+      this.emit('nile-scroll-start', {
+        scrollTop: target.scrollTop,
+        scrollLeft: target.scrollLeft,
+        name: this.name
+      });
+    }
+
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = window.setTimeout(() => {
+      if (this.scrolling) {
+        this.scrolling = false;
+      }
+    }, 300);
+
+    const isAtBottom = Math.ceil(target.scrollTop) >= Math.floor(target.scrollHeight - target.offsetHeight);
+    if (isAtBottom) {
+        this.emit('nile-scroll-end', {
+          scrollTop: target.scrollTop,
+          scrollLeft: target.scrollLeft,
+          name: this.name,
+          isAtBottom: true
+        });
+    }
+  }
+
   filterVirtualOptions(searchValue: string): void {
     const result = VirtualSelectSearchManager.filterVirtualOptions(
       searchValue,
@@ -670,18 +745,17 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @watch('data', { waitUntilFirstUpdate: true })
   handleDataChange(): void {
+    if (this.data.length > 0 && this.open && !this.showSelected) {
+      this.originalOptionItems = [...this.data];
+    }
+    
     this.selectionChanged();
-    // Show no results message when data is empty and not loading
     if (!this.optionsLoading && this.data.length === 0) {
       this.showNoResults = true;
     } else if (this.data.length > 0) {
       this.showNoResults = false;
     }
     this.requestUpdate();
-    
-    if (this.open) {
-      this.resetScrollPosition();
-    }
   }
 
   @watch('renderItemConfig', { waitUntilFirstUpdate: true })
@@ -745,7 +819,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private initializeOriginalItems(): void {
-    if (this.originalOptionItems.length === 0 && this.data.length > 0) {
+    if (this.data.length > 0) {
       this.originalOptionItems = [...this.data];
     }
   }
@@ -1197,7 +1271,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.renderItemConfig?.getValue,
       this.showNoResults,
       this.noResultsMessage,
-      this.optionsLoading
+      this.optionsLoading,
+      this.handleScroll.bind(this)
     );
   }
 
@@ -1272,16 +1347,16 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   private resetScrollPosition(): void {
     this.updateComplete.then(() => {
-      if (this.virtualizedContainer) {
+      if (this.virtualizedContainer && this.virtualizedContainer.isConnected) {
         this.virtualizedContainer.scrollTop = 0;
         
         const listbox = this.shadowRoot?.querySelector('.select__listbox') as HTMLElement;
-        if (listbox) {
+        if (listbox && listbox.isConnected) {
           listbox.scrollTop = 0;
         }
         
         const virtualizer = this.virtualizedContainer.querySelector('lit-virtualizer') as HTMLElement;
-        if (virtualizer) {
+        if (virtualizer && virtualizer.isConnected) {
           virtualizer.scrollTop = 0;
         }
       }

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

@@ -21,7 +21,8 @@ export class VirtualSelectRenderer {
     getItemValue?: (item: any) => string,
     showNoResults?: boolean,
     noResultsMessage?: string,
-    optionsLoading?: boolean
+    optionsLoading?: boolean,
+    onScroll?: (e: Event) => void
   ): TemplateResult {
     return html`
       <div part="select-options" class="select__options ${
@@ -37,6 +38,7 @@ export class VirtualSelectRenderer {
               <div
                 class="virtualized"
                 part="virtualized"
+                @scroll=${onScroll}
               >
                 ${VirtualSelectRenderer.shouldUseVirtualizer(data)
                   ? html`
@@ -70,8 +72,8 @@ export class VirtualSelectRenderer {
     
     const optionValue = valueFn(item);
     const displayText = displayTextFn(item);
-    const isDisabled = item.disabled || false;
-    const className = item.className;
+    const isDisabled = item?.disabled || false;
+    const className = item?.className;
     
     let isSelected = false;
     if (multiple) {
@@ -95,9 +97,9 @@ export class VirtualSelectRenderer {
 
   /**
    * Determines whether to use virtualizer based on dataset size
-   * For small datasets (less than 50 items), use regular rendering for better sizing
+   * For small datasets (less than 5 items), use regular rendering for better sizing
    */
   private static shouldUseVirtualizer(data: any[]): boolean {
-    return data.length >= 50;
+    return data.length >= 5;
   }
 }