@vonage/vivid 4.18.0 → 4.19.0

package/shared/definition44.cjs

@@ -2,7 +2,8 @@
 
 const definition$1 = require('./definition11.cjs');
 const definition = require('./definition65.cjs');
-const definition$2 = require('./definition28.cjs');
+const definition$3 = require('./definition28.cjs');
+const definition$2 = require('./definition38.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
@@ -10,7 +11,7 @@ const formAssociated = require('./form-associated.cjs');
 const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
 const formElements = require('./form-elements.cjs');
-const listbox = require('./listbox.cjs');
+const option = require('./option.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
@@ -49,9 +50,8 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _SearchableSelect_instances, updateValuesThroughUserInteraction_fn, updateValuesWhileMaintainingOrder_fn, isValidValue_fn, _slottedOptionsChangeHandler, updateSelectedOnSlottedOptions_fn, handleOptionInteraction_fn, _clonedTagIcons, tagIconOfOption_fn, updateClonedTagIconOfOption_fn, _suppressFilter, updateFilteredOptions_fn, transitionHighlightedOptionTo_fn, selectHighlightedOption_fn, highlightFirstOption_fn, highlightLastOption_fn, highlightPrevPage_fn, highlightNextPage_fn, highlightPreviousOption_fn, highlightNextOption_fn, textForValue_fn, measureTagWidth_fn, updateTagLayout_fn, moveTagFocusTo_fn, nextTagIndexLeft_fn, nextTagIndexRight_fn, nextTagIndexForRemoved_fn, determineInitialValues_fn, updateFormValue_fn, _resizeObserver;
+var _SearchableSelect_instances, updateValuesThroughUserInteraction_fn, updateValuesWhileMaintainingOrder_fn, isValidValue_fn, _slottedOptionsChangeHandler, updateSelectedOnSlottedOptions_fn, handleOptionInteraction_fn, _clonedTagIcons, tagIconOfOption_fn, updateClonedTagIconOfOption_fn, updateFilteredOptions_fn, transitionHighlightedOptionTo_fn, selectHighlightedOption_fn, highlightFirstOption_fn, highlightLastOption_fn, highlightPrevPage_fn, highlightNextPage_fn, highlightPreviousOption_fn, highlightNextOption_fn, textForValue_fn, measureTagWidth_fn, updateTagLayout_fn, moveTagFocusTo_fn, nextTagIndexLeft_fn, nextTagIndexRight_fn, nextTagIndexForRemoved_fn, determineInitialValues_fn, updateFormValue_fn, _resizeObserver;
 const TagGapPx = 8;
 const InputMinWidthPx = 100;
 const PageSize = 10;
@@ -67,7 +67,7 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
     this.maxLines = null;
     this.values = [];
     this.initialValues = [];
-    this._inputValue = "";
+    this._currentSearchText = null;
     // --- Slotted options ---
     /**
      * @internal
@@ -86,7 +86,7 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
     __privateAdd(this, _clonedTagIcons, /* @__PURE__ */ new Map());
     this._filteredOptions = [];
     this._filteredEnabledOptions = [];
-    __privateAdd(this, _suppressFilter, false);
+    this.loading = false;
     this._highlightedOptionIndex = null;
     this._numElidedTags = 0;
     this._tagRows = [];
@@ -127,14 +127,6 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
       this.values = this.values.filter((value) => __privateMethod(this, _SearchableSelect_instances, isValidValue_fn).call(this, value));
       return;
     }
