@descope/web-components-ui 3.1.3 → 3.1.5

package/dist/cjs/index.cjs.js

@@ -8965,10 +8965,14 @@ const subdivisionItem = ({ name, state_code, translations, lang }) => {
   return `<div data-id="${escapedStateCode}" data-name="${escapedSearchTerms}" data-label="${escapedLabel}">${escapedLabel}</div>`;
 };
 
-const cityItem = ({ name }) => {
+const cityItem = ({ name, translations, lang }) => {
+  const displayName = resolveTranslation({ name, translations }, lang);
+  const searchTerms = [displayName];
+  if (displayName !== name) searchTerms.push(name);
   const escapedId = escapeHtml(name);
-  const escapedName = escapeHtml(name);
-  return `<div data-id="${escapedId}" data-name="${escapedName}">${escapedName}</div>`;
+  const escapedSearchTerms = escapeHtml(searchTerms.join(' '));
+  const escapedLabel = escapeHtml(displayName);
+  return `<div data-id="${escapedId}" data-name="${escapedSearchTerms}" data-label="${escapedLabel}">${escapedLabel}</div>`;
 };
 
 const comboBoxHTML = (id) =>
@@ -9028,6 +9032,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
   #countriesMap = new Map();
   #cachedCountries = null;
   #cachedSubdivisions = null;
+  #cachedCities = null;
   #labels = null;
 
   // Value requested programmatically before data has loaded.
@@ -9074,8 +9079,8 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
     const lang = this.getAttribute('lang') || undefined;
     if (!lang) return undefined;
     try {
-      Intl.getCanonicalLocales(lang);
-      return lang;
+      const [canonical] = Intl.getCanonicalLocales(lang);
+      return canonical;
     } catch {
       return undefined; // invalid BCP47 tag — fall back to English
     }
@@ -9258,8 +9263,11 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
 
   #setupValueTransform() {
     // Display only the item name in the input, while data-name includes ISO codes for search
-    [this.#countryComboBox, this.#subdivisionComboBox].forEach((combo) => {
-       
+    [
+      this.#countryComboBox,
+      this.#subdivisionComboBox,
+      this.#cityComboBox,
+    ].forEach((combo) => {
       combo.customValueTransformFn = (val) => {
         const item = combo.baseElement?.items?.find(
           (i) => i['data-name'] === val,
@@ -9404,7 +9412,11 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
     if (cities) {
       this.#cityVisible = cities.length > 0;
       if (cities.length > 0) {
-        this.#cityComboBox.data = cities;
+        this.#cachedCities = cities;
+        this.#cityComboBox.data = cities.map((c) => ({
+          ...c,
+          lang: this.#lang,
+        }));
         if (pendingCity) toSelect.push([this.#cityComboBox, pendingCity]);
       }
     }
@@ -9515,7 +9527,6 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       if (!this.#pendingValue && this.#defaultCountry)
         this.#onCountrySelected(this.#defaultCountry);
     } catch (e) {
-       
       console.error(`[${componentName$V}] Failed to load countries`, e);
     } finally {
       this.#countryComboBox.removeAttribute('loading');
@@ -9540,7 +9551,6 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
         this.#loadCities(countryIso2);
       }
     } catch (e) {
-       
       console.error(
         `[${componentName$V}] Failed to load subdivisions for ${countryIso2}`,
         e,
@@ -9562,10 +9572,13 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       this.#cityVisible = cities.length > 0;
       this.#refreshState();
       if (cities.length > 0) {
-        this.#cityComboBox.data = cities;
+        this.#cachedCities = cities;
+        this.#cityComboBox.data = cities.map((c) => ({
+          ...c,
+          lang: this.#lang,
+        }));
       }
     } catch (e) {
-       
       console.error(
         `[${componentName$V}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
         e,
@@ -9590,6 +9603,14 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       if (prevSubdivision)
         this.#selectItemById(this.#subdivisionComboBox, prevSubdivision);
     }
+    if (this.#cachedCities && this.#cityVisible) {
+      const prevCity = this.#cityComboBox.value;
+      this.#cityComboBox.data = this.#cachedCities.map((c) => ({
+        ...c,
+        lang: this.#lang,
+      }));
+      if (prevCity) this.#selectItemById(this.#cityComboBox, prevCity);
+    }
     // Re-apply translated subdivision type label for the new lang
     const currentIso2 = this.#countryComboBox.value;
     if (currentIso2) {
@@ -9703,6 +9724,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
   #resetCity() {
     this.#cityComboBox.value = '';
     this.#cityComboBox.data = [];
+    this.#cachedCities = null;
     this.#cityVisible = false;
     this.#refreshState();
   }