@descope/web-components-ui 3.13.2 → 3.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "3.13.2",
+  "version": "3.14.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -52,10 +52,10 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "rollup-replace-plugin": "3.13.2",
-    "test-drivers": "3.13.2",
-    "webpack-extract-font-loader": "3.13.2",
-    "webpack-replace-plugin": "3.13.2"
+    "test-drivers": "3.14.0",
+    "webpack-extract-font-loader": "3.14.0",
+    "webpack-replace-plugin": "3.14.0",
+    "rollup-replace-plugin": "3.14.0"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -79,40 +79,41 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "3.13.2",
-    "@descope-ui/descope-address-field": "3.13.2",
-    "@descope-ui/descope-apps-list": "3.13.2",
-    "@descope-ui/descope-country-subdivision-city-field": "3.13.2",
-    "@descope-ui/descope-autocomplete-field": "3.13.2",
-    "@descope-ui/descope-avatar": "3.13.2",
-    "@descope-ui/descope-badge": "3.13.2",
-    "@descope-ui/descope-button": "3.13.2",
-    "@descope-ui/descope-collapsible-container": "3.13.2",
-    "@descope-ui/descope-combo-box": "3.13.2",
-    "@descope-ui/descope-enriched-text": "3.13.2",
-    "@descope-ui/descope-icon": "3.13.2",
-    "@descope-ui/descope-image": "3.13.2",
-    "@descope-ui/descope-link": "3.13.2",
-    "@descope-ui/descope-list": "3.13.2",
-    "@descope-ui/descope-list-item": "3.13.2",
-    "@descope-ui/descope-month-day-field": "3.13.2",
-    "@descope-ui/descope-month-day-field-picker": "3.13.2",
-    "@descope-ui/descope-multi-line-mappings": "3.13.2",
-    "@descope-ui/descope-multi-select-combo-box": "3.13.2",
-    "@descope-ui/descope-outbound-app-button": "3.13.2",
-    "@descope-ui/descope-outbound-apps": "3.13.2",
-    "@descope-ui/descope-password-strength": "3.13.2",
-    "@descope-ui/descope-recovery-codes": "3.13.2",
-    "@descope-ui/descope-text": "3.13.2",
-    "@descope-ui/descope-ponyhot": "3.13.2",
-    "@descope-ui/descope-timer-button": "3.13.2",
-    "@descope-ui/descope-tooltip": "3.13.2",
-    "@descope-ui/descope-trusted-devices": "3.13.2",
-    "@descope-ui/descope-attachment": "3.13.2",
-    "@descope-ui/descope-timer": "3.13.2",
-    "@descope-ui/descope-user-passkeys": "3.13.2",
-    "@descope-ui/descope-anchored": "3.13.2",
-    "@descope-ui/descope-text-field": "3.13.2"
+    "@descope-ui/common": "3.14.0",
+    "@descope-ui/descope-address-field": "3.14.0",
+    "@descope-ui/descope-country-subdivision-city-field": "3.14.0",
+    "@descope-ui/descope-apps-list": "3.14.0",
+    "@descope-ui/descope-autocomplete-field": "3.14.0",
+    "@descope-ui/descope-badge": "3.14.0",
+    "@descope-ui/descope-avatar": "3.14.0",
+    "@descope-ui/descope-button": "3.14.0",
+    "@descope-ui/descope-collapsible-container": "3.14.0",
+    "@descope-ui/descope-combo-box": "3.14.0",
+    "@descope-ui/descope-image": "3.14.0",
+    "@descope-ui/descope-link": "3.14.0",
+    "@descope-ui/descope-list": "3.14.0",
+    "@descope-ui/descope-list-item": "3.14.0",
+    "@descope-ui/descope-month-day-field-picker": "3.14.0",
+    "@descope-ui/descope-month-day-field": "3.14.0",
+    "@descope-ui/descope-multi-line-mappings": "3.14.0",
+    "@descope-ui/descope-multi-select-combo-box": "3.14.0",
+    "@descope-ui/descope-outbound-app-button": "3.14.0",
+    "@descope-ui/descope-outbound-apps": "3.14.0",
+    "@descope-ui/descope-password-strength": "3.14.0",
+    "@descope-ui/descope-ponyhot": "3.14.0",
+    "@descope-ui/descope-recovery-codes": "3.14.0",
+    "@descope-ui/descope-text": "3.14.0",
+    "@descope-ui/descope-text-field": "3.14.0",
+    "@descope-ui/descope-timer-button": "3.14.0",
+    "@descope-ui/descope-timer": "3.14.0",
+    "@descope-ui/descope-tooltip": "3.14.0",
+    "@descope-ui/descope-multi-sso": "3.14.0",
+    "@descope-ui/descope-trusted-devices": "3.14.0",
+    "@descope-ui/descope-attachment": "3.14.0",
+    "@descope-ui/descope-user-passkeys": "3.14.0",
+    "@descope-ui/descope-enriched-text": "3.14.0",
+    "@descope-ui/descope-anchored": "3.14.0",
+    "@descope-ui/descope-icon": "3.14.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js