-    if (!this.multiple) {
-      if (this.values.length) {
-        __privateSet(this, _suppressFilter, true);
-        this._inputValue = __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.values[0]);
-      } else {
-        this._inputValue = "";
-      }
-    }
     this.value = this.values.length ? this.values[0] : "";
     __privateMethod(this, _SearchableSelect_instances, updateSelectedOnSlottedOptions_fn).call(this);
     if (this.$fastController.isConnected) {
@@ -189,21 +181,35 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
   /**
    * @internal
    */
-  _inputValueChanged() {
+  _currentSearchTextChanged() {
     __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+    this.$emit("search-text-change", void 0, {
+      bubbles: false,
+      composed: false
+    });
+  }
+  /**
+   * The current search text of the component.
+   */
+  get searchText() {
+    return this._currentSearchText ?? "";
+  }
+  /**
+   * @internal
+   */
+  get _inputValue() {
+    return this._currentSearchText ?? (!this.multiple && this.value !== "" ? __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.value) ?? "" : "");
   }
   /**
    * @internal
    */
   _onInputInput(event) {
-    __privateSet(this, _suppressFilter, false);
-    this._inputValue = event.target.value;
+    this._currentSearchText = event.target.value;
   }
   /**
    * @internal
    */
   _onInputFocus(_) {
-    __privateSet(this, _suppressFilter, true);
     __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
     this.open = true;
   }
@@ -212,15 +218,7 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
    */
   _onInputBlur(_) {
     this.open = false;
-    if (this.multiple) {
-      this._inputValue = "";
-    } else {
-      if (this.values.length === 0) {
-        this._inputValue = "";
-      } else {
-        this._inputValue = __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.values[0]);
-      }
-    }
+    this._currentSearchText = null;
     this._changeDescription = "";
   }
   /**
@@ -338,6 +336,12 @@ exports.SearchableSelect = class SearchableSelect extends FormAssociatedSearchab
   _tagIconSlotName(value) {
     return `_tag-icon-${this.values.indexOf(value)}`;
   }
+  /**
+   * @internal
+   */
+  optionFilterChanged() {
+    __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+  }
   // --- Tags ---
   /**
    * @internal
@@ -512,6 +516,7 @@ updateSelectedOnSlottedOptions_fn = function() {
 handleOptionInteraction_fn = function(option) {
   const value = option.value;
   let newValues;
+  let shouldClearSearchText = false;
   const isSelection = !this.values.includes(value);
   if (this.multiple) {
     if (isSelection) {
@@ -519,11 +524,11 @@ handleOptionInteraction_fn = function(option) {
     } else {
       newValues = this.values.filter((option2) => option2 !== value);
     }
-    this._inputValue = "";
+    shouldClearSearchText = true;
   } else {
     if (isSelection) {
       newValues = [value];
-      this._inputValue = option.text;
+      shouldClearSearchText = true;
     } else {
       newValues = [];
     }
@@ -531,6 +536,9 @@ handleOptionInteraction_fn = function(option) {
   }
   this._changeDescription = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
   __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, newValues);
+  if (shouldClearSearchText) {
+    this._currentSearchText = null;
+  }
 };
 _clonedTagIcons = new WeakMap();
 tagIconOfOption_fn = function(option) {
@@ -553,20 +561,14 @@ updateClonedTagIconOfOption_fn = function(option) {
     }
   }
 };
-_suppressFilter = new WeakMap();
 updateFilteredOptions_fn = function() {
   const newFilteredOptions = [];
+  const optionFilter = this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
   for (const option of this._slottedOptions ?? []) {
-    if (__privateGet(this, _suppressFilter) || this._inputValue === "") {
-      option.hidden = false;
-      option._matchedRange = null;
-    } else {
-      const matchIndex = option.text.toLowerCase().indexOf(this._inputValue.toLowerCase());
-      const matchedRange = matchIndex === -1 ? null : { from: matchIndex, to: matchIndex + this._inputValue.length };
-      option.hidden = !matchedRange;
-      option._matchedRange = matchedRange;
-    }
-    if (!option.hidden) {
+    option._vvdSearchText = this.searchText;
+    const matches = !this.searchText || optionFilter(option, this.searchText);
+    option._isNotMatching = !matches;
+    if (!option.hidden && matches) {
       newFilteredOptions.push(option);
     }
   }
@@ -627,10 +629,7 @@ highlightNextOption_fn = function() {
   __privateMethod(this, _SearchableSelect_instances, transitionHighlightedOptionTo_fn).call(this, (this._highlightedOptionIndex ?? -1) + 1);
 };
 textForValue_fn = function(value) {
-  const option = this._slottedOptions.find(
-    (option2) => option2.value === value
-  );
-  return option.text;
+  return this._slottedOptions?.find((option) => option.value === value)?.text;
 };
 /**
  * @internal
@@ -798,16 +797,24 @@ __decorateClass$1([
 ], exports.SearchableSelect.prototype, "_input", 2);
 __decorateClass$1([
   vividElement.observable
-], exports.SearchableSelect.prototype, "_inputValue", 2);
+], exports.SearchableSelect.prototype, "_currentSearchText", 2);
 __decorateClass$1([
   vividElement.observable
 ], exports.SearchableSelect.prototype, "_slottedOptions", 2);
+__decorateClass$1([
+  vividElement.observable
+], exports.SearchableSelect.prototype, "optionFilter", 2);
 __decorateClass$1([
   vividElement.observable
 ], exports.SearchableSelect.prototype, "_filteredOptions", 2);
 __decorateClass$1([
   vividElement.observable
 ], exports.SearchableSelect.prototype, "_filteredEnabledOptions", 2);
+__decorateClass$1([
+  vividElement.attr({
+    mode: "boolean"
+  })
+], exports.SearchableSelect.prototype, "loading", 2);
 __decorateClass$1([
   vividElement.observable
 ], exports.SearchableSelect.prototype, "_highlightedOptionIndex", 2);
@@ -933,6 +940,7 @@ const elidedTagTemplateFactory = (context, getComponent) => {
 };
 function renderFieldset(context) {
   const buttonTag = context.tagFor(definition$1.Button);
+  const progressRingTag = context.tagFor(definition$2.ProgressRing);
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const chevronTemplate = definition$1.chevronTemplateFactory(context);
   const tagTemplate = tagTemplateFactory(context, (c) => c.parent);
@@ -990,7 +998,13 @@ function renderFieldset(context) {
 						type="text"
 						?disabled="${(x) => x.disabled}"
 						:value="${(x) => x._inputValue}"
-						@input="${(x, c) => x._onInputInput(c.event)}"
+						@input="${(x, c) => {
+    x._onInputInput(c.event);
+    c.event.stopPropagation();
+  }}"
+						@change="${(_, c) => {
+    c.event.stopPropagation();
+  }}"
 						@focus="${(x, c) => x._onInputFocus(c.event)}"
 						@blur="${(x, c) => x._onInputBlur(c.event)}"
 						@keydown="${(x, c) => x._onInputKeydown(c.event)}"
@@ -1014,7 +1028,11 @@ function renderFieldset(context) {
 				></${buttonTag}>`
   )}
 			<div @mousedown="${() => false}" @click="${(x) => x._onChevronClick()}">
-				${chevronTemplate}
+				${when.when(
+    (x) => x.loading,
+    vividElement.html`<${progressRingTag} indeterminate size="-6"></${progressRingTag}>`
+  )}
+				${when.when((x) => !x.loading, chevronTemplate)}
 			</div>
 		</div>
 	`;
@@ -1052,7 +1070,7 @@ function renderControl(context) {
 					>
 						<slot
 							${slotted.slotted({
-    filter: listbox.Listbox.slottedOptionFilter,
+    filter: option.isListboxOption,
     flatten: true,
     property: "_slottedOptions"
   })}>
@@ -1061,13 +1079,19 @@ function renderControl(context) {
     (x) => x._filteredOptions.length === 0,
     vividElement.html`<div class="empty-message">
 								${when.when(
-      (x) => x._inputValue === "",
+      (x) => x.loading,
+      vividElement.html`<slot name="loading-options">
+										${(x) => x.locale.searchableSelect.loadingOptionsMessage}
+									</slot>`
+    )}
+								${when.when(
+      (x) => !x.loading && x.searchText === "",
       vividElement.html`<slot name="no-options">
 										${(x) => x.locale.searchableSelect.noOptionsMessage}
 									</slot>`
     )}
 								${when.when(
-      (x) => x._inputValue !== "",
+      (x) => !x.loading && x.searchText !== "",
       vividElement.html`<slot name="no-matches">
 										${(x) => x.locale.searchableSelect.noMatchesMessage}
 									</slot>`
@@ -1114,7 +1138,7 @@ function renderRemoveButton(iconTag) {
 	`;
 }
 const optionTagTemplate = (context) => {
-  const iconTag = context.tagFor(definition$2.Icon);
+  const iconTag = context.tagFor(definition$3.Icon);
   return vividElement.html`<span class="${getClasses}" aria-disabled="${(x) => x.disabled}">
 		<slot name="icon" aria-hidden="true">
 			${when.when(
@@ -1134,7 +1158,7 @@ const optionTagDefinition = vividElement.defineVividComponent(
   "option-tag",
   OptionTag,
   optionTagTemplate,
-  [definition$2.iconDefinition],
+  [definition$3.iconDefinition],
   {
     styles: [optionTagStyles],
     shadowOptions: {
@@ -1146,7 +1170,13 @@ const searchableSelectDefinition = vividElement.defineVividComponent(
   "searchable-select",
   exports.SearchableSelect,
   SearchableSelectTemplate,
-  [definition$1.buttonDefinition, definition.popupDefinition, definition$2.iconDefinition, optionTagDefinition],
+  [
+    definition$1.buttonDefinition,
+    definition.popupDefinition,
+    definition$3.iconDefinition,
+    optionTagDefinition,
+    definition$2.progressRingDefinition
+  ],
   {
     styles
   }

package/shared/definition44.js

@@ -1,6 +1,7 @@
 import { B as Button, c as chevronTemplateFactory, b as buttonDefinition } from './definition11.js';
 import { P as Popup, p as popupDefinition } from './definition65.js';
 import { I as Icon, i as iconDefinition } from './definition28.js';
+import { P as ProgressRing, p as progressRingDefinition } from './definition38.js';
 import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { s as scrollIntoView } from './scrollIntoView.js';
@@ -8,7 +9,7 @@ import { F as FormAssociated } from './form-associated.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { F as FormElementSuccessText, a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
-import { L as Listbox } from './listbox.js';
+import { i as isListboxOption } from './option.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
@@ -47,9 +48,8 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _SearchableSelect_instances, updateValuesThroughUserInteraction_fn, updateValuesWhileMaintainingOrder_fn, isValidValue_fn, _slottedOptionsChangeHandler, updateSelectedOnSlottedOptions_fn, handleOptionInteraction_fn, _clonedTagIcons, tagIconOfOption_fn, updateClonedTagIconOfOption_fn, _suppressFilter, updateFilteredOptions_fn, transitionHighlightedOptionTo_fn, selectHighlightedOption_fn, highlightFirstOption_fn, highlightLastOption_fn, highlightPrevPage_fn, highlightNextPage_fn, highlightPreviousOption_fn, highlightNextOption_fn, textForValue_fn, measureTagWidth_fn, updateTagLayout_fn, moveTagFocusTo_fn, nextTagIndexLeft_fn, nextTagIndexRight_fn, nextTagIndexForRemoved_fn, determineInitialValues_fn, updateFormValue_fn, _resizeObserver;
+var _SearchableSelect_instances, updateValuesThroughUserInteraction_fn, updateValuesWhileMaintainingOrder_fn, isValidValue_fn, _slottedOptionsChangeHandler, updateSelectedOnSlottedOptions_fn, handleOptionInteraction_fn, _clonedTagIcons, tagIconOfOption_fn, updateClonedTagIconOfOption_fn, updateFilteredOptions_fn, transitionHighlightedOptionTo_fn, selectHighlightedOption_fn, highlightFirstOption_fn, highlightLastOption_fn, highlightPrevPage_fn, highlightNextPage_fn, highlightPreviousOption_fn, highlightNextOption_fn, textForValue_fn, measureTagWidth_fn, updateTagLayout_fn, moveTagFocusTo_fn, nextTagIndexLeft_fn, nextTagIndexRight_fn, nextTagIndexForRemoved_fn, determineInitialValues_fn, updateFormValue_fn, _resizeObserver;
 const TagGapPx = 8;
 const InputMinWidthPx = 100;
 const PageSize = 10;
@@ -65,7 +65,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
     this.maxLines = null;
     this.values = [];
     this.initialValues = [];
-    this._inputValue = "";
+    this._currentSearchText = null;
     // --- Slotted options ---
     /**
      * @internal
@@ -84,7 +84,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
     __privateAdd(this, _clonedTagIcons, /* @__PURE__ */ new Map());
     this._filteredOptions = [];
     this._filteredEnabledOptions = [];
