@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

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

@@ -69,7 +69,9 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
+    private readonly portalManager;
     popup: NilePopup;
+    combobox: HTMLElement;
     displayInput: HTMLInputElement;
     valueInput: HTMLInputElement;
     virtualizedContainer: HTMLElement;
@@ -163,6 +165,11 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     blockValueChange: boolean;
     /** Disable width synchronization */
     noWidthSync: boolean;
+    /**
+     * 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.
+     */
+    portal: boolean;
     /**
      * 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.
@@ -170,6 +177,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     maxOptionsVisible: number;
     oldMaxOptionsVisible: number;
     showListbox: boolean;
+    private wasShowSelectedCheckedOnClose;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
@@ -209,6 +217,8 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
      * we are catching only the error message related to the virtualizer.
      */
     private handleWindowError;
+    private handleWindowResize;
+    private handleWindowScroll;
     private handleFooterClick;
     private toggleShowSelected;
     private unSelectAll;
@@ -241,6 +251,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     handleDataChange(): void;
     handleRenderItemConfigChange(): void;
     handleOptionsLoadingChange(): void;
+    handlePortalAppendChange(): void;
     handleOpenChange(): Promise<void>;
     private handleOpen;
     private handleClose;

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

@@ -27,6 +27,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { VirtualSelectSelectionManager } from './selection-manager.js';
 import { VirtualSelectSearchManager } from './search-manager.js';
 import { VirtualSelectRenderer } from './renderer.js';