@@ -44,6 +44,12 @@ const customMixin = (superclass) =>
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
+      // On every input, Vaadin writes its value back into the input element,
+      // which re-runs the internal `value` setter and overwrites the combo box
+      // and phone fields. PhoneFieldInternal manages those inputs itself, so
+      // disable Vaadin's write-back.
+      this.baseElement._forwardInputValue = () => {};
+
       this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -135,6 +135,14 @@ class PhoneFieldInternal extends BaseInputClass {
   }
 
   set value(val) {
+    this.#onValueChange(val);
+  }
+
+  // Handles programmatic value changes only (e.g. `component.value = '...'`).
+  // User edits of the inner inputs are handled by #onTextFieldChange /
+  // #onComboBoxChange — Vaadin's value write-back is disabled in PhoneFieldClass
+  // so it no longer routes inner edits through this setter.
+  #onValueChange(val) {
     // reject empty or digit-free values
     if (!val || !/\d/.test(val)) {
       this.#clearValue();
@@ -267,22 +275,37 @@ class PhoneFieldInternal extends BaseInputClass {
   }
 
   #initInputs() {
-    // Sanitize phone input value to filter everything but digits
-    this.textField.addEventListener('input', (e) => {
-      if (!this.allowAlphanumericInput) {
-        const telDigitsRegExp = /^\d$/;
-        const sanitizedInput = e.target.value
-          .split('')
-          .filter((char) => telDigitsRegExp.test(char))
-          .join('');
-        e.target.value = sanitizedInput;
-      }
-    });
+    // Handle each inner input on its own: the phone field updates the national
+    // number, the combo box updates the country/dial code. Neither rewrites the
+    // other, so editing one input never clears the other.
+    this.textField.addEventListener('input', this.#onTextFieldChange.bind(this));
+    this.comboBox.addEventListener('change', this.#onComboBoxChange.bind(this));
 
     this.handleFocusEventsDispatching(this.inputs);
     this.handleInputEventDispatching();
   }
 
+  // user edited the phone number: sanitize and (optionally) format it, leaving
+  // the country code untouched
+  #onTextFieldChange() {
+    const sanitized = this.allowAlphanumericInput
+      ? this.textField.value
+      : this.textField.value.replace(/\D+/g, '');
+
+    this.textField.value = this.isFormatValue ? this.#formatNationalNumber(sanitized) : sanitized;
+  }
+
+  // user changed the country: re-format the existing national number for the
+  // new country, leaving the phone number digits untouched
+  #onComboBoxChange() {
+    if (!this.isFormatValue) {
+      return;
+    }
+
+    const nationalNumber = this.textField.value.replace(/\D+/g, '');
+    this.textField.value = this.#formatNationalNumber(nationalNumber);
+  }
+
   #formatNationalNumber(nationalNumber = '') {
     // re-initialize AsYouType if country code is outdated
     if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {

package/src/theme/components/index.js

@@ -22,6 +22,7 @@ import * as recoveryCodes from '@descope-ui/descope-recovery-codes/theme';
 import * as outboundApps from '@descope-ui/descope-outbound-apps/theme';
 import * as outboundAppButton from '@descope-ui/descope-outbound-app-button/theme';
 import * as trustedDevices from '@descope-ui/descope-trusted-devices/theme';
+import * as multiSso from '@descope-ui/descope-multi-sso/theme';
 import * as tooltip from '@descope-ui/descope-tooltip/theme';
 import * as countrySubdivisionCityField from '@descope-ui/descope-country-subdivision-city-field/theme';
 import * as attachment from '@descope-ui/descope-attachment/theme';
@@ -142,6 +143,7 @@ const components = {
   outboundApps,
   outboundAppButton,
   trustedDevices,
+  multiSso,
   tooltip,
   attachment,
   userPasskeys,