-    __privateAdd(this, _suppressFilter, false);
+    this.loading = false;
     this._highlightedOptionIndex = null;
     this._numElidedTags = 0;
     this._tagRows = [];
@@ -125,14 +125,6 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
       this.values = this.values.filter((value) => __privateMethod(this, _SearchableSelect_instances, isValidValue_fn).call(this, value));
       return;
     }
-    if (!this.multiple) {
-      if (this.values.length) {
-        __privateSet(this, _suppressFilter, true);
-        this._inputValue = __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.values[0]);
-      } else {
-        this._inputValue = "";
-      }
-    }
     this.value = this.values.length ? this.values[0] : "";
     __privateMethod(this, _SearchableSelect_instances, updateSelectedOnSlottedOptions_fn).call(this);
     if (this.$fastController.isConnected) {
@@ -187,21 +179,35 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
   /**
    * @internal
    */
-  _inputValueChanged() {
+  _currentSearchTextChanged() {
     __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+    this.$emit("search-text-change", void 0, {
+      bubbles: false,
+      composed: false
+    });
+  }
+  /**
+   * The current search text of the component.
+   */
+  get searchText() {
+    return this._currentSearchText ?? "";
+  }
+  /**
+   * @internal
+   */
+  get _inputValue() {
+    return this._currentSearchText ?? (!this.multiple && this.value !== "" ? __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.value) ?? "" : "");
   }
   /**
    * @internal
    */
   _onInputInput(event) {
-    __privateSet(this, _suppressFilter, false);
-    this._inputValue = event.target.value;
+    this._currentSearchText = event.target.value;
   }
   /**
    * @internal
    */
   _onInputFocus(_) {
-    __privateSet(this, _suppressFilter, true);
     __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
     this.open = true;
   }
@@ -210,15 +216,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
    */
   _onInputBlur(_) {
     this.open = false;
-    if (this.multiple) {
-      this._inputValue = "";
-    } else {
-      if (this.values.length === 0) {
-        this._inputValue = "";
-      } else {
-        this._inputValue = __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.values[0]);
-      }
-    }
+    this._currentSearchText = null;
     this._changeDescription = "";
   }
   /**
@@ -336,6 +334,12 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
   _tagIconSlotName(value) {
     return `_tag-icon-${this.values.indexOf(value)}`;
   }
+  /**
+   * @internal
+   */
+  optionFilterChanged() {
+    __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+  }
   // --- Tags ---
   /**
    * @internal
@@ -510,6 +514,7 @@ updateSelectedOnSlottedOptions_fn = function() {
 handleOptionInteraction_fn = function(option) {
   const value = option.value;
   let newValues;
+  let shouldClearSearchText = false;
   const isSelection = !this.values.includes(value);
   if (this.multiple) {
     if (isSelection) {
@@ -517,11 +522,11 @@ handleOptionInteraction_fn = function(option) {
     } else {
       newValues = this.values.filter((option2) => option2 !== value);
     }
-    this._inputValue = "";
+    shouldClearSearchText = true;
   } else {
     if (isSelection) {
       newValues = [value];
-      this._inputValue = option.text;
+      shouldClearSearchText = true;
     } else {
       newValues = [];
     }
@@ -529,6 +534,9 @@ handleOptionInteraction_fn = function(option) {
   }
   this._changeDescription = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
   __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, newValues);
+  if (shouldClearSearchText) {
+    this._currentSearchText = null;
+  }
 };
 _clonedTagIcons = new WeakMap();
 tagIconOfOption_fn = function(option) {
@@ -551,20 +559,14 @@ updateClonedTagIconOfOption_fn = function(option) {
     }
   }
 };
-_suppressFilter = new WeakMap();
 updateFilteredOptions_fn = function() {
   const newFilteredOptions = [];
+  const optionFilter = this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
   for (const option of this._slottedOptions ?? []) {
-    if (__privateGet(this, _suppressFilter) || this._inputValue === "") {
-      option.hidden = false;
-      option._matchedRange = null;
-    } else {
-      const matchIndex = option.text.toLowerCase().indexOf(this._inputValue.toLowerCase());
-      const matchedRange = matchIndex === -1 ? null : { from: matchIndex, to: matchIndex + this._inputValue.length };
-      option.hidden = !matchedRange;
-      option._matchedRange = matchedRange;
-    }
-    if (!option.hidden) {
+    option._vvdSearchText = this.searchText;
+    const matches = !this.searchText || optionFilter(option, this.searchText);
+    option._isNotMatching = !matches;
+    if (!option.hidden && matches) {
       newFilteredOptions.push(option);
     }
   }
@@ -625,10 +627,7 @@ highlightNextOption_fn = function() {
   __privateMethod(this, _SearchableSelect_instances, transitionHighlightedOptionTo_fn).call(this, (this._highlightedOptionIndex ?? -1) + 1);
 };
 textForValue_fn = function(value) {
-  const option = this._slottedOptions.find(
-    (option2) => option2.value === value
-  );
-  return option.text;
+  return this._slottedOptions?.find((option) => option.value === value)?.text;
 };
 /**
  * @internal
@@ -796,16 +795,24 @@ __decorateClass$1([
 ], SearchableSelect.prototype, "_input", 2);
 __decorateClass$1([
   observable
-], SearchableSelect.prototype, "_inputValue", 2);
+], SearchableSelect.prototype, "_currentSearchText", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_slottedOptions", 2);
+__decorateClass$1([
+  observable
+], SearchableSelect.prototype, "optionFilter", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_filteredOptions", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
+__decorateClass$1([
+  attr({
+    mode: "boolean"
+  })
+], SearchableSelect.prototype, "loading", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_highlightedOptionIndex", 2);
@@ -931,6 +938,7 @@ const elidedTagTemplateFactory = (context, getComponent) => {
 };
 function renderFieldset(context) {
   const buttonTag = context.tagFor(Button);
+  const progressRingTag = context.tagFor(ProgressRing);
   const affixIconTemplate = affixIconTemplateFactory(context);
   const chevronTemplate = chevronTemplateFactory(context);
   const tagTemplate = tagTemplateFactory(context, (c) => c.parent);
@@ -988,7 +996,13 @@ function renderFieldset(context) {
 						type="text"
 						?disabled="${(x) => x.disabled}"
 						:value="${(x) => x._inputValue}"
-						@input="${(x, c) => x._onInputInput(c.event)}"
+						@input="${(x, c) => {
+    x._onInputInput(c.event);
+    c.event.stopPropagation();
+  }}"
+						@change="${(_, c) => {
+    c.event.stopPropagation();
+  }}"
 						@focus="${(x, c) => x._onInputFocus(c.event)}"
 						@blur="${(x, c) => x._onInputBlur(c.event)}"
 						@keydown="${(x, c) => x._onInputKeydown(c.event)}"
@@ -1012,7 +1026,11 @@ function renderFieldset(context) {
 				></${buttonTag}>`
   )}
 			<div @mousedown="${() => false}" @click="${(x) => x._onChevronClick()}">
-				${chevronTemplate}
+				${when(
+    (x) => x.loading,
+    html`<${progressRingTag} indeterminate size="-6"></${progressRingTag}>`
+  )}
+				${when((x) => !x.loading, chevronTemplate)}
 			</div>
 		</div>
 	`;
@@ -1050,7 +1068,7 @@ function renderControl(context) {
 					>
 						<slot
 							${slotted({
-    filter: Listbox.slottedOptionFilter,
+    filter: isListboxOption,
     flatten: true,
     property: "_slottedOptions"
   })}>
@@ -1059,13 +1077,19 @@ function renderControl(context) {
     (x) => x._filteredOptions.length === 0,
     html`<div class="empty-message">
 								${when(
-      (x) => x._inputValue === "",
+      (x) => x.loading,
+      html`<slot name="loading-options">
+										${(x) => x.locale.searchableSelect.loadingOptionsMessage}
+									</slot>`
+    )}
+								${when(
+      (x) => !x.loading && x.searchText === "",
       html`<slot name="no-options">
 										${(x) => x.locale.searchableSelect.noOptionsMessage}
 									</slot>`
     )}
 								${when(
-      (x) => x._inputValue !== "",
+      (x) => !x.loading && x.searchText !== "",
       html`<slot name="no-matches">
 										${(x) => x.locale.searchableSelect.noMatchesMessage}
 									</slot>`
@@ -1144,7 +1168,13 @@ const searchableSelectDefinition = defineVividComponent(
   "searchable-select",
   SearchableSelect,
   SearchableSelectTemplate,
-  [buttonDefinition, popupDefinition, iconDefinition, optionTagDefinition],
+  [
+    buttonDefinition,
+    popupDefinition,
+    iconDefinition,
+    optionTagDefinition,
+    progressRingDefinition
+  ],
   {
     styles
   }