@ukic/web-components 2.1.0-beta.9 → 2.2.0

package/dist/collection/components/ic-select/ic-select.js

@@ -1,37 +1,45 @@
 import { Host, h, } from "@stencil/core";
-import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, addFormResetListener, removeFormResetListener, } from "../../utils/helpers";
+import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, addFormResetListener, removeFormResetListener, removeDisabledFalse, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcInformationStatus, IcThemeForegroundEnum, } from "../../utils/types";
 import Expand from "./assets/Expand.svg";
 import Clear from "./assets/Clear.svg";
 let inputIds = 0;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class Select {
   constructor() {
+    this.hasSetDefaultValue = false;
+    this.inheritedAttributes = {};
+    this.initialOptionsEmpty = false;
     this.inputId = `ic-select-input-${inputIds++}`;
     this.menuId = `${this.inputId}-menu`;
-    this.inheritedAttributes = {};
-    this.hasSetSearchableDefaultValue = false;
-    this.initialRender = false;
+    this.searchableMenuItemSelected = false;
+    this.ungroupedOptions = [];
+    this.handleRetry = (ev) => {
+      var _a;
+      if (ev.detail.keyPressed)
+        (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
+      this.blurredBecauseButtonPressed = true;
+      this.retryButtonClick = true;
+      this.hasSetDefaultValue = true;
+      this.icRetryLoad.emit({ value: this.hiddenInputValue });
+    };
     this.emitIcChange = (value) => {
+      if (!this.searchable) {
+        this.value = value;
+      }
       clearTimeout(this.debounceIcChange);
       this.debounceIcChange = window.setTimeout(() => {
         this.icChange.emit({ value: value });
       }, this.currDebounce);
     };
     this.emitImmediateIcChange = (value) => {
+      this.value = value;
       clearTimeout(this.debounceIcChange);
       this.icChange.emit({ value: value });
     };
-    this.isMenuEnabled = () => {
-      return (((this.searchableSelectInputValue === null ||
-        this.searchableSelectInputValue === "") &&
-        this.charactersUntilSuggestions === 0) ||
-        (this.searchableSelectInputValue &&
-          this.searchableSelectInputValue.length >=
-            this.charactersUntilSuggestions));
-    };
     this.setOptionsValuesFromLabels = () => {
-      if (this.options.length > 0) {
+      if (this.options.length > 0 && this.options.map) {
         this.options.map((option) => {
           if (!option.value) {
             option.value = option.label;
@@ -39,6 +47,9 @@ export class Select {
         });
       }
     };
+    this.setUngroupedOptions = (event) => {
+      this.ungroupedOptions = event.detail.options;
+    };
     this.setTextColor = () => {
       if (this.nativeSelectElement.selectedIndex === 0) {
         this.nativeSelectElement.className = "placeholder";
@@ -55,14 +66,14 @@ export class Select {
     this.getLabelFromValue = (value) => {
       return getLabelFromValue(value, this.options);
     };
-    this.getValueFromLabel = (label) => {
-      var _a;
-      const value = (_a = this.options.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value;
-      return value;
-    };
     this.getFilteredChildMenuOptions = (option) => {
       let children = option.children;
-      children = getFilteredMenuOptions(option.children, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
+      if (this.searchable) {
+        children = getFilteredMenuOptions(option.children, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
+      }
+      else {
+        children = getFilteredMenuOptions(option.children, false, this.pressedCharacters, "start");
+      }
       const newOption = Object.assign({}, option);
       newOption.children = children;
       return newOption;
@@ -78,21 +89,32 @@ export class Select {
         return;
       }
       if (this.searchable) {
-        this.searchableSelectInputValue = this.getLabelFromValue(event.detail.value);
+        this.value = event.detail.value;
+        this.searchableMenuItemSelected = true;
+        // After editing the input, if selecting the same option as before, set the input value to label again
+        if (this.value === this.currValue) {
+          this.searchableSelectInputValue = this.getLabelFromValue(this.value);
+        }
+        this.inputValueToFilter = null;
+        this.hiddenInputValue = this.getValueFromLabel(this.searchableSelectInputValue);
       }
       this.ariaActiveDescendant = event.detail.optionId;
       this.icOptionSelect.emit({ value: event.detail.value });
-      this.emitImmediateIcChange(event.detail.value);
+      this.emitIcChange(event.detail.value);
     };
     this.handleMenuChange = (event) => {
       this.open = event.detail.open;
+      this.pressedCharacters = "";
       this.searchable && this.handleFocusIndicatorDisplay();
     };
     // clears the debounce delay when navigating the menu with arrow keys etc
     // to prevent delay in change event, which should only occur when typing in input
     this.handleMenuKeyPress = (ev) => {
-      const debounce = ev.detail.isNavKey ? 0 : this.debounce;
-      this.debounceChangedHandler(debounce);
+      ev.cancelBubble = true;
+      this.handleCharacterKeyDown(ev.detail.key);
+    };
+    this.handleMenuValueChange = (ev) => {
+      this.value = ev.detail.value;
     };
     this.handleFocusIndicatorDisplay = () => {
       const focusIndicator = this.host.shadowRoot.querySelector(".focus-indicator");
@@ -110,14 +132,18 @@ export class Select {
     };
     this.isExternalFiltering = () => this.searchable && this.disableFilter;
     this.handleClick = (event) => {
-      if (this.isExternalFiltering()) {
-        this.menu.options = this.filteredOptions;
-      }
-      else {
-        this.noOptions = null;
-        this.menu.options = this.options;
+      if (!this.open) {
+        if (this.isExternalFiltering()) {
+          this.menu.options = this.filteredOptions;
+        }
+        else if (!this.hasTimedOut &&
+          !this.loading &&
+          (!this.searchable || this.searchableMenuItemSelected)) {
+          this.noOptions = null;
+          this.menu.options = this.options;
+        }
       }
-      if (event.detail !== 0 && this.isMenuEnabled()) {
+      if (event.detail !== 0) {
         this.menu.handleClickOpen();
       }
     };
@@ -130,112 +156,179 @@ export class Select {
     };
     this.handleClear = (event) => {
       event.stopPropagation();
+      this.hasTimedOut = false;
+      clearTimeout(this.timeoutTimer);
       this.noOptions = null;
       this.emitImmediateIcChange(null);
       this.icClear.emit();
       if (this.searchable) {
         this.searchableSelectElement.value = null;
         this.searchableSelectInputValue = null;
-        this.menu.options = this.options;
+        this.filteredOptions = this.options;
+        this.hiddenInputValue = null;
         this.searchableSelectElement.focus();
-        if (!this.isMenuEnabled()) {
-          this.setMenuChange(false);
-        }
       }
       else {
         this.customSelectElement.focus();
       }
     };
+    this.handleCharacterKeyDown = (key) => {
+      // Only close menu when space is pressed if not being used alongside character keys to quickly select options
+      if (this.open &&
+        key === " " &&
+        this.pressedCharacters.length === 0 &&
+        !this.hasTimedOut &&
+        !this.loading) {
+        this.setMenuChange(false);
+      }
+      if (key.length === 1 && !this.searchable) {
+        window.clearTimeout(this.characterKeyPressTimer);
+        this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
+        this.pressedCharacters += key;
+        this.handleFilter();
+        if (!this.noOptions) {
+          this.emitImmediateIcChange(this.filteredOptions[0].value);
+        }
+      }
+      else {
+        this.pressedCharacters = "";
+      }
+    };
+    this.handleNativeSelectKeyDown = (event) => {
+      if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
+        event.cancelBubble = true;
+      }
+      this.handleCharacterKeyDown(event.key);
+    };
     this.handleKeyDown = (event) => {
-      event.cancelBubble = true;
+      if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
+        event.cancelBubble = true;
+      }
       const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
       if (!this.open) {
         if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
           this.menu.options = this.filteredOptions;
         }
         else {
-          this.noOptions = null;
-          this.menu.options = this.options;
+          if (!this.hasTimedOut) {
+            this.noOptions = null;
+            this.menu.options = this.options;
+          }
         }
       }
       if (this.open && event.key === "Enter") {
         this.setMenuChange(false);
       }
       else {
-        if (!(isArrowKey && this.noOptions !== null) && this.isMenuEnabled()) {
-          if (this.isExternalFiltering() && isArrowKey && this.debounce > 0) {
-            this.debounceChangedHandler(0);
+        if (!(isArrowKey && this.noOptions !== null)) {
+          if (!(event.key === " " && this.pressedCharacters.length > 0)) {
+            // Keyboard events get passed onto ic-menu
+            this.menu.handleKeyboardOpen(event);
           }
-          this.menu.handleKeyboardOpen(event);
+          this.handleCharacterKeyDown(event.key);
         }
       }
     };
     this.handleClearButtonFocus = () => {
       this.clearButtonFocused = true;
     };
-    this.handleClearButtonBlur = () => {
+    this.handleClearButtonBlur = (ev) => {
+      var _a;
+      const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
+      if (!(this.searchableSelectElement &&
+        ev.relatedTarget === this.searchableSelectElement) &&
+        !(retryButton && ev.relatedTarget === retryButton)) {
+        this.setMenuChange(false);
+        this.handleFocusIndicatorDisplay();
+      }
       this.clearButtonFocused = false;
     };
-    this.handleSearchableSelectInput = (event) => {
-      this.searchableSelectInputValue = event.target.value;
-      this.icInput.emit({ value: this.searchableSelectInputValue });
-      if (this.disableFilter) {
-        this.emitIcChange(this.searchableSelectInputValue);
+    this.handleFilter = () => {
+      const options = this.searchable ? [...this.options] : this.ungroupedOptions;
+      let isGrouped = false;
+      let newFilteredOptions = [];
+      options.map((option) => {
+        if (option.children)
+          isGrouped = true;
+      });
+      let menuOptionsFiltered;
+      if (this.searchable) {
+        menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.inputValueToFilter, this.searchMatchPosition);
+        this.searchableMenuItemSelected = false;
       }
-      else if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {
-        this.emitIcChange(null);
+      else {
+        menuOptionsFiltered = getFilteredMenuOptions(options, false, this.pressedCharacters, "start");
       }
-      if (this.isMenuEnabled()) {
-        this.setMenuChange(true);
+      if (!isGrouped) {
+        newFilteredOptions = menuOptionsFiltered;
       }
       else {
-        this.setMenuChange(false);
-      }
-      if (!this.disableFilter) {
-        const options = [...this.options];
-        let isGrouped = false;
-        let newFilteredOptions = [];
         options.map((option) => {
-          if (option.children)
-            isGrouped = true;
-        });
-        const menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
-        if (!isGrouped) {
-          newFilteredOptions = menuOptionsFiltered;
-        }
-        else {
-          options.map((option) => {
-            if (this.includeGroupTitlesInSearch) {
-              if (menuOptionsFiltered.indexOf(option) !== -1) {
-                newFilteredOptions.push(option);
-              }
-              else {
-                newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
-              }
+          if (this.includeGroupTitlesInSearch) {
+            if (menuOptionsFiltered.indexOf(option) !== -1) {
+              newFilteredOptions.push(option);
             }
             else {
               newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
             }
-          });
-        }
-        let noChildOptionsWhenFiltered = false;
-        if (isGrouped) {
-          noChildOptionsWhenFiltered = true;
-          newFilteredOptions.map((option) => {
-            if (option.children.length > 0) {
-              noChildOptionsWhenFiltered = false;
-            }
-          });
-        }
-        const noOptions = [{ label: this.emptyOptionListText, value: "" }];
-        if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
-          this.noOptions = null;
-          this.filteredOptions = newFilteredOptions;
-        }
-        else {
-          this.noOptions = noOptions;
+          }
+          else {
+            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
+          }
+        });
+      }
+      let noChildOptionsWhenFiltered = false;
+      if (isGrouped) {
+        noChildOptionsWhenFiltered = true;
+        newFilteredOptions.map((option) => {
+          if (option.children.length > 0) {
+            noChildOptionsWhenFiltered = false;
+          }
+        });
+      }
+      const noOptions = [{ label: this.emptyOptionListText, value: "" }];
+      if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
+        this.noOptions = null;
+        this.filteredOptions = newFilteredOptions;
+      }
+      else {
+        this.noOptions = noOptions;
+        this.filteredOptions = this.noOptions;
+      }
+    };
+    this.triggerLoading = () => {
+      this.hasTimedOut = false;
+      this.noOptions = [{ label: this.loadingLabel, value: "", loading: true }];
+      if (this.filteredOptions !== this.noOptions && this.searchable)
+        this.filteredOptions = this.noOptions;
+      else if (!this.searchable && this.options !== this.noOptions)
+        this.options = this.noOptions;
+      if (this.timeout) {
+        this.timeoutTimer = window.setTimeout(() => {
+          this.loading = false;
+          this.hasTimedOut = true;
+          this.noOptions = [
+            { label: this.loadingErrorLabel, value: "", timedOut: true },
+          ];
           this.filteredOptions = this.noOptions;
-        }
+          if (!this.searchable)
+            this.options = this.noOptions;
+        }, this.timeout);
+      }
+    };
+    this.getValueFromLabel = (label) => {
+      var _a;
+      return (_a = this.options.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value;
+    };
+    this.handleSearchableSelectInput = (event) => {
+      this.searchableSelectInputValue = event.target.value;
+      this.icInput.emit({ value: this.searchableSelectInputValue });
+      this.emitIcChange(this.searchableSelectInputValue);
+      this.hiddenInputValue = this.searchableSelectInputValue;
+      this.inputValueToFilter = this.searchableSelectInputValue;
+      this.setMenuChange(true);
+      if (!this.disableFilter) {
+        this.handleFilter();
         this.debounceAriaLiveUpdate();
       }
     };
@@ -252,85 +345,165 @@ export class Select {
     };
     this.getDefaultValue = (value) => this.getLabelFromValue(value) || value || null;
     this.onFocus = () => {
-      if (this.isExternalFiltering() && this.debounce > 0) {
-        this.debounceChangedHandler(this.debounce);
-      }
       this.icFocus.emit();
     };
     this.onBlur = (event) => {
-      if (this.searchable &&
+      var _a;
+      const target = event.relatedTarget;
+      if (target !== null &&
+        target.tagName === "UL" &&
+        target.className.includes("menu")) {
+        return;
+      }
+      const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
+      const isSearchableAndNoFocusedInternalElements = this.searchable &&
         event.relatedTarget !== this.menu &&
-        !(this.clearButton && event.relatedTarget === this.clearButton)) {
-        this.setMenuChange(false);
+        !Array.from(this.menu.querySelectorAll("[role='option']")).includes(event.relatedTarget) &&
+        !(this.clearButton && event.relatedTarget === this.clearButton) &&
+        !(retryButton && event.relatedTarget === retryButton);
+      if (isSearchableAndNoFocusedInternalElements) {
+        if (!this.retryButtonClick) {
+          this.setMenuChange(false);
+        }
         this.handleFocusIndicatorDisplay();
       }
+      this.retryButtonClick = false;
       this.icBlur.emit();
     };
+    this.onTimeoutBlur = (ev) => {
+      if (ev.detail.ev.relatedTarget !==
+        this.searchableSelectElement &&
+        !this.blurredBecauseButtonPressed) {
+        this.setMenuChange(false);
+        this.handleFocusIndicatorDisplay();
+        this.icBlur.emit();
+      }
+      this.blurredBecauseButtonPressed = false;
+    };
     this.handleFormReset = () => {
       this.value = this.initialValue;
       if (this.searchable) {
         this.searchableSelectInputValue = this.getDefaultValue(this.value);
+        this.hiddenInputValue = this.value;
       }
     };
-    this.label = undefined;
-    this.options = [];
-    this.required = false;
-    this.hideLabel = false;
+    this.ariaActiveDescendant = undefined;
+    this.clearButtonFocused = false;
+    this.debounceIcChange = undefined;
+    this.hiddenInputValue = undefined;
+    this.noOptions = null;
+    this.open = false;
+    this.pressedCharacters = "";
+    this.searchableSelectInputValue = null;
+    this.charactersUntilSuggestions = 0;
     this.disabled = false;
-    this.readonly = false;
-    this.placeholder = "Select an option";
-    this.helperText = "";
-    this.small = false;
+    this.disableFilter = false;
+    this.emptyOptionListText = "No results found";
     this.fullWidth = false;
-    this.validationStatus = "";
-    this.validationText = "";
-    this.value = undefined;
-    this.debounce = 0;
-    this.name = this.inputId;
-    this.showClearButton = false;
-    this.searchable = false;
+    this.helperText = "";
+    this.hideLabel = false;
     this.includeDescriptionsInSearch = false;
     this.includeGroupTitlesInSearch = false;
+    this.label = undefined;
+    this.loadingErrorLabel = "Loading Error";
+    this.loadingLabel = "Loading...";
+    this.name = this.inputId;
+    this.placeholder = "Select an option";
+    this.readonly = false;
+    this.required = false;
+    this.searchable = false;
     this.searchMatchPosition = "anywhere";
-    this.charactersUntilSuggestions = 0;
-    this.emptyOptionListText = "No results found";
-    this.disableFilter = false;
-    this.open = false;
-    this.clearButtonFocused = false;
-    this.searchableSelectInputValue = null;
+    this.showClearButton = false;
+    this.small = false;
+    this.timeout = undefined;
+    this.validationStatus = "";
+    this.validationText = "";
+    this.loading = false;
+    this.options = [];
     this.filteredOptions = this.options;
-    this.ariaActiveDescendant = undefined;
-    this.noOptions = null;
-    this.initialValue = this.value;
+    this.debounce = 0;
     this.currDebounce = this.debounce;
-    this.debounceIcChange = undefined;
+    this.value = undefined;
+    this.initialValue = this.value;
+    this.inputValueToFilter = this.value;
+    this.currValue = this.value;
+  }
+  loadingHandler(newValue) {
+    newValue && this.triggerLoading();
   }
   watchOptionsHandler() {
-    if (this.isExternalFiltering()) {
-      if (this.options.length > 0) {
+    if (!this.hasTimedOut) {
+      this.loading = false;
+      clearTimeout(this.timeoutTimer);
+      if (this.isExternalFiltering()) {
+        if (this.options.length > 0) {
+          this.setOptionsValuesFromLabels();
+          this.noOptions = null;
+          this.filteredOptions = this.options;
+        }
+        else {
+          this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
+          this.filteredOptions = this.noOptions;
+        }
+        this.updateSearchableSelectResultAriaLive();
+        this.setDefaultValue();
+      }
+      else {
         this.setOptionsValuesFromLabels();
-        this.noOptions = null;
         this.filteredOptions = this.options;
-      }
-      else if (this.isMenuEnabled()) {
-        this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-        this.filteredOptions = this.noOptions;
-        // Will prevent 'No results found' displaying on initial load and setting default value
-        if (!this.initialRender) {
-          this.setMenuChange(true);
+        if (this.initialOptionsEmpty) {
+          this.setDefaultValue();
+          this.initialOptionsEmpty = false;
         }
       }
-      this.updateSearchableSelectResultAriaLive();
-      this.setSearchableDefaultValue();
     }
     else {
-      this.setOptionsValuesFromLabels();
-      this.filteredOptions = this.options;
+      if (!this.searchable)
+        this.options = this.noOptions;
     }
   }
   debounceChangedHandler(newValue) {
     this.updateOnChangeDebounce(newValue);
   }
+  valueChangedHandler() {
+    if (this.value !== this.currValue) {
+      this.currValue = this.value;
+    }
+    if (this.searchable) {
+      this.searchableSelectInputValue =
+        this.getLabelFromValue(this.currValue) || this.currValue;
+    }
+  }
+  disconnectedCallback() {
+    removeFormResetListener(this.host, this.handleFormReset);
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, [
+      ...IC_INHERITED_ARIA,
+      "tabindex",
+      "title",
+    ]);
+    removeDisabledFalse(this.disabled, this.host);
+    this.setOptionsValuesFromLabels();
+    addFormResetListener(this.host, this.handleFormReset);
+    if (!this.options.length) {
+      this.initialOptionsEmpty = true;
+    }
+    else {
+      this.setDefaultValue();
+    }
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
+    if (this.loading)
+      this.triggerLoading();
+    this.hiddenInputValue = this.searchable && this.currValue;
+  }
+  componentDidRender() {
+    if (this.nativeSelectElement && !this.disabled) {
+      this.setTextColor();
+    }
+  }
   /**
    * Sets focus on the input box.
    */
@@ -356,76 +529,60 @@ export class Select {
       this.updateSearchableSelectResultAriaLive();
     }, 800);
   }
-  setSearchableDefaultValue() {
-    if (!this.hasSetSearchableDefaultValue && this.value && this.searchable) {
-      this.searchableSelectInputValue = this.getDefaultValue(this.value);
-      this.initialValue = this.value;
-      this.hasSetSearchableDefaultValue = true;
-    }
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.host, [
-      ...IC_INHERITED_ARIA,
-      "tabindex",
-      "title",
-    ]);
-    this.setOptionsValuesFromLabels();
-    addFormResetListener(this.host, this.handleFormReset);
-    this.initialRender = true;
-    if (!this.disableFilter) {
-      this.setSearchableDefaultValue();
-    }
-  }
-  componentDidRender() {
-    if (this.nativeSelectElement && !this.disabled) {
-      this.setTextColor();
+  setDefaultValue() {
+    if (!this.hasSetDefaultValue && this.currValue) {
+      this.searchableSelectInputValue = this.getDefaultValue(this.currValue);
+      this.initialValue = this.currValue;
+      this.hasSetDefaultValue = true;
     }
   }
-  componentWillUpdate() {
-    this.initialRender = false;
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
-  }
-  disconnectedCallback() {
-    removeFormResetListener(this.host, this.handleFormReset);
-  }
   render() {
-    const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, value, } = this;
-    renderHiddenInput(true, this.host, name, value, disabled);
+    const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+    const noOptionSelect = searchable &&
+      (this.loading ||
+        this.hasTimedOut ||
+        (this.noOptions !== null &&
+          this.noOptions[0] &&
+          this.noOptions[0].label === this.emptyOptionListText));
+    const inputValue = this.searchable ? this.hiddenInputValue : currValue;
+    renderHiddenInput(true, this.host, name, inputValue, disabled);
     const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
     const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
-    return (h(Host, null, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(value)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
+    return (h(Host, { class: {
+        disabled: disabled,
+        searchable: searchable,
+        small: small,
+        "full-width": fullWidth,
+      }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
       if (option.children) {
-        return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === value }, option.label)))));
+        return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
       }
       else {
-        return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === value }, option.label));
+        return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label));
       }
-    }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur }), this.searchableSelectInputValue &&
-      (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && value === null
+    }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur }), this.searchableSelectInputValue &&
+      (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
         ? "Clear input"
         : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
         "expand-icon": true,
         "expand-icon-open": this.open,
-        "expand-icon-filled": !(value == null || value === ""),
-        "expand-icon-disabled": !this.isMenuEnabled(),
-      }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${this.getLabelFromValue(value) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
+        "expand-icon-filled": !(currValue == null || currValue === ""),
+      }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${this.getLabelFromValue(currValue) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
         "value-text": true,
-        placeholder: this.getLabelFromValue(value) === undefined,
-      } }, h("p", null, this.getLabelFromValue(value) || placeholder)), h("div", { class: "select-input-end" }, value && showClearButton && h("div", { class: "divider" }), h("span", { class: {
+        placeholder: this.getLabelFromValue(currValue) === undefined,
+      } }, h("p", null, this.getLabelFromValue(currValue) || placeholder)), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
         "expand-icon": true,
         "expand-icon-open": this.open,
-        "expand-icon-filled": !(value == null || value === ""),
-      }, innerHTML: Expand, "aria-hidden": "true" }))), value && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
+        "expand-icon-filled": !(currValue == null || currValue === ""),
+      }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
-        "no-results": this.noOptions !== null,
+        "no-results": noOptionSelect,
       }, ref: (el) => (this.menu = el), inputEl: searchable
         ? this.searchableSelectElement
