@aquera/nile-elements 1.1.3-beta-1.4 → 1.1.3-beta-2.1

package/src/nile-grid-head-item/nile-grid-head-item.css.ts

@@ -12,8 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --padding: var(--nile-spacing-lg) var(--nile-spacing-3xl);
-    --height: 50px;
+    --padding: var(--nile-spacing-xl) var(--nile-spacing-3xl);
     position: relative;
     box-sizing: border-box;
     user-select: none;
@@ -24,16 +23,7 @@ export const styles = css`
     padding: var(--padding);
     background-color: var(--nile-colors-neutral-100);
     border-bottom: 1px solid var(--nile-colors-neutral-400);
-    font-size: 12px;
-    font-weight: 500;
-    font-family: var(--nile-font-weight-medium);
-    min-height: var(--height);
-  }
-
-  .head-item-base {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    border-right: 1px solid var(--nile-colors-neutral-400);
   }
 
   ::slotted(*) {
@@ -42,17 +32,12 @@ export const styles = css`
     white-space: nowrap;
   }
 
-  :host(:last-child) .resize-handle {
-    border-right: none;
-    display: none;
-  }
-
   .resize-handle {
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
-    cursor: ew-resize;
+    cursor: col-resize;
     touch-action: none;
     z-index: 1;
     width: 2px;

package/src/nile-grid-head-item/nile-grid-head-item.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, CSSResultArray, TemplateResult } from 'lit';
+import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-grid-head-item.css';
 import NileElement from '../internal/nile-element';
@@ -33,14 +33,18 @@ export class NileGridHeadItem extends NileElement {
 
   @property({ type: Number, reflect: true, attribute: true }) colspan = 1;
   @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;
+  @property({ type: String, reflect: true, attribute: true }) scope:
+    | 'col'
+    | 'row' = 'col';
   @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) colSticky = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) lastColSticky = false;
