@fluid-topics/ftds-combobox 2.1.21 → 2.1.23

package/build/ftds-combobox.d.ts

@@ -14,6 +14,7 @@ export declare class FtdsCombobox extends FtdsBaseCombobox<string> implements Ft
     private commit;
     resetCombobox(): void;
     protected updated(changedProperties: PropertyValues): void;
+    private computeNewSuggestionFromProvider;
     isSuggestionSelected(value: string): boolean;
     onType(e: Event): Promise<void>;
     render(): TemplateResult;

package/build/ftds-combobox.js

@@ -58,12 +58,28 @@ export class FtdsCombobox extends FtdsBaseCombobox {
         super.updated(changedProperties);
         if (changedProperties.has("value")) {
             const previous = (_a = (changedProperties.get("value"))) !== null && _a !== void 0 ? _a : "";
-            const hasValueChanged = this.value !== previous && !this.isOpen && this.inputValue === previous;
+            const hasValueChanged = this.value !== previous && !this.isOpen && this.inputValue === this.previousCommittedLabel;
             if (hasValueChanged) {
-                this.inputValue = this.value;
+                this.computeNewSuggestionFromProvider(this.value)
+                    .then((suggestion) => {
+                    this.value = suggestion.value;
+                    this.inputValue = suggestion.label;
+                    this.previousCommittedLabel = suggestion.label;
+                });
             }
         }
     }
+    async computeNewSuggestionFromProvider(value) {
+        const suggestions = await this.suggestionsProvider(value);
+        const matchingSuggestion = suggestions.find((s) => s.value === value);
+        if (matchingSuggestion) {
+            return matchingSuggestion;
+        }
+        return {
+            value: this.canOfferNewValue ? value : "",
+            label: this.canOfferNewValue ? value : "",
+        };
+    }
     isSuggestionSelected(value) {
         return value === this.value;
     }

package/build/ftds-combobox.light.js

@@ -3266,7 +3266,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
     .listbox-option[aria-selected="true"][data-active="true"] {
         background-color: color-mix(in srgb, ${U.defaultCheckedStateLayerColor} calc(${U.defaultCheckedFocusStateLayerOpacity} * 100%), transparent);
     }
-`;var xo=class extends q{constructor(){var e;super(),this.previousCommittedLabel="",this.value=(e=this.value)!==null&&e!==void 0?e:""}handleBlurStrategy(){if(this.inputValue==="")return;let e=this.filteredSuggestions.find(r=>r.label.toLowerCase()===this.inputValue.toLowerCase());e?this.commitSelection(e):this.canOfferNewValue?this.commitTypedText(this.inputValue):this.resetCombobox()}commitSelection(e){zo(e)&&(e.type===te.newValue&&(0,fn.processValidationRules)(e.value,this.newValueValidationRules).length>0||(this.commit(e.value,e.label),this.closeMenu()))}commitTypedText(e){(0,fn.processValidationRules)(e,this.newValueValidationRules).length>0||this.commit(e,e)}commit(e,r){this.value=e,this.inputValue=r,this.previousCommittedLabel=r,this.dispatchEvent(new un(e))}resetCombobox(){this.inputValue=this.previousCommittedLabel}updated(e){var r;if(super.updated(e),e.has("value")){let n=(r=e.get("value"))!==null&&r!==void 0?r:"";this.value!==n&&!this.isOpen&&this.inputValue===n&&(this.inputValue=this.value)}}isSuggestionSelected(e){return e===this.value}async onType(e){await super.onType(e),this.inputValue===""&&this.value!==""&&(this.previousCommittedLabel="",this.value="",this.dispatchEvent(new un("")))}render(){return Os.html`
+`;var xo=class extends q{constructor(){var e;super(),this.previousCommittedLabel="",this.value=(e=this.value)!==null&&e!==void 0?e:""}handleBlurStrategy(){if(this.inputValue==="")return;let e=this.filteredSuggestions.find(r=>r.label.toLowerCase()===this.inputValue.toLowerCase());e?this.commitSelection(e):this.canOfferNewValue?this.commitTypedText(this.inputValue):this.resetCombobox()}commitSelection(e){zo(e)&&(e.type===te.newValue&&(0,fn.processValidationRules)(e.value,this.newValueValidationRules).length>0||(this.commit(e.value,e.label),this.closeMenu()))}commitTypedText(e){(0,fn.processValidationRules)(e,this.newValueValidationRules).length>0||this.commit(e,e)}commit(e,r){this.value=e,this.inputValue=r,this.previousCommittedLabel=r,this.dispatchEvent(new un(e))}resetCombobox(){this.inputValue=this.previousCommittedLabel}updated(e){var r;if(super.updated(e),e.has("value")){let n=(r=e.get("value"))!==null&&r!==void 0?r:"";this.value!==n&&!this.isOpen&&this.inputValue===this.previousCommittedLabel&&this.computeNewSuggestionFromProvider(this.value).then(i=>{this.value=i.value,this.inputValue=i.label,this.previousCommittedLabel=i.label})}}async computeNewSuggestionFromProvider(e){let n=(await this.suggestionsProvider(e)).find(a=>a.value===e);return n||{value:this.canOfferNewValue?e:"",label:this.canOfferNewValue?e:""}}isSuggestionSelected(e){return e===this.value}async onType(e){await super.onType(e),this.inputValue===""&&this.value!==""&&(this.previousCommittedLabel="",this.value="",this.dispatchEvent(new un("")))}render(){return Os.html`
             ${this.renderField()}
             ${this.renderListboxContainer(!1)}
         `}renderSuggestionItem(e){return Os.html`