-        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: value, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, parentEl: this.host })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
+        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.host, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
   }
   static get is() { return "ic-select"; }
   static get encapsulation() { return "shadow"; }
@@ -442,7 +599,64 @@ export class Select {
   }
   static get properties() {
     return {
-      "label": {
+      "charactersUntilSuggestions": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore."
+            }],
+          "text": ""
+        },
+        "attribute": "characters-until-suggestions",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the disabled state will be set."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disableFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source."
+        },
+        "attribute": "disable-filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "emptyOptionListText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -450,37 +664,53 @@ export class Select {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The label for the select."
+          "text": "The text displayed when there are no options in the option list."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "empty-option-list-text",
+        "reflect": false,
+        "defaultValue": "\"No results found\""
       },
-      "options": {
-        "type": "unknown",
+      "fullWidth": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcMenuOption[]",
-          "resolved": "IcMenuOption[]",
-          "references": {
-            "IcMenuOption": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the select element will fill the width of the container."
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The possible selection options."
+          "text": "The helper text that will be displayed for additional field guidance."
         },
-        "defaultValue": "[]"
+        "attribute": "helper-text",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": {
+      "hideLabel": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -492,13 +722,13 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the select will require a value."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
-        "attribute": "required",
+        "attribute": "hide-label",
         "reflect": false,
         "defaultValue": "false"
       },