-  @property({ type: Number, reflect: true, attribute: true }) customWidth: number | null = null;
+  @property({ type: Boolean, reflect: true, attribute: true }) sticky = false;
 
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role','row');
+    this.setAttribute(
+      'role',
+      this.scope === 'row' ? 'rowheader' : 'columnheader'
+    );
   }
 
   private onHandlePointerDown = (ev: PointerEvent) => {
@@ -65,7 +69,12 @@ export class NileGridHeadItem extends NileElement {
   };
 
   protected updated(changed: Map<string, unknown>) {
-    this.setAttribute('role','row');
+    if (changed.has('scope')) {
+      this.setAttribute(
+        'role',
+        this.scope === 'row' ? 'rowheader' : 'columnheader'
+      );
+    }
   }
 
   disconnectedCallback() {
@@ -75,14 +84,13 @@ export class NileGridHeadItem extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div part="grid-head-item-base" class="head-item-base">
+      <div style="display: contents;">
         <slot></slot>
         ${this.resizable
           ? html`
               <div
                 aria-hidden="false"
                 class="resize-handle"
-                part="resize-handle"
                 @pointerdown=${this.onHandlePointerDown}
               ></div>
             `

package/src/nile-grid-row/nile-grid-row.css.ts

@@ -12,30 +12,18 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    display: grid;
-    grid-template-columns: var(--nile-grid-columns);
-    position: relative;
+    display: contents;
   }
 
-  :host(:hover) {
+  ::slotted(nile-grid-header) {
     background-color: var(--nile-colors-neutral-100);
   }
 
-  .row-bg {
-    grid-column: 1 / -1;
-    pointer-events: none;
+  .row-layer {
+    background-color: var(--row-bg, transparent);
     z-index: 0;
-    display: none;
+    pointer-events: auto;
   }
-
-  .row-slot {
-    grid-column: 1 / -1;
-    display: contents;
-    z-index: 1;
-  }
-
-  :host([selected]) .row-bg { background: var(--row-selected-bg, rgba(0,0,0,.08)); }
-  :host([error]) .row-bg { background: var(--row-error-bg, #fff4f4); }
 `;
 
 export default [styles];

package/src/nile-grid-row/nile-grid-row.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-grid-row.css';
 import NileElement from '../internal/nile-element';
 
@@ -26,21 +26,18 @@ export class NileGridRow extends NileElement {
     return [styles];
   }
 
-  @property({ type: Boolean, reflect: true, attribute: true }) disabled: boolean = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) hover: boolean = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) selected: boolean = false;
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'row');
   }
 
-  protected render() {
+  public render(): TemplateResult {
     return html`
-      <div part="row-slot" class="row-slot">
+      <div part="row-layer" class="row-layer" data-row-bg></div>
+
+      <div style="display: contents;">
         <slot></slot>
       </div>
-      <div part="row-bg" class="row-bg"></div>
     `;
   }
 

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

@@ -174,6 +174,8 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
+  @property({ type: Boolean, reflect: true }) bodyAppend = false;
+
   /** Allows more than one option to be selected. */
   @property({
     reflect: true,

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

@@ -50,6 +50,7 @@ export class VirtualScrollHelper {
           .data=${component.data}
           .open=${component.open}
           .loading=${component.loading}
+          .bodyAppend=${component.bodyAppend}
           exportparts="
             select-options,
             select-no-results,

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

@@ -247,6 +247,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Disable width synchronization */
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
+  /** 
+   * When true, the listbox 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 }) bodyAppend = false;
+
   /**
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
@@ -256,6 +262,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @state() oldMaxOptionsVisible: number = 1;
   @state() showListbox: boolean = false;
+  
+  // Body append-related state
+  @state() private bodyAppendContainer: HTMLElement | null = null;
+  @state() private bodyAppendListbox: HTMLElement | null = null;
 
   /** Gets the validity state object */
   get validity() {
@@ -286,6 +296,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = undefined;
     }
+    // Clean up body append elements
+    this.cleanupBodyAppend();
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -343,6 +355,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.handleWindowError = this.handleWindowError.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.handleWindowScroll = this.handleWindowScroll.bind(this);
   }
 
   private addOpenListeners(): void {
@@ -350,6 +364,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
     window.addEventListener('error', this.handleWindowError);
+    
+    if (this.bodyAppend) {
+      window.addEventListener('resize', this.handleWindowResize);
+      window.addEventListener('scroll', this.handleWindowScroll, true);
+    }
   }
 
   private removeOpenListeners(): void {
@@ -357,6 +376,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
     window.removeEventListener('error', this.handleWindowError);
+    window.removeEventListener('resize', this.handleWindowResize);
+    window.removeEventListener('scroll', this.handleWindowScroll, true);
   }
 
   private handleFocus(): void {
@@ -374,8 +395,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     const path = event.composedPath(); 
     const hitSelf  = path.includes(this);
     const hitPopup = this.popup && path.includes(this.popup);
+    const hitBodyAppend = this.bodyAppend && this.bodyAppendContainer && path.includes(this.bodyAppendContainer);
 
-    if (!hitSelf && !hitPopup) {
+    if (!hitSelf && !hitPopup && !hitBodyAppend) {
       this.hide();
     }
   }
@@ -437,8 +459,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     const path = event.composedPath();
     const hitSelf  = path.includes(this);
     const hitPopup = this.popup && path.includes(this.popup);
+    const hitBodyAppend = this.bodyAppend && this.bodyAppendContainer && path.includes(this.bodyAppendContainer);
   
-    if (!hitSelf && !hitPopup) {
+    if (!hitSelf && !hitPopup && !hitBodyAppend) {
       this.hide();
     }
   };
@@ -456,6 +479,14 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   };
 
+  private handleWindowResize = (): void => {
+    this.updateBodyAppendPosition();
+  };
+
+  private handleWindowScroll = (): void => {
+    this.updateBodyAppendPosition();
+  };
+
   private handleFooterClick(event: MouseEvent): void {
     event.stopPropagation();
     event.preventDefault();
@@ -807,6 +838,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = false;
     }
     this.requestUpdate();
+    
+    // Update body append content if it's active
+    if (this.bodyAppend && this.bodyAppendContainer) {
+      this.updateBodyAppendContent();
+    }
   }
 
   @watch('renderItemConfig', { waitUntilFirstUpdate: true })
@@ -824,6 +860,22 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = true;
     }
     this.requestUpdate();
+    
+    // Update body append content if it's active
+    if (this.bodyAppend && this.bodyAppendContainer) {
+      this.updateBodyAppendContent();
+    }
+  }
+
+  @watch('bodyAppend', { waitUntilFirstUpdate: true })
+  handleBodyAppendChange(): void {
+    if (this.open) {
+      if (this.bodyAppend) {
+        this.setupBodyAppend();
+      } else {
+        this.cleanupBodyAppend();
+      }
+    }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
@@ -831,9 +883,17 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     if (this.open && !this.disabled) {
       await this.handleOpen();
       this.showListbox = true;
+      
+      if (this.bodyAppend) {
+        this.setupBodyAppend();
+      }
     } else {
       await this.handleClose();
       this.showListbox = false;
+      
+      if (this.bodyAppend) {
+        this.cleanupBodyAppend();
+      }
     }
   }
 
@@ -1219,9 +1279,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         part="listbox"
         class="select__listbox ${this.searchEnabled
           ? 'select__search-enabled '
-          : ''}"
+          : ''} ${this.bodyAppend ? 'select__body-append-hidden' : ''}"
         tabindex="-1"
         @mouseup=${this.handleOptionClick}
+        style=${this.bodyAppend ? 'display: none;' : ''}
       >
         ${this.renderSearch()}
         ${this.renderLoader()}
@@ -1425,6 +1486,199 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       }
     });
   }
+
+  private createBodyAppendContainer(): HTMLElement {
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.zIndex = '9999';
+    container.style.pointerEvents = 'none';
+    container.className = 'nile-virtual-select-body-append';
+    
+    // Apply additional styling to match the original popup
+    container.style.background = 'white';
+    container.style.border = '1px solid #e0e0e0';
+    container.style.borderRadius = '4px';
+    container.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+    container.style.maxHeight = '300px';
+    container.style.overflow = 'hidden';
+    
+    return container;
+  }
+
+  private createBodyAppendListbox(): HTMLElement {
+    const listbox = document.createElement('div');
+    listbox.id = 'listbox';
+    listbox.setAttribute('role', 'listbox');
+    listbox.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    listbox.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+    listbox.setAttribute('aria-labelledby', 'label');
+    listbox.setAttribute('part', 'listbox');
+    listbox.className = `select__listbox ${this.searchEnabled ? 'select__search-enabled ' : ''}`;
+    listbox.setAttribute('tabindex', '-1');
+    
+    // Apply styling to match the original listbox
+    listbox.style.background = 'white';
+    listbox.style.border = 'none';
+    listbox.style.borderRadius = '4px';
+    listbox.style.maxHeight = '300px';
+    listbox.style.overflowY = 'auto';
+    
+    listbox.addEventListener('mouseup', this.handleOptionClick.bind(this));
+    return listbox;
+  }
+
+  private positionBodyAppend(): void {
+    if (!this.bodyAppendContainer || !this.popup) return;
+
+    const rect = this.getBoundingClientRect();
+    
+    // Position the body append container to match the popup position
+    this.bodyAppendContainer.style.left = `${rect.left}px`;
+    this.bodyAppendContainer.style.top = `${rect.bottom + 6}px`; // 6px is the distance from the popup
+    this.bodyAppendContainer.style.width = `${rect.width}px`;
+    this.bodyAppendContainer.style.pointerEvents = 'auto';
+  }
+
+  private updateBodyAppendPosition(): void {
+    if (this.bodyAppend && this.bodyAppendContainer) {
+      this.positionBodyAppend();
+    }
+  }
+
+  private async updateBodyAppendContent(): Promise<void> {
+    if (!this.bodyAppendListbox) return;
+
+    // Clear the body append listbox
+    this.bodyAppendListbox.innerHTML = '';
+    
+    // Create a new listbox element
+    const listbox = document.createElement('div');
+    listbox.id = 'listbox';
+    listbox.setAttribute('role', 'listbox');
+    listbox.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    listbox.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+    listbox.setAttribute('aria-labelledby', 'label');
+    listbox.setAttribute('part', 'listbox');
+    listbox.className = `select__listbox ${this.searchEnabled ? 'select__search-enabled ' : ''}`;
+    listbox.setAttribute('tabindex', '-1');
+    
+    // Render the content using Lit's render function
+    const { render } = await import('lit');
+    
+    // Render search
+    if (this.searchEnabled) {
+      const searchContent = this.renderSearch();
+      const searchDiv = document.createElement('div');
+      render(searchContent, searchDiv);
+      listbox.appendChild(searchDiv.firstElementChild as HTMLElement);
+    }
+    
+    // Render loader
+    const loaderContent = this.renderLoader();
+    const loaderDiv = document.createElement('div');
+    render(loaderContent, loaderDiv);
+    if (loaderDiv.firstElementChild) {
+      listbox.appendChild(loaderDiv.firstElementChild as HTMLElement);
+    }
+    
+    // Render virtualized content
+    const virtualizedContent = this.getVirtualizedContent();
+    const virtualizedDiv = document.createElement('div');
+    render(virtualizedContent, virtualizedDiv);
+    if (virtualizedDiv.firstElementChild) {
+      listbox.appendChild(virtualizedDiv.firstElementChild as HTMLElement);
+    }
+    
+    // Render footer
+    if (this.multiple) {
+      const footerContent = this.renderFooter();
+      const footerDiv = document.createElement('div');
+      render(footerContent, footerDiv);
+      if (footerDiv.firstElementChild) {
+        listbox.appendChild(footerDiv.firstElementChild as HTMLElement);
+      }
+    }
+    
+    // Append the listbox to the body append container
+    this.bodyAppendListbox.appendChild(listbox);
+    
+    // Re-attach event listeners
+    this.attachBodyAppendEventListeners();
+  }
+
+  private attachBodyAppendEventListeners(): void {
+    if (!this.bodyAppendListbox) return;
+
+    // Find the cloned listbox within the body append container
+    const clonedListbox = this.bodyAppendListbox.querySelector('.select__listbox') as HTMLElement;
+    if (!clonedListbox) return;
+
+    // Re-attach the option click handler - use event delegation for better performance
+    clonedListbox.addEventListener('mouseup', this.handleOptionClick.bind(this));
+    
+    // Also add click handler for nile-option elements specifically
+    clonedListbox.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      const option = target.closest('nile-option');
+      if (option) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleOptionClick(event);
+      }
+    });
+    
+    // Re-attach search handlers if search is enabled
+    const searchInput = clonedListbox.querySelector('nile-input');
+    if (searchInput) {
+      searchInput.addEventListener('nile-input', this.handleSearchChange.bind(this));
+      searchInput.addEventListener('nile-focus', this.handleSearchFocus.bind(this));
+      searchInput.addEventListener('nile-change', this.onInputChange.bind(this));
+    }
+
+    // Re-attach scroll handler
+    const virtualizedContainer = clonedListbox.querySelector('.virtualized') as HTMLElement;
+    if (virtualizedContainer) {
+      virtualizedContainer.addEventListener('scroll', this.handleScroll.bind(this));
+    }
+
+    // Re-attach footer handlers if multiple
+    if (this.multiple) {
+      const showSelectedSpan = clonedListbox.querySelector('.select__footer span[style*="cursor: pointer"]');
+      if (showSelectedSpan) {
+        showSelectedSpan.addEventListener('click', this.toggleShowSelected.bind(this));
+      }
+
+      const clearSpan = clonedListbox.querySelector('.select__clear');
+      if (clearSpan) {
+        clearSpan.addEventListener('click', this.unSelectAll.bind(this));
+      }
+    }
+  }
+
+  private setupBodyAppend(): void {
+    if (!this.bodyAppend) return;
+
+    this.bodyAppendContainer = this.createBodyAppendContainer();
+    this.bodyAppendListbox = this.createBodyAppendListbox();
+    
+    this.bodyAppendContainer.appendChild(this.bodyAppendListbox);
+    document.body.appendChild(this.bodyAppendContainer);
+    
+    this.positionBodyAppend();
+    
+    // Wait for the next tick to ensure the original listbox is rendered
+    this.updateComplete.then(async () => {
+      await this.updateBodyAppendContent();
+    });
+  }
+
+  private cleanupBodyAppend(): void {
+    if (this.bodyAppendContainer && this.bodyAppendContainer.parentNode) {
+      this.bodyAppendContainer.parentNode.removeChild(this.bodyAppendContainer);
+    }
+    this.bodyAppendContainer = null;
+    this.bodyAppendListbox = null;
+  }
 }
 
 setDefaultAnimation('select.show', {