q2-tecton-elements 1.23.0 → 1.24.0

package/dist/esm/q2-select.entry.js

@@ -1,19 +1,24 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bb1c8c7f.js';
-import { c as createGuid, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, l as loc, b as isRelatedTargetWithinHost, i as isEventFromElement, r as resizeIframe } from './index-501fd22e.js';
+import { h as handleAriaLabel, o as overrideFocus, l as loc, b as isRelatedTargetWithinHost, i as isEventFromElement, d as isHostLosingFocus } from './index-ca21e539.js';
+import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-a9597b32.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, 100px))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white)}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1x, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2x, 10px))}.q2-element-dropdown.dropup{bottom:var(--comp-dropup-offset)}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:inline-grid;grid-template-columns:repeat(3, auto);gap:var(--app-scale-2x, 10px);align-items:center}.q2-element-dropdown.dropup{bottom:var(--comp-dropup-offset)}";
 
 const Q2Select = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
     this.input = createEvent(this, "input", 7);
+    var _a;
     this.scheduledAfterRender = [];
-    this.keyStore = {
-      queue: [],
-      lastPressedAt: new Date(),
+    this.showSelectedOptions = (event) => {
+      event.stopPropagation();
+      this.showSelected = true;
+    };
+    this.showAllOptions = (event) => {
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
+      this.showSelected = false;
     };
-    this.guid = createGuid();
     this.onMutationObserved = () => {
       const slotContainer = this.hostElement.querySelector('.custom-display-content');
       const displaySlot = this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');
@@ -23,201 +28,62 @@ const Q2Select = class {
       if (this.hasCustomDisplay !== hasCustomDisplay) {
         this.hasCustomDisplay = hasCustomDisplay;
       }
-      if (this.multiple) {
-        this.updateMultipleOptionAttrs();
-        return;
-      }
-      this.updateSingleOptionAttrs();
-      const activeOption = this.optionElements[this.activeIndex];
-      if (!activeOption || activeOption.id !== this.activeOptionId) {
-        this.activeIndex = this.getDefaultActiveIndex();
-        this.setActiveOption();
-      }
     };
-    this.searchAndFocus = keyValue => {
-      // pseudo search in non-searchable select
-      const reorder = () => {
-        this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;
-        const list = this.optionElements.map((element, index) => ({ element, index }));
-        return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];
-      };
-      const buildQueue = () => {
-        const now = new Date();
-        if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {
-          // empty stored keys if delay > 1s
-          this.keyStore.queue = [];
-        }
-        if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {
-          this.keyStore.queue.push(keyValue);
-        }
-        this.keyStore.lastPressedAt = now;
-      };
-      const searchIndex = list => {
-        return list.find(v => {
-          return (!v.element.disabled &&
-            v.element.display &&
-            v.element.display.replace(/\s/g, '').match(new RegExp(`^${this.keyStore.queue.join('')}`, 'i')));
-        });
-      };
-      const setFocus = ({ element, index }) => {
-        if (this.dropdownOpen || this.multiple) {
-          // multiple: should open to make sure that which options are selected
-          this.openDropdownWithActiveElement(index);
-        }
-        else {
-          this.activeIndex = index;
-          this.change.emit({ value: element.value });
-        }
-      };
-      buildQueue();
-      const matched = searchIndex(reorder());
-      if (matched) {
-        setFocus(matched);
-      }
+    this.onOptionListChange = (event) => {
+      event.stopPropagation();
+      const { values } = event.detail;
+      if (values.length === 0)
+        this.showAllOptions();
+      this.handleSelectionChanges(event.detail);
     };
     /// Event handlers ///
-    this.dropdownFocusoutHandler = (event) => {
-      const { relatedTarget } = event;
-      const isInDropdown = this.dropdownContainer.contains(relatedTarget);
-      const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);
-      if (isInDropdown || isInLightDom)
+    this.popoverStateChanged = ({ detail: { open } }) => {
+      if (this.open === open)
         return;
-      if (!this.dropdownOpen)
+      this.open = open;
+      if (open && !this.searchText)
         return;
-      this.closeDropdown();
+      this.optionList.setActiveElement(null);
+      this.inputField.focus();
     };
-    /* tslint:disable:cyclomatic-complexity */
-    this.dropdownKeydownHandler = (event) => {
-      event.stopPropagation();
-      const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
-      const { key, shiftKey } = event;
-      if (this.readonly ||
-        (multiSelectHeader && multiSelectHeader.contains(event.target) && [' ', 'Enter'].includes(key)))
+    this.inputKeydownHandler = (event) => {
+      if (this.readonly || this.disabled)
         return;
-      switch (key) {
-        case ' ':
-        case 'Enter':
-          event.preventDefault();
-          const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
-          if (!newOption || newOption.disabled)
-            break;
-          this.selectOption(newOption, true);
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          const isFirstOption = activeIndex === 0;
-          if (isFirstOption)
-            break;
-          if (activeIndex !== undefined) {
-            const nextIndex = this.getNextVisibleIndex(-1);
-            if (nextIndex === -1)
-              break;
-            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-          }
-          else {
-            this.setDefaultActiveElement();
-          }
-          break;
-        case 'ArrowDown':
-          event.preventDefault();
-          const isLastOption = activeIndex === optionElements.length - 1;
-          if (isLastOption)
-            break;
-          if (activeIndex !== undefined) {
-            const nextIndex = this.getNextVisibleIndex(1);
-            if (nextIndex === -1)
-              break;
-            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-          }
-          else {
-            this.setDefaultActiveElement();
-          }
-          break;
-        case 'Home':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(0);
-          break;
-        case 'End':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(optionElements.length - 1);
-          break;
-        case 'PageUp':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));
-          break;
-        case 'PageDown':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(Math.min(activeIndex + 10, optionElements.length - 1));
-          break;
-        case 'Tab':
-          if (shiftKey)
-            break;
-          const myOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
-          if (!myOption || myOption.disabled)
-            return;
-          if (myOption.selected)
-            return;
-          this.selectOption(myOption);
-          break;
-        case 'Esc':
-        case 'Escape':
-          this.closeDropdown();
-          this.focusInput();
-          break;
-        default:
-          if (searchable)
-            break;
-          if (!key.match(/^[A-Za-z0-9]$/))
-            break;
-          // search in non-searchable select: alpha-numeric only
-          this.searchAndFocus(key);
-          break;
+      const keysForOptionListToHandle = [
+        'ArrowDown',
+        'ArrowUp',
+        'PageDown',
+        'PageUp',
+        'Home',
+        'End',
+        'Escape',
+        'Tab',
+      ];
+      if (shouldShowActionSheet(this, event)) {
+        return this.executeActionSheet(event);
       }
+      if (this.searchable && !keysForOptionListToHandle.includes(event.key))
+        return;
+      if (this.shouldClearSearchText(event))
+        this.clearSearchText();
+      this.optionList.handleExternalKeydown(event);
     };
-    /* tslint:enable:cyclomatic-complexity */
-    this.inputKeydownHandler = (event) => {
-      event.stopPropagation();
-      const { key } = event;
-      const { optionElements, searchable } = this;
-      switch (key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(this.getLastEnabledIndex());
-          this.setFocusedOption();
-          break;
-        case 'Home':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(0);
-          break;
-        case 'End':
-          event.preventDefault();
-          this.openDropdownWithActiveElement(optionElements.length - 1);
-          break;
-        case 'Escape':
-        case 'Esc':
-          this.closeDropdown();
-          break;
-        case 'Tab':
-          this.closeDropdown();
-          break;
-        default:
-          if (!key.match(/^[A-Za-z0-9]$/))
-            break;
-          if (searchable) {
-            this.openDropdownWithoutActiveElement();
-            break;
-          }
-          // search in non-searchable select: alpha-numeric only
-          this.searchAndFocus(key);
+    this.visibilityToggleKeyDown = (event) => {
+      const keysForOptionListToHandle = ['ArrowDown', 'ArrowUp'];
+      const keysThatTriggerClick = ['Enter', ' '];
+      const key = event.key;
+      if (keysForOptionListToHandle.includes(key)) {
+        this.optionList.handleExternalKeydown(event);
+      }
+      else if (keysThatTriggerClick.includes(key)) {
+        event.target.dispatchEvent(new MouseEvent('click'));
       }
     };
-    this.inputClickHandler = (event) => {
+    this.inputClickHandler = async (event) => {
       event.stopPropagation();
-      setPopProperties(this);
+      if (shouldShowActionSheet(this)) {
+        return this.executeActionSheet(event);
+      }
       this.toggleDropdown();
       this.focusInput();
     };
@@ -227,10 +93,9 @@ const Q2Select = class {
       const eventValue = event.detail.value;
       const didChangeText = inputValue !== eventValue;
       const shouldClearValue = !!this.value && didChangeText;
-      if (shouldClearValue) {
-        this.selectOption(null);
-      }
-      if (!this.dropdownOpen)
+      if (shouldClearValue)
+        this.clearValue();
+      if (!this.open)
         this.openDropdownWithoutActiveElement();
       this.prioritizeSearch = true;
       this.searchText = eventValue;
@@ -247,32 +112,18 @@ const Q2Select = class {
     };
     this.clickedElsewhere = (event) => {
       const target = event.target;
-      if (target.localName === 'click-elsewhere') {
-        event.stopPropagation();
-        if (this.dropdownOpen) {
-          this.closeDropdown();
-        }
-      }
+      if (target.localName !== 'click-elsewhere')
+        return;
+      event.stopPropagation();
+      if (!this.open)
+        return;
+      this.closeDropdown();
     };
     this.onCustomDisplayClick = (event) => {
       event.stopPropagation();
       this.focusInput();
       this.toggleDropdown();
     };
-    this.showSelectedOptions = (event) => {
-      event.stopImmediatePropagation();
-      this.onlyShowingSelected = true;
-      this.optionElements.forEach(optionElement => {
-        optionElement._multiSelectHidden = !optionElement.selected;
-      });
-    };
-    this.showAllOptions = (event) => {
-      event.stopPropagation();
-      this.onlyShowingSelected = false;
-      this.optionElements.forEach(optionElement => {
-        optionElement._multiSelectHidden = false;
-      });
-    };
     this.label = undefined;
     this.hideLabel = undefined;
     this.value = undefined;
@@ -289,18 +140,21 @@ const Q2Select = class {
     this.multilineOptions = false;
     this.optional = false;
     this.placeholder = undefined;
-    this.dropdownOpen = false;
-    this.onlyShowingSelected = false;
-    this.activeOptionId = undefined;
+    this.hoist = !!((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets);
+    this.open = false;
+    this.showSelected = false;
     this.searchText = '';
     this.hasCustomDisplay = false;
     this.inputFocused = false;
     this.statusMessage = undefined;
     this.prioritizeSearch = false;
+    this.structuredSelectedOptions = [];
   }
   /// Lifecycle Hooks ///
   componentWillLoad() {
     handleAriaLabel(this);
+    this.buildStructuredSelectedOptions();
+    this.handleMultilineOptionsUpdate(this.multilineOptions, false);
   }
   componentDidLoad() {
     const observer = new MutationObserver(this.onMutationObserved);
@@ -322,22 +176,17 @@ const Q2Select = class {
     this.mutationObserver = null;
   }
   /// Getters ///
-  get isComponentFocused() {
-    return document.activeElement === this.hostElement || !!this.hostElement.querySelector(':focus');
-  }
-  get isSearchMode() {
-    return (this.searchable && this.inputFocused) || this.searchText;
-  }
   get badgeValue() {
+    var _a, _b;
     if (!this.multiple)
-      return;
-    const optionsLength = this.selectedOptions.length;
-    if (this.dropdownOpen && this.searchable)
-      return optionsLength || null;
+      return null;
+    const optionsLength = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    if (this.open && this.searchable)
+      return optionsLength ? `${optionsLength}` : null;
     else
       return optionsLength > 1 ? `+${optionsLength - 1}` : null;
   }
-  get minPopHeight() {
+  get popoverMinHeight() {
     const { minRows } = this;
     const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
     const minHeight = firstOption ? window.getComputedStyle(firstOption).minHeight : '44px';
@@ -354,10 +203,8 @@ const Q2Select = class {
     return this.hostElement.querySelector('[slot="_selected-display"]');
   }
   get firstSelectedValue() {
-    var _a, _b;
-    if (this.multiple)
-      return (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
-    return this.value;
+    var _a;
+    return this.multiple ? (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a[0] : this.value;
   }
   get firstSelectedOptionElement() {
     const { firstSelectedValue } = this;
@@ -366,14 +213,9 @@ const Q2Select = class {
   get optionElements() {
     return Array.from(this.hostElement.querySelectorAll('q2-option'));
   }
-  get visibleOptionElements() {
-    return Array.from(this.hostElement.querySelectorAll('q2-option:not([_multiselecthidden])'));
-  }
   get wrapperClasses() {
     const { errors } = this;
     const classes = ['q2-select-container'];
-    if (this.dropdownOpen)
-      classes.push('dropdown-open');
     if (Array.isArray(errors) && errors.length > 0)
       classes.push('has-error');
     if (this.inputFocused)
@@ -383,33 +225,39 @@ const Q2Select = class {
     return classes.join(' ');
   }
   /// Watchers ///
+  buildStructuredSelectedOptions() {
+    const { multiple, selectedOptions, value } = this;
+    if (multiple) {
+      this.structuredSelectedOptions = !!(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length)
+        ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))
+        : [];
+    }
+    else {
+      this.structuredSelectedOptions = value ? [{ value }] : [];
+    }
+  }
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
   valueUpdated() {
     if (this.multiple)
       return;
-    this.updateSingleOptionAttrs();
-  }
-  selectedOptionsUpdated() {
-    if (!this.multiple)
-      return;
-    this.updateMultipleOptionAttrs();
+    this.clearSearchText();
   }
-  multilineOptionsChanged(newValue, oldValue) {
+  handleMultilineOptionsUpdate(newValue, oldValue) {
     if (newValue === oldValue)
       return;
     this.optionElements.forEach(element => (element.multiline = newValue));
   }
-  dropdownOpenChanged(isOpen) {
+  openChanged(isOpen) {
     this.scheduledAfterRender.push(() => {
-      const { multiple, multiSelectHeader, dropdownContainer } = this;
+      const { multiple, multiSelectHeader, popoverElement } = this;
       const height = (isOpen && multiple && (multiSelectHeader === null || multiSelectHeader === void 0 ? void 0 : multiSelectHeader.offsetHeight)) || 0;
       if (height) {
-        dropdownContainer.style.setProperty('--comp-multi-select-header-height', `${height}px`);
+        popoverElement.style.setProperty('--comp-multi-select-header-height', `${height}px`);
       }
       else {
-        dropdownContainer.style.removeProperty('--comp-multi-select-header-height');
+        popoverElement.style.removeProperty('--comp-multi-select-header-height');
       }
     });
   }
@@ -418,15 +266,17 @@ const Q2Select = class {
     this.inputKeydownHandler(event);
   }
   onHostElementChange(event) {
-    if (this.readonly)
+    if (this.readonly || this.disabled)
       return;
     if (event.target !== this.hostElement || this.hostElement.onchange)
       return;
     if (this.multiple) {
+      this.value = null;
       this.selectedOptions = event.detail.selectedOptions;
     }
     else {
       this.value = event.detail.value;
+      this.selectedOptions = [];
     }
   }
   onHostElementInput(event) {
@@ -468,54 +318,33 @@ const Q2Select = class {
     }
   }
   handleFocusout(event) {
-    this.prioritizeSearch = !isRelatedTargetWithinHost(event, this.hostElement) && this.searchable;
-  }
-  clickHandler(event) {
-    const selectedOption = event.target.closest('q2-option');
-    if (!selectedOption ||
-      (selectedOption.hasAttribute('disabled') && selectedOption.getAttribute('disabled') !== 'false'))
-      return;
-    this.selectOption(selectedOption, true);
+    const isLeavingHost = isHostLosingFocus(event, this.hostElement);
+    if (isLeavingHost)
+      this.closeDropdown();
+    this.prioritizeSearch = !isLeavingHost && this.searchable;
   }
   /// Helpers ///
-  getDefaultActiveIndex() {
-    const firstSelected = this.optionElements.findIndex(element => element.selected && !element.hidden);
-    if (firstSelected > -1)
-      return firstSelected;
-    const firstEnabled = this.optionElements.findIndex(element => !element.hidden);
-    if (firstEnabled > -1)
-      return firstEnabled;
-    else
-      return 0;
-  }
-  getLastEnabledIndex() {
-    const enabledIndexes = this.optionElements.reduce((acc, element, index) => {
-      if (!element.hidden && !element.disabled)
-        acc.push(index);
-      return acc;
-    }, []);
-    return enabledIndexes[enabledIndexes.length - 1];
-  }
-  setActiveOption() {
-    if (!this.dropdownOpen)
-      return;
-    const activeIndex = this.activeIndex;
-    this.optionElements.forEach((element, elementIndex) => {
-      if (activeIndex === elementIndex) {
-        element.active = true;
-        this.activeOptionId = element.optionId;
-      }
-      else {
-        element.active = false;
-      }
+  async executeActionSheet(event) {
+    const result = await showActionSheetList(this, event);
+    this.handleSelectionChanges(result);
+  }
+  handleSelectionChanges(changeDetails) {
+    const { value = '', values = [] } = changeDetails;
+    const selectedOptionValues = values.map(value => value.value);
+    const { multiple } = this;
+    if (!this.hostElement.onchange) {
+      this.selectedOptions = selectedOptionValues;
+    }
+    this.change.emit({
+      value: multiple ? undefined : value,
+      selectedOptions: multiple ? selectedOptionValues : undefined,
     });
   }
-  setFocusedOption() {
-    const option = this.optionElements[this.activeIndex];
-    if (!option)
-      return;
-    option.dispatchEvent(new FocusEvent('focus'));
-    option.focus();
+  clearValue() {
+    const { multiple } = this;
+    this.value = '';
+    this.selectedOptions = [];
+    this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });
   }
   calculateMultiSelectSelectedDisplay() {
     var _a;
@@ -534,130 +363,36 @@ const Q2Select = class {
     const { firstSelectedOptionElement } = this;
     return ((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) || this.value || '';
   }
-  updateSingleOptionAttrs() {
-    const { value, guid, multilineOptions } = this;
-    this.optionElements.forEach((element, index) => {
-      element.selected = element.value === value;
-      element.optionId = `q2-select-${guid}-option-${index}`;
-      element.multiline = multilineOptions;
-    });
-  }
-  updateMultipleOptionAttrs() {
-    if (this.selectedOptions.length === 0) {
-      this.onlyShowingSelected = false;
-    }
-    const { selectedOptions, onlyShowingSelected, guid, multilineOptions } = this;
-    this.optionElements.forEach((element, index) => {
-      element.selected = selectedOptions.includes(element.value);
-      element._multiSelectHidden = onlyShowingSelected ? !element.selected : false;
-      element.optionId = `q2-select-${guid}-option-${index}`;
-      element.multiline = multilineOptions;
-    });
-  }
-  focusSelectedSibling(option) {
-    if (!this.onlyShowingSelected)
-      return;
-    const { visibleOptionElements } = this;
-    if (visibleOptionElements.length < 2)
-      return;
-    const optionIndex = visibleOptionElements.indexOf(option);
-    const visibleFocusIndex = optionIndex ? optionIndex - 1 : optionIndex + 1;
-    const optionToFocus = visibleOptionElements[visibleFocusIndex];
-    const focusIndex = this.optionElements.indexOf(optionToFocus);
-    this.activeIndex = focusIndex;
-    this.setFocusedOption();
-  }
-  selectOption(option, focusInputOnClose = false) {
-    var _a;
-    const value = (_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : '';
-    if (this.multiple) {
-      const isSelected = this.selectedOptions.includes(value);
-      if (isSelected) {
-        this.focusSelectedSibling(option);
-        this.change.emit({
-          selectedOptions: this.selectedOptions.filter(selectedValue => selectedValue !== value),
-        });
-      }
-      else if (value) {
-        this.change.emit({ selectedOptions: [...this.selectedOptions, value] });
-      }
-    }
-    else {
-      this.change.emit({ value });
-      this.closeDropdown();
-      if (focusInputOnClose)
-        this.focusInput();
-    }
-  }
-  scrollToActiveOption() {
-    const activeOption = this.optionElements[this.activeIndex];
-    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
-  }
   openDropdownWithoutActiveElement() {
-    if (this.readonly)
+    if (this.readonly || this.disabled)
       return;
-    this.activeIndex = undefined;
-    this.setActiveOption();
-    this.dropdownOpen = true;
-    this.scheduledAfterRender.push(resizeIframe);
-  }
-  openDropdownWithActiveElement(activeIndex) {
-    if (this.readonly)
-      return;
-    this.activeIndex = activeIndex;
-    this.dropdownOpen = true;
-    this.setActiveOption();
-    this.scheduledAfterRender.push(() => {
-      this.setFocusedOption();
-      this.scrollToActiveOption();
-      resizeIframe();
-    });
+    this.optionList.setActiveElement(null);
+    this.open = true;
   }
   closeDropdown() {
-    this.dropdownOpen = false;
-    if (this.searchText) {
-      this.searchText = '';
-      this.input.emit({ query: '' });
-    }
-    this.scheduledAfterRender.push(resizeIframe);
+    this.open = false;
+    this.clearSearchText();
+  }
+  clearSearchText() {
+    if (!this.searchText)
+      return;
+    this.searchText = '';
+    this.input.emit({ query: '' });
   }
   toggleDropdown() {
-    if (this.disabled)
+    if (this.readonly || this.disabled)
       return;
-    if (this.dropdownOpen && !this.searchText) {
+    if (this.open && !this.searchText) {
       this.closeDropdown();
     }
     else {
       this.openDropdownWithoutActiveElement();
     }
   }
-  adjustActiveOptionAndScroll(numToAdd) {
-    this.activeIndex += numToAdd;
-    this.setActiveOption();
-    this.setFocusedOption();
-    this.scrollToActiveOption();
-  }
-  setDefaultActiveElement() {
-    this.activeIndex = this.getDefaultActiveIndex();
-    this.setActiveOption();
-    this.setFocusedOption();
-  }
   focusInput() {
     var _a;
     (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
   }
-  getNextVisibleIndex(direction) {
-    let index = this.activeIndex + direction;
-    const { optionElements } = this;
-    while (index >= 0 && index <= optionElements.length - 1) {
-      const { display, visibility } = window.getComputedStyle(optionElements[index]);
-      if (display !== 'none' && visibility !== 'hidden') {
-        return index;
-      }
-      index = index + direction;
-    }
-    return -1;
-  }
   setStatusMessage(message) {
     clearTimeout(this.statusMessageTimer);
     this.statusMessage = '';
@@ -672,7 +407,7 @@ const Q2Select = class {
   checkSelectedDisplay() {
     let namedSlot = this.selectedDisplaySlot;
     const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } = this;
-    const hasNoValue = !value && multiple && !selectedOptions.length;
+    const hasNoValue = !value && multiple && !(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length);
     if (prioritizeSearch || !multilineOptions || hasNoValue)
       return this.clearSelectedDisplay();
     if (!firstSelectedOptionElement || firstSelectedOptionElement.display)
@@ -701,6 +436,9 @@ const Q2Select = class {
       return;
     selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');
   }
+  shouldClearSearchText(event) {
+    return this.searchable && !!this.searchText && event.key === 'Escape';
+  }
   /// DOM ///
   renderCustomDisplay() {
     const hasSelectedDisplay = this.checkSelectedDisplay();
@@ -715,23 +453,24 @@ const Q2Select = class {
         this.errors.length > 0 &&
         this.errors.map(error => loc(error))) ||
         (this.invalid && ['tecton.element.select.invalid']) ||
-        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${!!this.dropdownOpen}`, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.isComponentFocused ? 'primary' : undefined }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
+        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${!!this.open}`, ariaOwns: "option-list", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
   }
   optionsDropdown() {
-    const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';
-    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el), onKeyDown: this.dropdownKeydownHandler, onFocusout: this.dropdownFocusoutHandler }, this.multiple ? this.visibilityToggle() : '', h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" }, h("slot", null))));
+    return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.inputField, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, onPopoverStateChanged: this.popoverStateChanged, block: true }, this.multiple ? this.visibilityToggle() : '', h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", "show-selected": this.showSelected, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null))));
   }
   visibilityToggle() {
-    const selectedOptionsCount = this.selectedOptions.length;
-    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, loc('tecton.element.select.multiHeader.showing'), h("q2-btn", { class: `show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')), h("q2-btn", { class: `show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))));
+    var _a, _b;
+    const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    const { showSelected } = this;
+    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, h("span", null, loc('tecton.element.select.multiHeader.showing')), h("q2-btn", { class: showSelected ? '' : 'selected', badge: true, "aria-selected": !showSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')), h("q2-btn", { class: showSelected ? 'selected' : '', "aria-selected": showSelected || undefined, disabled: selectedOptionsCount === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {
+    "value": ["buildStructuredSelectedOptions", "valueUpdated"],
+    "selectedOptions": ["buildStructuredSelectedOptions"],
     "ariaLabel": ["ariaLabelObserver"],
-    "value": ["valueUpdated"],
-    "selectedOptions": ["selectedOptionsUpdated"],
-    "multilineOptions": ["multilineOptionsChanged"],
-    "dropdownOpen": ["dropdownOpenChanged"]
+    "multilineOptions": ["handleMultilineOptionsUpdate"],
+    "open": ["openChanged"]
   }; }
 };
 Q2Select.style = stylesCss;