-      "hideLabel": {
+      "includeDescriptionsInSearch": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -510,13 +740,13 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
+          "text": "If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering."
         },
-        "attribute": "hide-label",
+        "attribute": "include-descriptions-in-search",
         "reflect": false,
         "defaultValue": "false"
       },
-      "disabled": {
+      "includeGroupTitlesInSearch": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -528,29 +758,82 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the disabled state will be set."
+          "text": "If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering."
         },
-        "attribute": "disabled",
-        "reflect": true,
+        "attribute": "include-group-titles-in-search",
+        "reflect": false,
         "defaultValue": "false"
       },
-      "readonly": {
-        "type": "boolean",
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label for the select."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "loadingErrorLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The message displayed when external loading times out."
+        },
+        "attribute": "loading-error-label",
+        "reflect": false,
+        "defaultValue": "\"Loading Error\""
+      },
+      "loadingLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The message displayed whilst the options are being loaded externally."
+        },
+        "attribute": "loading-label",
+        "reflect": false,
+        "defaultValue": "\"Loading...\""
+      },
+      "name": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the readonly state will be set."
+          "text": "The name of the control, which is submitted with the form data."
         },
-        "attribute": "readonly",
+        "attribute": "name",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "this.inputId"
       },
       "placeholder": {
         "type": "string",
@@ -570,25 +853,25 @@ export class Select {
         "reflect": false,
         "defaultValue": "\"Select an option\""
       },
-      "helperText": {
-        "type": "string",
+      "readonly": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The helper text that will be displayed for additional field guidance."
+          "text": "If `true`, the readonly state will be set."
         },
-        "attribute": "helper-text",
+        "attribute": "readonly",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "false"
       },
-      "small": {
+      "required": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -600,13 +883,13 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the select."
+          "text": "If `true`, the select will require a value."
         },
-        "attribute": "small",
+        "attribute": "required",
         "reflect": false,
         "defaultValue": "false"
       },
-      "fullWidth": {
+      "searchable": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -615,23 +898,23 @@ export class Select {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the select element will fill the width of the container."
+          "text": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options."
         },
-        "attribute": "full-width",
+        "attribute": "searchable",
         "reflect": false,
         "defaultValue": "false"
       },
-      "validationStatus": {
+      "searchMatchPosition": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcInformationStatusOrEmpty",
-          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+          "original": "IcSearchMatchPositions",
+          "resolved": "\"anywhere\" | \"start\"",
           "references": {
-            "IcInformationStatusOrEmpty": {
+            "IcSearchMatchPositions": {
               "location": "import",
               "path": "../../utils/types"
             }
@@ -641,48 +924,49 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The validation status - e.g. 'error' | 'warning' | 'success'."
+          "text": "Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering."
         },
-        "attribute": "validation-status",
+        "attribute": "search-match-position",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "\"anywhere\""
       },
-      "validationText": {
-        "type": "string",
+      "showClearButton": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The text to display as the validation message."
+          "text": "If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select."
         },
-        "attribute": "validation-text",
+        "attribute": "show-clear-button",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "false"
       },
