@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

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

@@ -1,5 +1,5 @@
 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";
@@ -8,12 +8,13 @@ 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.searchableMenuItemSelected = false;
     this.ungroupedOptions = [];
-    this.inheritedAttributes = {};
-    this.hasSetDefaultValue = false;
-    this.initialOptionsEmpty = false;
     this.handleRetry = (ev) => {
       var _a;
       if (ev.detail.keyPressed)
@@ -37,10 +38,6 @@ export class Select {
       clearTimeout(this.debounceIcChange);
       this.icChange.emit({ value: value });
     };
-    this.isMenuEnabled = () => {
-      return (this.searchableSelectInputValue !== null ||
-        this.searchableSelectInputValue !== "");
-    };
     this.setOptionsValuesFromLabels = () => {
       if (this.options.length > 0 && this.options.map) {
         this.options.map((option) => {
@@ -93,6 +90,7 @@ export class Select {
       }
       if (this.searchable) {
         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);
@@ -115,6 +113,9 @@ export class Select {
       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");
       if (this.open) {
@@ -131,16 +132,18 @@ export class Select {
     };
     this.isExternalFiltering = () => this.searchable && this.disableFilter;
     this.handleClick = (event) => {
-      if (this.isExternalFiltering()) {
-        this.menu.options = this.filteredOptions;
-      }
-      else {
-        if (!this.hasTimedOut && !this.loading) {
+      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();
       }
     };
@@ -154,6 +157,7 @@ export class Select {
     this.handleClear = (event) => {
       event.stopPropagation();
       this.hasTimedOut = false;
+      clearTimeout(this.timeoutTimer);
       this.noOptions = null;
       this.emitImmediateIcChange(null);
       this.icClear.emit();
@@ -163,9 +167,6 @@ export class Select {
         this.filteredOptions = this.options;
         this.hiddenInputValue = null;
         this.searchableSelectElement.focus();
-        if (!this.isMenuEnabled()) {
-          this.setMenuChange(false);
-        }
       }
       else {
         this.customSelectElement.focus();
@@ -194,11 +195,15 @@ export class Select {
       }
     };
     this.handleNativeSelectKeyDown = (event) => {
-      event.cancelBubble = true;
+      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)) {
@@ -215,7 +220,7 @@ export class Select {
         this.setMenuChange(false);
       }
       else {
-        if (!(isArrowKey && this.noOptions !== null) && this.isMenuEnabled()) {
+        if (!(isArrowKey && this.noOptions !== null)) {
           if (!(event.key === " " && this.pressedCharacters.length > 0)) {
             // Keyboard events get passed onto ic-menu
             this.menu.handleKeyboardOpen(event);
@@ -249,6 +254,7 @@ export class Select {
       let menuOptionsFiltered;
       if (this.searchable) {
         menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.inputValueToFilter, this.searchMatchPosition);
+        this.searchableMenuItemSelected = false;
       }
       else {
         menuOptionsFiltered = getFilteredMenuOptions(options, false, this.pressedCharacters, "start");
@@ -320,12 +326,7 @@ export class Select {
       this.emitIcChange(this.searchableSelectInputValue);
       this.hiddenInputValue = this.searchableSelectInputValue;
       this.inputValueToFilter = this.searchableSelectInputValue;
-      if (this.isMenuEnabled()) {
-        this.setMenuChange(true);
-      }
-      else {
-        this.setMenuChange(false);
-      }
+      this.setMenuChange(true);
       if (!this.disableFilter) {
         this.handleFilter();
         this.debounceAriaLiveUpdate();
@@ -386,46 +387,46 @@ export class Select {
         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.showClearButton = false;
+    this.small = false;
     this.timeout = undefined;
-    this.loadingLabel = "Loading...";
-    this.loadingErrorLabel = "Loading Error";
+    this.validationStatus = "";
+    this.validationText = "";
     this.loading = false;
-    this.open = false;
-    this.clearButtonFocused = false;
-    this.searchableSelectInputValue = null;
+    this.options = [];
     this.filteredOptions = this.options;
-    this.ariaActiveDescendant = undefined;
-    this.noOptions = null;
-    this.initialValue = this.value;
+    this.debounce = 0;
     this.currDebounce = this.debounce;
-    this.currValue = this.value;
-    this.debounceIcChange = undefined;
-    this.pressedCharacters = "";
-    this.hiddenInputValue = undefined;
+    this.value = undefined;
+    this.initialValue = this.value;
     this.inputValueToFilter = this.value;
+    this.currValue = this.value;
   }
   loadingHandler(newValue) {
     newValue && this.triggerLoading();
@@ -440,7 +441,7 @@ export class Select {
           this.noOptions = null;
           this.filteredOptions = this.options;
         }
-        else if (this.isMenuEnabled()) {
+        else {
           this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
           this.filteredOptions = this.noOptions;
         }
@@ -473,6 +474,36 @@ export class Select {
         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.
    */
@@ -505,42 +536,14 @@ export class Select {
       this.hasSetDefaultValue = true;
     }
   }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.host, [
-      ...IC_INHERITED_ARIA,
-      "tabindex",
-      "title",
-    ]);
-    this.setOptionsValuesFromLabels();
-    addFormResetListener(this.host, this.handleFormReset);
-    if (!this.options.length) {
-      this.initialOptionsEmpty = true;
-    }
-    else {
-      this.setDefaultValue();
-    }
-  }
-  componentDidRender() {
-    if (this.nativeSelectElement && !this.disabled) {
-      this.setTextColor();
-    }
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
-    if (this.loading)
-      this.triggerLoading();
-    this.hiddenInputValue = this.searchable && this.currValue;
-  }
-  disconnectedCallback() {
-    removeFormResetListener(this.host, this.handleFormReset);
-  }
   render() {
-    var _a, _b;
     const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
-    const isOrHasLoaded = ((_a = (searchable ? this.filteredOptions : options)[0]) === null || _a === void 0 ? void 0 : _a.label) ===
-      this.loadingLabel ||
-      ((_b = (searchable ? this.filteredOptions : options)[0]) === null || _b === void 0 ? void 0 : _b.label) ===
-        this.loadingErrorLabel;
+    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";
@@ -576,10 +579,10 @@ export class Select {
       }, 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 || isOrHasLoaded,
+        "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: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, 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 })))));
+        : 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"; }
@@ -596,45 +599,28 @@ export class Select {
   }
   static get properties() {
     return {
-      "label": {
-        "type": "string",
+      "charactersUntilSuggestions": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label for the select."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "options": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IcMenuOption[]",
-          "resolved": "IcMenuOption[]",
-          "references": {
-            "IcMenuOption": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        },
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The possible selection options."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore."
+            }],
+          "text": ""
         },
-        "defaultValue": "[]"
+        "attribute": "characters-until-suggestions",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -646,13 +632,13 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the select will require a value."
+          "text": "If `true`, the disabled state will be set."
         },
-        "attribute": "required",
-        "reflect": false,
+        "attribute": "disabled",
+        "reflect": true,
         "defaultValue": "false"
       },
-      "hideLabel": {
+      "disableFilter": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -664,31 +650,31 @@ 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`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source."
         },
-        "attribute": "hide-label",
+        "attribute": "disable-filter",
         "reflect": false,
         "defaultValue": "false"
       },
-      "disabled": {
-        "type": "boolean",
+      "emptyOptionListText": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the disabled state will be set."
+          "text": "The text displayed when there are no options in the option list."
         },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "empty-option-list-text",
+        "reflect": false,
+        "defaultValue": "\"No results found\""
       },
-      "readonly": {
+      "fullWidth": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -697,16 +683,16 @@ export class Select {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the readonly state will be set."
+          "text": "If `true`, the select element will fill the width of the container."
         },
-        "attribute": "readonly",
+        "attribute": "full-width",
         "reflect": false,
         "defaultValue": "false"
       },
-      "placeholder": {
+      "helperText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -718,31 +704,31 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The placeholder value to be displayed."
+          "text": "The helper text that will be displayed for additional field guidance."
         },
-        "attribute": "placeholder",
+        "attribute": "helper-text",
         "reflect": false,
-        "defaultValue": "\"Select an option\""
+        "defaultValue": "\"\""
       },
-      "helperText": {
-        "type": "string",
+      "hideLabel": {
+        "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 label will be hidden and the required label value will be applied as an aria-label."
         },
-        "attribute": "helper-text",
+        "attribute": "hide-label",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "false"
       },
-      "small": {
+      "includeDescriptionsInSearch": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -754,13 +740,13 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the select."
+          "text": "If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering."
         },
-        "attribute": "small",
+        "attribute": "include-descriptions-in-search",
         "reflect": false,
         "defaultValue": "false"
       },
-      "fullWidth": {
+      "includeGroupTitlesInSearch": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -769,39 +755,33 @@ 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`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering."
         },
-        "attribute": "full-width",
+        "attribute": "include-group-titles-in-search",
         "reflect": false,
         "defaultValue": "false"
       },
-      "validationStatus": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcInformationStatusOrEmpty",
-          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
-          "references": {
-            "IcInformationStatusOrEmpty": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The validation status - e.g. 'error' | 'warning' | 'success'."
+          "text": "The label for the select."
         },
-        "attribute": "validation-status",
-        "reflect": false,
-        "defaultValue": "\"\""
+        "attribute": "label",
+        "reflect": false
       },
-      "validationText": {
+      "loadingErrorLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -813,15 +793,15 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The text to display as the validation message."
+          "text": "The message displayed when external loading times out."
         },
-        "attribute": "validation-text",
+        "attribute": "loading-error-label",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "\"Loading Error\""
       },
-      "value": {
+      "loadingLabel": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -831,28 +811,11 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "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": "value",
-        "reflect": false
-      },
-      "debounce": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+          "text": "The message displayed whilst the options are being loaded externally."
         },
-        "attribute": "debounce",
+        "attribute": "loading-label",
         "reflect": false,
-        "defaultValue": "0"
+        "defaultValue": "\"Loading...\""
       },
       "name": {
         "type": "string",
@@ -872,25 +835,25 @@ export class Select {
         "reflect": false,
         "defaultValue": "this.inputId"
       },
-      "showClearButton": {
-        "type": "boolean",
+      "placeholder": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "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."
+          "text": "The placeholder value to be displayed."
         },
-        "attribute": "show-clear-button",
+        "attribute": "placeholder",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"Select an option\""
       },
-      "searchable": {
+      "readonly": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -902,13 +865,13 @@ export class Select {
         "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": "If `true`, the readonly state will be set."
         },
-        "attribute": "searchable",
+        "attribute": "readonly",
         "reflect": false,
         "defaultValue": "false"
       },
-      "includeDescriptionsInSearch": {
+      "required": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -920,13 +883,13 @@ export class Select {
         "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": "If `true`, the select will require a value."
         },
-        "attribute": "include-descriptions-in-search",
+        "attribute": "required",
         "reflect": false,
         "defaultValue": "false"
       },
-      "includeGroupTitlesInSearch": {
+      "searchable": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -938,9 +901,9 @@ 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`, a searchable variant of the select will be displayed which can be typed in to filter options."
         },
-        "attribute": "include-group-titles-in-search",
+        "attribute": "searchable",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -967,46 +930,25 @@ export class Select {
         "reflect": false,
         "defaultValue": "\"anywhere\""
       },
-      "charactersUntilSuggestions": {
-        "type": "number",
+      "showClearButton": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "boolean",
+          "resolved": "boolean",
           "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"
-      },
-      "emptyOptionListText": {
-        "type": "string",
-        "mutable": false,
-        "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."
+          "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": "empty-option-list-text",
+        "attribute": "show-clear-button",
         "reflect": false,
-        "defaultValue": "\"No results found\""
+        "defaultValue": "false"
       },
-      "disableFilter": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -1018,9 +960,9 @@ export class Select {
         "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."
+          "text": "If `true`, the small styling will be applied to the select."
         },
-        "attribute": "disable-filter",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -1041,25 +983,30 @@ export class Select {
         "attribute": "timeout",
         "reflect": false
       },
-      "loadingLabel": {
+      "validationStatus": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcInformationStatusOrEmpty",
+          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+          "references": {
+            "IcInformationStatusOrEmpty": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The message displayed whilst the options are being loaded externally."
+          "text": "The validation status - e.g. 'error' | 'warning' | 'success'."
         },
-        "attribute": "loading-label",
+        "attribute": "validation-status",
         "reflect": false,
-        "defaultValue": "\"Loading...\""
+        "defaultValue": "\"\""
       },
-      "loadingErrorLabel": {
+      "validationText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -1071,11 +1018,11 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The message displayed when external loading times out."
+          "text": "The text to display as the validation message."
         },
-        "attribute": "loading-error-label",
+        "attribute": "validation-text",
         "reflect": false,
-        "defaultValue": "\"Loading Error\""
+        "defaultValue": "\"\""
       },
       "loading": {
         "type": "boolean",
@@ -1094,28 +1041,99 @@ export class Select {
         "attribute": "loading",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IcMenuOption[]",
+          "resolved": "IcMenuOption[]",
+          "references": {
+            "IcMenuOption": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The possible selection options."
+        },
+        "defaultValue": "[]"
+      },
+      "debounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+        },
+        "attribute": "debounce",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "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": "value",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "open": {},
+      "ariaActiveDescendant": {},
       "clearButtonFocused": {},
+      "debounceIcChange": {},
+      "hiddenInputValue": {},
+      "noOptions": {},
+      "open": {},
+      "pressedCharacters": {},
       "searchableSelectInputValue": {},
       "filteredOptions": {},
-      "ariaActiveDescendant": {},
-      "noOptions": {},
-      "initialValue": {},
       "currDebounce": {},
-      "currValue": {},
-      "debounceIcChange": {},
-      "pressedCharacters": {},
-      "hiddenInputValue": {},
-      "inputValueToFilter": {}
+      "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,
@@ -1131,7 +1149,7 @@ export class Select {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1166,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 the 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",
@@ -1200,26 +1223,6 @@ export class Select {
             }
           }
         }
-      }, {
-        "method": "icInput",
-        "name": "icInput",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a keyboard input occurred."
-        },
-        "complexType": {
-          "original": "IcValueEventDetail",
-          "resolved": "IcValueEventDetail",
-          "references": {
-            "IcValueEventDetail": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          }
-        }
       }, {
         "method": "icRetryLoad",
         "name": "icRetryLoad",
@@ -1236,7 +1239,7 @@ export class Select {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }