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

package/dist/src/nile-virtual-select/nile-virtual-select.js

@@ -173,6 +173,11 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.blockValueChange = false;
         /** Disable width synchronization */
         this.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.
+         */
+        this.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.
@@ -180,13 +185,17 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.maxOptionsVisible = 3;
         this.oldMaxOptionsVisible = 1;
         this.showListbox = false;
+        // Body append-related state
+        this.bodyAppendContainer = null;
+        this.bodyAppendListbox = null;
         this.handleDocumentMouseDown = (event) => {
             if (!this.open)
                 return;
             const path = event.composedPath();
             const hitSelf = path.includes(this);
             const hitPopup = this.popup && path.includes(this.popup);
-            if (!hitSelf && !hitPopup) {
+            const hitBodyAppend = this.bodyAppend && this.bodyAppendContainer && path.includes(this.bodyAppendContainer);
+            if (!hitSelf && !hitPopup && !hitBodyAppend) {
                 this.hide();
             }
         };
@@ -202,6 +211,12 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
                 return;
             }
         };
+        this.handleWindowResize = () => {
+            this.updateBodyAppendPosition();
+        };
+        this.handleWindowScroll = () => {
+            this.updateBodyAppendPosition();
+        };
         this.resizeController = new ResizeController(this, {
             callback: (entries) => {
                 for (const entry of entries) {
@@ -237,6 +252,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             clearTimeout(this.scrollTimeout);
             this.scrollTimeout = undefined;
         }
+        // Clean up body append elements
+        this.cleanupBodyAppend();
     }
     updated(changedProperties) {
         if (changedProperties.has('value')) {
@@ -289,18 +306,26 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         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);
     }
     addOpenListeners() {
         document.addEventListener('focusin', this.handleDocumentFocusIn);
         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);
+        }
     }
     removeOpenListeners() {
         document.removeEventListener('focusin', this.handleDocumentFocusIn);
         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);
     }
     handleFocus() {
         this.hasFocus = true;
@@ -316,7 +341,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         const path = event.composedPath();
         const hitSelf = path.includes(this);
         const hitPopup = this.popup && path.includes(this.popup);
-        if (!hitSelf && !hitPopup) {
+        const hitBodyAppend = this.bodyAppend && this.bodyAppendContainer && path.includes(this.bodyAppendContainer);
+        if (!hitSelf && !hitPopup && !hitBodyAppend) {
             this.hide();
         }
     }
@@ -634,6 +660,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.showNoResults = false;
         }
         this.requestUpdate();
+        // Update body append content if it's active
+        if (this.bodyAppend && this.bodyAppendContainer) {
+            this.updateBodyAppendContent();
+        }
     }
     handleRenderItemConfigChange() {
         if (this.value && this.data.length > 0) {
@@ -647,15 +677,35 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.showNoResults = true;
         }
         this.requestUpdate();
+        // Update body append content if it's active
+        if (this.bodyAppend && this.bodyAppendContainer) {
+            this.updateBodyAppendContent();
+        }
+    }
+    handleBodyAppendChange() {
+        if (this.open) {
+            if (this.bodyAppend) {
+                this.setupBodyAppend();
+            }
+            else {
+                this.cleanupBodyAppend();
+            }
+        }
     }
     async handleOpenChange() {
         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();
+            }
         }
     }
     async handleOpen() {
@@ -998,9 +1048,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         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()}
@@ -1169,6 +1220,170 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             }
         });
     }
+    createBodyAppendContainer() {
+        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;
+    }
+    createBodyAppendListbox() {
+        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;
+    }
+    positionBodyAppend() {
+        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';
+    }
+    updateBodyAppendPosition() {
+        if (this.bodyAppend && this.bodyAppendContainer) {
+            this.positionBodyAppend();
+        }
+    }
+    async updateBodyAppendContent() {
+        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);
+        }
+        // Render loader
+        const loaderContent = this.renderLoader();
+        const loaderDiv = document.createElement('div');
+        render(loaderContent, loaderDiv);
+        if (loaderDiv.firstElementChild) {
+            listbox.appendChild(loaderDiv.firstElementChild);
+        }
+        // Render virtualized content
+        const virtualizedContent = this.getVirtualizedContent();
+        const virtualizedDiv = document.createElement('div');
+        render(virtualizedContent, virtualizedDiv);
+        if (virtualizedDiv.firstElementChild) {
+            listbox.appendChild(virtualizedDiv.firstElementChild);
+        }
+        // Render footer
+        if (this.multiple) {
+            const footerContent = this.renderFooter();
+            const footerDiv = document.createElement('div');
+            render(footerContent, footerDiv);
+            if (footerDiv.firstElementChild) {
+                listbox.appendChild(footerDiv.firstElementChild);
+            }
+        }
+        // Append the listbox to the body append container
+        this.bodyAppendListbox.appendChild(listbox);
+        // Re-attach event listeners
+        this.attachBodyAppendEventListeners();
+    }
+    attachBodyAppendEventListeners() {
+        if (!this.bodyAppendListbox)
+            return;
+        // Find the cloned listbox within the body append container
+        const clonedListbox = this.bodyAppendListbox.querySelector('.select__listbox');
+        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;
+            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');
+        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));
+            }
+        }
+    }
+    setupBodyAppend() {
+        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();
+        });
+    }
+    cleanupBodyAppend() {
+        if (this.bodyAppendContainer && this.bodyAppendContainer.parentNode) {
+            this.bodyAppendContainer.parentNode.removeChild(this.bodyAppendContainer);
+        }
+        this.bodyAppendContainer = null;
+        this.bodyAppendListbox = null;
+    }
 };
 NileVirtualSelect.styles = styles;
 __decorate([
@@ -1308,6 +1523,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileVirtualSelect.prototype, "noWidthSync", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileVirtualSelect.prototype, "bodyAppend", void 0);
 __decorate([
     property({ attribute: 'max-options-visible', type: Number })
 ], NileVirtualSelect.prototype, "maxOptionsVisible", void 0);
@@ -1317,6 +1535,12 @@ __decorate([
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "showListbox", void 0);
+__decorate([
+    state()
+], NileVirtualSelect.prototype, "bodyAppendContainer", void 0);
+__decorate([
+    state()
+], NileVirtualSelect.prototype, "bodyAppendListbox", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleDisabledChange", null);
@@ -1332,6 +1556,9 @@ __decorate([
 __decorate([
     watch('optionsLoading', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleOptionsLoadingChange", null);
+__decorate([
+    watch('bodyAppend', { waitUntilFirstUpdate: true })
+], NileVirtualSelect.prototype, "handleBodyAppendChange", null);
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleOpenChange", null);