-      "value": {
-        "type": "string",
-        "mutable": true,
+      "small": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The value of the currently selected option."
+          "text": "If `true`, the small styling will be applied to the select."
         },
-        "attribute": "value",
-        "reflect": false
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "debounce": {
+      "timeout": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -694,87 +978,55 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+          "text": "If using external filtering, set a timeout for when loading takes too long."
         },
-        "attribute": "debounce",
-        "reflect": false,
-        "defaultValue": "0"
+        "attribute": "timeout",
+        "reflect": false
       },
-      "name": {
+      "validationStatus": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the control, which is submitted with the form data."
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "this.inputId"
-      },
-      "showClearButton": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select."
-        },
-        "attribute": "show-clear-button",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "searchable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcInformationStatusOrEmpty",
+          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+          "references": {
+            "IcInformationStatusOrEmpty": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options."
+          "text": "The validation status - e.g. 'error' | 'warning' | 'success'."
         },
-        "attribute": "searchable",
+        "attribute": "validation-status",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"\""
       },
-      "includeDescriptionsInSearch": {
-        "type": "boolean",
+      "validationText": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering."
+          "text": "The text to display as the validation message."
         },
-        "attribute": "include-descriptions-in-search",
+        "attribute": "validation-text",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"\""
       },
-      "includeGroupTitlesInSearch": {
+      "loading": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -784,20 +1036,20 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering."
+          "text": "If `true`, the loading state will be triggered when fetching options asyncronously."
         },
