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

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

@@ -27,6 +27,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import '../nile-virtual-select/nile-virtual-select';
 import { VirtualScrollHelper } from './virtual-scroll-helper';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
+import { PortalManager } from './portal-manager';
 /**
  * Nile icon component.
  *
@@ -93,6 +94,7 @@ let NileSelect = class NileSelect extends NileElement {
     }
     constructor() {
         super();
+        this.portalManager = new PortalManager(this);
         this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
         this.typeToSelectString = '';
         this.scrolling = false;
@@ -122,6 +124,11 @@ let NileSelect = class NileSelect extends NileElement {
         this.disableLocalSearch = false;
         this.optionsLoading = false;
         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;
         /** Allows more than one option to be selected. */
         this.multiple = false;
         this.helpText = '';
@@ -184,6 +191,12 @@ let NileSelect = class NileSelect extends NileElement {
         this.autoFocusSearch = false;
         /** loading indicator for virtual select */
         this.loading = false;
+        this.handleWindowResize = () => {
+            this.portalManager.updatePortalAppendPosition();
+        };
+        this.handleWindowScroll = () => {
+            this.portalManager.updatePortalAppendPosition();
+        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -196,6 +209,8 @@ let NileSelect = class NileSelect extends NileElement {
         this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
         this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
         this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+        this.handleWindowResize = this.handleWindowResize.bind(this);
+        this.handleWindowScroll = this.handleWindowScroll.bind(this);
         // Because this is a form control, it shouldn't be opened initially
         this.open = false;
         this.emit('nile-init');
@@ -207,6 +222,8 @@ let NileSelect = class NileSelect extends NileElement {
             clearTimeout(this.scrollTimeout);
             this.scrollTimeout = undefined;
         }
+        // Clean up body append elements
+        this.portalManager.cleanupPortalAppend();
         this.emit('nile-destroy');
     }
     setupResizeObserver() {
@@ -253,11 +270,17 @@ let NileSelect = class NileSelect extends NileElement {
         document.addEventListener('focusin', this.handleDocumentFocusIn);
         document.addEventListener('keydown', this.handleDocumentKeyDown);
         document.addEventListener('mousedown', this.handleDocumentMouseDown);
+        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('resize', this.handleWindowResize);
+        window.removeEventListener('scroll', this.handleWindowScroll, true);
     }
     handleFocus() {
         this.hasFocus = true;
@@ -269,9 +292,13 @@ let NileSelect = class NileSelect extends NileElement {
         this.emit('nile-blur', { value: this.value, name: this.name });
     }
     handleDocumentFocusIn(event) {
-        // Close when focusing out of the select
+        if (!this.open)
+            return;
         const path = event.composedPath();
-        if (this && !path.includes(this)) {
+        const hitSelf = path.includes(this);
+        const hitPopup = this.popup && path.includes(this.popup);
+        const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+        if (!hitSelf && !hitPopup && !hitPortalAppend) {
             this.hide();
         }
     }
@@ -306,6 +333,10 @@ let NileSelect = class NileSelect extends NileElement {
         if (this.enableGroupHeader) {
             this.handleGroupShowSelected();
         }
+        // Update portal content if portal is active
+        if (this.portal && this.open) {
+            this.portalManager.updatePortalOptions();
+        }
         // this.requestUpdate();
     }
     /**
@@ -325,6 +356,10 @@ let NileSelect = class NileSelect extends NileElement {
         this.selectionChanged();
         this.emit('nile-change', { value: this.value, name: this.name });
         this.emit('nile-clear', { value: this.multiple ? this.value : '', name: this.name });
+        // Update portal content if portal is active
+        if (this.portal && this.open) {
+            this.portalManager.updatePortalOptions();
+        }
     }
     handleDocumentKeyDown(event) {
         const target = event.target;
@@ -406,9 +441,13 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     handleDocumentMouseDown(event) {
-        // Close when clicking outside of the select
+        if (!this.open)
+            return;
         const path = event.composedPath();
-        if (this && !path.includes(this)) {
+        const hitSelf = path.includes(this);
+        const hitPopup = this.popup && path.includes(this.popup);
+        const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+        if (!hitSelf && !hitPopup && !hitPortalAppend) {
             this.hide();
         }
     }
@@ -498,6 +537,10 @@ let NileSelect = class NileSelect extends NileElement {
             }
             this.requestUpdate();
         }
+        // Update portal content if portal is active
+        if (this.portal && this.open) {
+            this.portalManager.updatePortalOptions();
+        }
     }
     handleDefaultSlotChange() {
         const allOptions = this.getAllOptions();
@@ -515,6 +558,10 @@ let NileSelect = class NileSelect extends NileElement {
                 .whenDefined('nile-option')
                 .then(() => this.handleDefaultSlotChange());
         }
+        // Update portal content if portal is active
+        if (this.portal && this.open) {
+            this.portalManager.updatePortalOptions();
+        }
     }
     handleTagRemove(event, option) {
         event.stopPropagation();
@@ -614,6 +661,10 @@ let NileSelect = class NileSelect extends NileElement {
         }
         // Update selection, value, and display label
         this.selectionChanged();
+        // Update portal content if portal is active
+        if (this.portal && this.open) {
+            this.portalManager.updatePortalOptions();
+        }
     }
     // Toggles an option's selected state
     toggleOptionSelection(option, force) {
@@ -737,6 +788,10 @@ let NileSelect = class NileSelect extends NileElement {
                 el.hidden = true;
             }
         });
+        // Update portal content if portal is active
+        if (this.portal && this.open) {
+            this.portalManager.updatePortalOptions();
+        }
         return filteredOptions;
     }
     handleInvalid(event) {
@@ -757,6 +812,16 @@ let NileSelect = class NileSelect extends NileElement {
             this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
         }
     }
+    handlePortalAppendChange() {
+        if (this.open) {
+            if (this.portal) {
+                this.portalManager.setupPortalAppend();
+            }
+            else {
+                this.portalManager.cleanupPortalAppend();
+            }
+        }
+    }
     async handleOpenChange() {
         if (this.open && !this.disabled) {
             // Reset the current option
@@ -786,6 +851,9 @@ let NileSelect = class NileSelect extends NileElement {
             }
             this.searchValue = '';
             this.filterOptions(this.searchValue);
+            if (this.portal) {
+                this.portalManager.setupPortalAppend();
+            }
             this.emit('nile-after-show', { value: this.value, name: this.name });
             if (this.autoFocusSearch) {
                 this.handleInputAfterInit();
@@ -803,6 +871,9 @@ let NileSelect = class NileSelect extends NileElement {
             await animateTo(this.popup.popup, keyframes, options);
             this.listbox.hidden = true;
             this.popup.active = false;
+            if (this.portal) {
+                this.portalManager.cleanupPortalAppend();
+            }
             this.searchValue = '';
             this.emit('nile-after-hide', { value: this.value, name: this.name });
         }
@@ -991,10 +1062,10 @@ let NileSelect = class NileSelect 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"
@@ -1161,11 +1232,12 @@ let NileSelect = class NileSelect extends NileElement {
               part="listbox"
               class="select__listbox ${this.searchEnabled
             ? 'select__search-enabled '
-            : ''}"
+            : ''} ${this.portal ? 'select__portal-append-hidden' : ''}"
               tabindex="-1"
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
               @scroll=${this.handleScroll}
+              style=${this.portal ? 'display: none;' : ''}
             >
               ${this.searchEnabled
             ? html ` <div class="select__search">
@@ -1332,6 +1404,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSelect.prototype, "noWidthSync", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSelect.prototype, "portal", void 0);
 __decorate([
     property({
         reflect: true,
@@ -1439,6 +1514,9 @@ __decorate([
 __decorate([
     watch('value', { waitUntilFirstUpdate: true })
 ], NileSelect.prototype, "handleValueChange", null);
+__decorate([
+    watch('portal', { waitUntilFirstUpdate: true })
+], NileSelect.prototype, "handlePortalAppendChange", null);
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
 ], NileSelect.prototype, "handleOpenChange", null);