q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

package/dist/collection/components/q2-select/index.js

@@ -1,13 +1,18 @@
 import { h, } from '@stencil/core';
-import { createGuid, handleAriaLabel, isEventFromElement, isRelatedTargetWithinHost, loc, overrideFocus, resizeIframe, setPopProperties, } from 'src/utils';
+import { handleAriaLabel, isEventFromElement, isHostLosingFocus, isRelatedTargetWithinHost, loc, overrideFocus, } from '../../utils';
+import { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';
 export class Q2Select {
   constructor() {
+    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"]');
@@ -17,201 +22,62 @@ export class Q2Select {
       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();
     };
@@ -221,10 +87,9 @@ export class Q2Select {
       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;
@@ -241,32 +106,18 @@ export class Q2Select {
     };
     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;
@@ -282,18 +133,22 @@ export class Q2Select {
     this.searchable = false;
     this.multilineOptions = false;
     this.optional = false;
-    this.dropdownOpen = false;
-    this.onlyShowingSelected = false;
-    this.activeOptionId = undefined;
+    this.placeholder = 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);
@@ -315,22 +170,17 @@ export class Q2Select {
     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';
@@ -347,10 +197,8 @@ export class Q2Select {
     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;
@@ -359,14 +207,9 @@ export class Q2Select {
   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)
@@ -376,33 +219,39 @@ export class Q2Select {
     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();
+    this.clearSearchText();
   }
-  selectedOptionsUpdated() {
-    if (!this.multiple)
-      return;
-    this.updateMultipleOptionAttrs();
-  }
-  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');
       }
     });
   }
@@ -411,15 +260,17 @@ export class Q2Select {
     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) {
@@ -461,54 +312,33 @@ export class Q2Select {
     }
   }
   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;
@@ -527,130 +357,36 @@ export class Q2Select {
     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)
-      return;
-    this.activeIndex = undefined;
-    this.setActiveOption();
-    this.dropdownOpen = true;
-    this.scheduledAfterRender.push(resizeIframe);
-  }
-  openDropdownWithActiveElement(activeIndex) {
-    if (this.readonly)
+    if (this.readonly || this.disabled)
       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 = '';
@@ -665,7 +401,7 @@ export class Q2Select {
   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)
@@ -694,6 +430,9 @@ export class Q2Select {
       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();
@@ -708,15 +447,16 @@ export class Q2Select {
         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, 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]))));
   }
   static get is() { return "q2-select"; }
   static get encapsulation() { return "shadow"; }
@@ -801,11 +541,11 @@ export class Q2Select {
         "reflect": true
       },
       "selectedOptions": {
-        "type": "any",
+        "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string[]",
+          "resolved": "string[]",
           "references": {}
         },
         "required": false,
@@ -814,8 +554,6 @@ export class Q2Select {
           "tags": [],
           "text": ""
         },
-        "attribute": "selected-options",
-        "reflect": false,
         "defaultValue": "[]"
       },
       "disabled": {
@@ -992,19 +730,54 @@ export class Q2Select {
         "attribute": "optional",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": true
+      },
+      "hoist": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hoist",
+        "reflect": false,
+        "defaultValue": "!!window.Tecton?.useActionSheets"
       }
     };
   }
   static get states() {
     return {
-      "dropdownOpen": {},
-      "onlyShowingSelected": {},
-      "activeOptionId": {},
+      "open": {},
+      "showSelected": {},
       "searchText": {},
       "hasCustomDisplay": {},
       "inputFocused": {},
       "statusMessage": {},
-      "prioritizeSearch": {}
+      "prioritizeSearch": {},
+      "structuredSelectedOptions": {}
     };
   }
   static get events() {
@@ -1019,8 +792,8 @@ export class Q2Select {
           "text": ""
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{ value: string; selectedOptions: string[] }",
+          "resolved": "{ value: string; selectedOptions: string[]; }",
           "references": {}
         }
       }, {
@@ -1043,20 +816,23 @@ export class Q2Select {
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{
+        "propName": "value",
+        "methodName": "buildStructuredSelectedOptions"
+      }, {
+        "propName": "selectedOptions",
+        "methodName": "buildStructuredSelectedOptions"
+      }, {
         "propName": "ariaLabel",
         "methodName": "ariaLabelObserver"
       }, {
         "propName": "value",
         "methodName": "valueUpdated"
-      }, {
-        "propName": "selectedOptions",
-        "methodName": "selectedOptionsUpdated"
       }, {
         "propName": "multilineOptions",
-        "methodName": "multilineOptionsChanged"
+        "methodName": "handleMultilineOptionsUpdate"
       }, {
-        "propName": "dropdownOpen",
-        "methodName": "dropdownOpenChanged"
+        "propName": "open",
+        "methodName": "openChanged"
       }];
   }
   static get listeners() {
@@ -1090,12 +866,6 @@ export class Q2Select {
         "target": undefined,
         "capture": false,
         "passive": false
-      }, {
-        "name": "click",
-        "method": "clickHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
       }];
   }
 }