-        "attribute": "include-group-titles-in-search",
+        "attribute": "loading",
         "reflect": false,
         "defaultValue": "false"
       },
-      "searchMatchPosition": {
-        "type": "string",
+      "options": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "IcSearchMatchPositions",
-          "resolved": "\"anywhere\" | \"start\"",
+          "original": "IcMenuOption[]",
+          "resolved": "IcMenuOption[]",
           "references": {
-            "IcSearchMatchPositions": {
+            "IcMenuOption": {
               "location": "import",
               "path": "../../utils/types"
             }
@@ -807,13 +1059,11 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering."
+          "text": "The possible selection options."
         },
-        "attribute": "search-match-position",
-        "reflect": false,
-        "defaultValue": "\"anywhere\""
+        "defaultValue": "[]"
       },
-      "charactersUntilSuggestions": {
+      "debounce": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -825,65 +1075,65 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The number of characters until suggestions appear for a searchable select."
+          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
         },
-        "attribute": "characters-until-suggestions",
+        "attribute": "debounce",
         "reflect": false,
         "defaultValue": "0"
       },
-      "emptyOptionListText": {
+      "value": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The text displayed when there are no options in the option list."
-        },
-        "attribute": "empty-option-list-text",
-        "reflect": false,
-        "defaultValue": "\"No results found\""
-      },
-      "disableFilter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether to disable the built in filtering for a searchable variant. For example, if options will already be filtered from external source."
+          "text": "The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input."
         },