package/build/ftds-combobox.min.js

@@ -3346,7 +3346,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
     .listbox-option[aria-selected="true"][data-active="true"] {
         background-color: color-mix(in srgb, ${G.defaultCheckedStateLayerColor} calc(${G.defaultCheckedFocusStateLayerOpacity} * 100%), transparent);
     }
-`;var $o=class extends de{constructor(){var e;super(),this.previousCommittedLabel="",this.value=(e=this.value)!==null&&e!==void 0?e:""}handleBlurStrategy(){if(this.inputValue==="")return;let e=this.filteredSuggestions.find(r=>r.label.toLowerCase()===this.inputValue.toLowerCase());e?this.commitSelection(e):this.canOfferNewValue?this.commitTypedText(this.inputValue):this.resetCombobox()}commitSelection(e){vn(e)&&(e.type===he.newValue&&Rt(e.value,this.newValueValidationRules).length>0||(this.commit(e.value,e.label),this.closeMenu()))}commitTypedText(e){Rt(e,this.newValueValidationRules).length>0||this.commit(e,e)}commit(e,r){this.value=e,this.inputValue=r,this.previousCommittedLabel=r,this.dispatchEvent(new In(e))}resetCombobox(){this.inputValue=this.previousCommittedLabel}updated(e){var r;if(super.updated(e),e.has("value")){let o=(r=e.get("value"))!==null&&r!==void 0?r:"";this.value!==o&&!this.isOpen&&this.inputValue===o&&(this.inputValue=this.value)}}isSuggestionSelected(e){return e===this.value}async onType(e){await super.onType(e),this.inputValue===""&&this.value!==""&&(this.previousCommittedLabel="",this.value="",this.dispatchEvent(new In("")))}render(){return I`
+`;var $o=class extends de{constructor(){var e;super(),this.previousCommittedLabel="",this.value=(e=this.value)!==null&&e!==void 0?e:""}handleBlurStrategy(){if(this.inputValue==="")return;let e=this.filteredSuggestions.find(r=>r.label.toLowerCase()===this.inputValue.toLowerCase());e?this.commitSelection(e):this.canOfferNewValue?this.commitTypedText(this.inputValue):this.resetCombobox()}commitSelection(e){vn(e)&&(e.type===he.newValue&&Rt(e.value,this.newValueValidationRules).length>0||(this.commit(e.value,e.label),this.closeMenu()))}commitTypedText(e){Rt(e,this.newValueValidationRules).length>0||this.commit(e,e)}commit(e,r){this.value=e,this.inputValue=r,this.previousCommittedLabel=r,this.dispatchEvent(new In(e))}resetCombobox(){this.inputValue=this.previousCommittedLabel}updated(e){var r;if(super.updated(e),e.has("value")){let o=(r=e.get("value"))!==null&&r!==void 0?r:"";this.value!==o&&!this.isOpen&&this.inputValue===this.previousCommittedLabel&&this.computeNewSuggestionFromProvider(this.value).then(i=>{this.value=i.value,this.inputValue=i.label,this.previousCommittedLabel=i.label})}}async computeNewSuggestionFromProvider(e){let o=(await this.suggestionsProvider(e)).find(a=>a.value===e);return o||{value:this.canOfferNewValue?e:"",label:this.canOfferNewValue?e:""}}isSuggestionSelected(e){return e===this.value}async onType(e){await super.onType(e),this.inputValue===""&&this.value!==""&&(this.previousCommittedLabel="",this.value="",this.dispatchEvent(new In("")))}render(){return I`
             ${this.renderField()}
             ${this.renderListboxContainer(!1)}
         `}renderSuggestionItem(e){return I`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ftds-combobox",
-    "version": "2.1.21",
+    "version": "2.1.23",
     "description": "Single-select combobox for the Fluid Topics Design System",
     "keywords": [
         "Lit"
@@ -20,17 +20,17 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "3.5.1",
-        "@fluid-topics/ft-i18n": "2.1.21",
-        "@fluid-topics/ft-wc-utils": "2.1.21",
-        "@fluid-topics/ftds-base-input": "2.1.21",
-        "@fluid-topics/ftds-chip-group": "2.1.21",
-        "@fluid-topics/ftds-icon": "2.1.21",
-        "@fluid-topics/ftds-notice": "2.1.21",
-        "@fluid-topics/ftds-typography": "2.1.21",
+        "@fluid-topics/ft-i18n": "2.1.23",
+        "@fluid-topics/ft-wc-utils": "2.1.23",
+        "@fluid-topics/ftds-base-input": "2.1.23",
+        "@fluid-topics/ftds-chip-group": "2.1.23",
+        "@fluid-topics/ftds-icon": "2.1.23",
+        "@fluid-topics/ftds-notice": "2.1.23",
+        "@fluid-topics/ftds-typography": "2.1.23",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "2.1.21"
+        "@fluid-topics/ft-wc-test-utils": "2.1.23"
     },
-    "gitHead": "a0f619df74c0665183d73df09e75b1eddc2a2a1f"
+    "gitHead": "e3ca12cf64b1a6af677ff8eb408b8dd3e85797f3"
 }