+import { PortalManager } from './portal-manager.js';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 /**
  * Nile Virtual Select component.
@@ -86,6 +87,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             assumeInteractionOn: ['nile-blur', 'nile-input'],
         });
         this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
+        this.portalManager = new PortalManager(this);
         this.hasFocus = false;
         this.displayLabel = '';
         this.selectedOptions = [];
@@ -173,6 +175,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.portal = 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 +187,15 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.maxOptionsVisible = 3;
         this.oldMaxOptionsVisible = 1;
         this.showListbox = false;
+        this.wasShowSelectedCheckedOnClose = false;
         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 hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+            if (!hitSelf && !hitPopup && !hitPortalAppend) {
                 this.hide();
             }
         };
@@ -202,6 +211,12 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
                 return;
             }
         };
+        this.handleWindowResize = () => {
+            this.portalManager.updatePortalAppendPosition();
+        };
+        this.handleWindowScroll = () => {
+            this.portalManager.updatePortalAppendPosition();
+        };
         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.portalManager.cleanupPortalAppend();
     }
     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.portal) {
+            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 hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+        if (!hitSelf && !hitPopup && !hitPortalAppend) {
             this.hide();
         }
     }
@@ -382,6 +408,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         else {
             this.data = [...this.originalOptionItems];
         }
+        // Reset measured height when show selected toggles (content height may change)
+        this.portalManager.resetMeasuredHeight();
         this.requestUpdate();
         this.repaintOptionsContainer();
     }
@@ -550,6 +578,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         if (!this.disableLocalSearch) {
             this.filterVirtualOptions(this.searchValue);
             this.repaintOptionsContainer();
+            // Reset measured height when search changes (content height may change)
+            this.portalManager.resetMeasuredHeight();
         }
     }
     repaintOptionsContainer() {
@@ -620,11 +650,18 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     handleValueChange() {
         this.selectionChanged();
         this.requestUpdate();
+        // Update body append content if it's active
+        if (this.portal && this.portalManager.portalContainerElement) {
+            this.portalManager.updatePortalAppendPosition();
+        }
     }
     handleDataChange() {
         if (this.data.length > 0 && this.open && !this.showSelected && !this.searchValue) {
             this.originalOptionItems = [...this.data];
         }
+        if (this.data.length > 0 && this.open && this.searchValue) {
+            this.originalOptionItems = [...this.originalOptionItems, ...this.data];
+        }
         this.selectionChanged();
         // Show no results message when data is empty and not loading
         if (!this.optionsLoading && !this.loading && this.data.length === 0) {
@@ -634,6 +671,12 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.showNoResults = false;
         }
         this.requestUpdate();
+        // Reset measured height when data changes (content height may change)
+        this.portalManager.resetMeasuredHeight();
+        // Update body append content if it's active
+        if (this.portal && this.portalManager.portalContainerElement) {
+            this.portalManager.updatePortalAppendPosition();
+        }
     }
     handleRenderItemConfigChange() {
         if (this.value && this.data.length > 0) {
@@ -647,15 +690,35 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.showNoResults = true;
         }
         this.requestUpdate();
+        // Update body append content if it's active
+        if (this.portal && this.portalManager.portalContainerElement) {
+            this.portalManager.updatePortalAppendPosition();
+        }
+    }
+    handlePortalAppendChange() {
+        if (this.open) {
+            if (this.portal) {
+                this.portalManager.setupPortalAppend();
+            }
+            else {
+                this.portalManager.cleanupPortalAppend();
+            }
+        }
     }
     async handleOpenChange() {
         if (this.open && !this.disabled) {
             await this.handleOpen();
             this.showListbox = true;
+            if (this.portal) {
+                this.portalManager.setupPortalAppend();
+            }
         }
         else {
             await this.handleClose();
             this.showListbox = false;
+            if (this.portal) {
+                this.portalManager.cleanupPortalAppend();
+            }
         }
     }
     async handleOpen() {
@@ -668,6 +731,11 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             dir: 'ltr',
         });
         await animateTo(this.popup.popup, keyframes, options);
+        if (this.wasShowSelectedCheckedOnClose) {
+            this.showSelected = false;
+            this.data = [...this.originalOptionItems];
+            this.wasShowSelectedCheckedOnClose = false;
+        }
         this.initializeOriginalItems();
         this.filterVirtualOptions(this.searchValue);
         this.resetScrollPosition();
@@ -676,6 +744,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     async handleClose() {
         this.emit('nile-hide', { value: this.value, name: this.name });
         this.removeOpenListeners();
+        this.wasShowSelectedCheckedOnClose = this.showSelected;
         await stopAnimations(this);
         const { keyframes, options } = getAnimation(this, 'select.hide', {
             dir: 'ltr',
@@ -683,6 +752,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         await animateTo(this.popup.popup, keyframes, options);
         this.popup.active = false;
         this.searchValue = '';
+        // Reset measured height when popup closes (content may change on next open)
+        this.portalManager.resetMeasuredHeight();
         this.emit('nile-after-hide', { value: this.value, name: this.name });
     }
     initializeOriginalItems() {
@@ -801,10 +872,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             'select--large': this.size === 'large',
         })}
         placement=${this.placement}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        strategy=${this.portal ? 'fixed' : (this.hoist ? 'fixed' : 'absolute')}
         distance="6"
-        flip
-        shift
+        ?flip=${!this.portal}
+        ?shift=${!this.portal}
         sync=${ifDefined(!this.noWidthSync ? 'width' : undefined)}
         auto-size="vertical"
         auto-size-padding="10"
@@ -998,9 +1069,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         part="listbox"
         class="select__listbox ${this.searchEnabled
             ? 'select__search-enabled '
-            : ''}"
+            : ''} ${this.portal ? 'select__portal-append-hidden' : ''}"
         tabindex="-1"
         @mouseup=${this.handleOptionClick}
+        style=${this.portal ? 'display: none;' : ''}
       >
         ${this.renderSearch()}
         ${this.renderLoader()}
@@ -1174,6 +1246,9 @@ NileVirtualSelect.styles = styles;
 __decorate([
     query('.select')
 ], NileVirtualSelect.prototype, "popup", void 0);
+__decorate([
+    query('.select__combobox')
+], NileVirtualSelect.prototype, "combobox", void 0);
 __decorate([
     query('.select__display-input')
 ], NileVirtualSelect.prototype, "displayInput", void 0);
@@ -1308,6 +1383,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileVirtualSelect.prototype, "noWidthSync", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileVirtualSelect.prototype, "portal", void 0);
 __decorate([
     property({ attribute: 'max-options-visible', type: Number })
 ], NileVirtualSelect.prototype, "maxOptionsVisible", void 0);
@@ -1317,6 +1395,9 @@ __decorate([
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "showListbox", void 0);
+__decorate([
+    state()
+], NileVirtualSelect.prototype, "wasShowSelectedCheckedOnClose", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleDisabledChange", null);
@@ -1332,6 +1413,9 @@ __decorate([
 __decorate([
     watch('optionsLoading', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleOptionsLoadingChange", null);
+__decorate([
+    watch('portal', { waitUntilFirstUpdate: true })
+], NileVirtualSelect.prototype, "handlePortalAppendChange", null);
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleOpenChange", null);