-        "attribute": "disable-filter",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "value",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "open": {},
+      "ariaActiveDescendant": {},
       "clearButtonFocused": {},
+      "debounceIcChange": {},
+      "hiddenInputValue": {},
+      "noOptions": {},
+      "open": {},
+      "pressedCharacters": {},
       "searchableSelectInputValue": {},
       "filteredOptions": {},
-      "ariaActiveDescendant": {},
-      "noOptions": {},
-      "initialValue": {},
       "currDebounce": {},
-      "debounceIcChange": {}
+      "initialValue": {},
+      "inputValueToFilter": {},
+      "currValue": {}
     };
   }
   static get events() {
     return [{
+        "method": "icBlur",
+        "name": "icBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select loses focus."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
         "method": "icChange",
         "name": "icChange",
         "bubbles": true,
@@ -899,7 +1149,7 @@ export class Select {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -911,7 +1161,7 @@ export class Select {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when clear button clicked."
+          "text": "Emitted when the clear button is clicked."
         },
         "complexType": {
           "original": "void",
@@ -926,7 +1176,7 @@ export class Select {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when select gains focus."
+          "text": "Emitted when the select gains focus."
         },
         "complexType": {
           "original": "void",
@@ -934,19 +1184,24 @@ export class Select {
           "references": {}
         }
       }, {
-        "method": "icBlur",
-        "name": "icBlur",
+        "method": "icInput",
+        "name": "icInput",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when select loses focus."
+          "text": "Emitted when a keyboard input occurred."
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         }
       }, {
         "method": "icOptionSelect",
@@ -956,7 +1211,7 @@ export class Select {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when option is highlighted within the menu.\nHighlighting a menu item will trigger an `icChange/onIcChange` due to the value being updated."
+          "text": "Emitted when an option is highlighted within the menu.\nHighlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated."
         },
         "complexType": {
           "original": "IcOptionSelectEventDetail",
@@ -969,14 +1224,14 @@ export class Select {
           }
         }
       }, {
-        "method": "icInput",
-        "name": "icInput",
+        "method": "icRetryLoad",
+        "name": "icRetryLoad",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when a keyboard input occurred."
+          "text": "Emitted when the 'retry loading' button is clicked for a searchable variant."
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -984,7 +1239,7 @@ export class Select {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1013,11 +1268,17 @@ export class Select {
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
+        "propName": "loading",
+        "methodName": "loadingHandler"
+      }, {
         "propName": "options",
         "methodName": "watchOptionsHandler"
       }, {
         "propName": "debounce",
         "methodName": "debounceChangedHandler"
+      }, {
+        "propName": "value",
+        "methodName": "valueChangedHandler"
       }];
   }
 }