@descope/web-components-ui 3.20.3 → 3.20.4

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/descope/web-components-ui.git",
     "directory": "packages/web-components/web-components-ui"
   },
-  "version": "3.20.3",
+  "version": "3.20.4",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -57,11 +57,11 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "eslint-plugin-no-bare-class-import": "3.20.3",
-    "rollup-replace-plugin": "3.20.3",
-    "test-drivers": "3.20.3",
-    "webpack-extract-font-loader": "3.20.3",
-    "webpack-replace-plugin": "3.20.3"
+    "rollup-replace-plugin": "3.20.4",
+    "test-drivers": "3.20.4",
+    "webpack-extract-font-loader": "3.20.4",
+    "webpack-replace-plugin": "3.20.4",
+    "eslint-plugin-no-bare-class-import": "3.20.4"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -85,42 +85,42 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "3.20.3",
-    "@descope-ui/descope-address-field": "3.20.3",
-    "@descope-ui/descope-country-subdivision-city-field": "3.20.3",
-    "@descope-ui/descope-apps-list": "3.20.3",
-    "@descope-ui/descope-avatar": "3.20.3",
-    "@descope-ui/descope-badge": "3.20.3",
-    "@descope-ui/descope-button": "3.20.3",
-    "@descope-ui/descope-collapsible-container": "3.20.3",
-    "@descope-ui/descope-combo-box": "3.20.3",
-    "@descope-ui/descope-enriched-text": "3.20.3",
-    "@descope-ui/descope-icon": "3.20.3",
-    "@descope-ui/descope-link": "3.20.3",
-    "@descope-ui/descope-list": "3.20.3",
-    "@descope-ui/descope-list-item": "3.20.3",
-    "@descope-ui/descope-image": "3.20.3",
-    "@descope-ui/descope-month-day-field-picker": "3.20.3",
-    "@descope-ui/descope-month-day-field": "3.20.3",
-    "@descope-ui/descope-multi-line-mappings": "3.20.3",
-    "@descope-ui/descope-outbound-apps": "3.20.3",
-    "@descope-ui/descope-password-strength": "3.20.3",
-    "@descope-ui/descope-text": "3.20.3",
-    "@descope-ui/descope-text-field": "3.20.3",
-    "@descope-ui/descope-timer": "3.20.3",
-    "@descope-ui/descope-autocomplete-field": "3.20.3",
-    "@descope-ui/descope-timer-button": "3.20.3",
-    "@descope-ui/descope-tooltip": "3.20.3",
-    "@descope-ui/descope-multi-sso": "3.20.3",
-    "@descope-ui/descope-trusted-devices": "3.20.3",
-    "@descope-ui/descope-anchored": "3.20.3",
-    "@descope-ui/descope-outbound-app-button": "3.20.3",
-    "@descope-ui/descope-attachment": "3.20.3",
-    "@descope-ui/descope-recovery-codes": "3.20.3",
-    "@descope-ui/descope-multi-select-combo-box": "3.20.3",
-    "@descope-ui/descope-ponyhot": "3.20.3",
-    "@descope-ui/descope-user-passkeys": "3.20.3",
-    "@descope-ui/descope-filter": "3.20.3"
+    "@descope-ui/descope-country-subdivision-city-field": "3.20.4",
+    "@descope-ui/descope-apps-list": "3.20.4",
+    "@descope-ui/descope-autocomplete-field": "3.20.4",
+    "@descope-ui/descope-avatar": "3.20.4",
+    "@descope-ui/descope-badge": "3.20.4",
+    "@descope-ui/descope-button": "3.20.4",
+    "@descope-ui/descope-combo-box": "3.20.4",
+    "@descope-ui/descope-collapsible-container": "3.20.4",
+    "@descope-ui/descope-enriched-text": "3.20.4",
+    "@descope-ui/descope-icon": "3.20.4",
+    "@descope-ui/descope-image": "3.20.4",
+    "@descope-ui/descope-link": "3.20.4",
+    "@descope-ui/descope-list": "3.20.4",
+    "@descope-ui/descope-list-item": "3.20.4",
+    "@descope-ui/descope-month-day-field": "3.20.4",
+    "@descope-ui/descope-month-day-field-picker": "3.20.4",
+    "@descope-ui/descope-multi-line-mappings": "3.20.4",
+    "@descope-ui/descope-multi-select-combo-box": "3.20.4",
+    "@descope-ui/descope-outbound-apps": "3.20.4",
+    "@descope-ui/descope-outbound-app-button": "3.20.4",
+    "@descope-ui/common": "3.20.4",
+    "@descope-ui/descope-password-strength": "3.20.4",
+    "@descope-ui/descope-address-field": "3.20.4",
+    "@descope-ui/descope-ponyhot": "3.20.4",
+    "@descope-ui/descope-recovery-codes": "3.20.4",
+    "@descope-ui/descope-text": "3.20.4",
+    "@descope-ui/descope-text-field": "3.20.4",
+    "@descope-ui/descope-timer": "3.20.4",
+    "@descope-ui/descope-timer-button": "3.20.4",
+    "@descope-ui/descope-tooltip": "3.20.4",
+    "@descope-ui/descope-multi-sso": "3.20.4",
+    "@descope-ui/descope-trusted-devices": "3.20.4",
+    "@descope-ui/descope-anchored": "3.20.4",
+    "@descope-ui/descope-attachment": "3.20.4",
+    "@descope-ui/descope-user-passkeys": "3.20.4",
+    "@descope-ui/descope-filter": "3.20.4"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-email-field/EmailFieldClass.js

@@ -8,6 +8,7 @@ import {
   externalInputMixin,
 } from '../../mixins';
 import { compose } from '../../helpers';
+import { asciiPattern, unicodePattern } from './emailPattern';
 import { getComponentName } from '../../helpers/componentHelpers';
 import {
   inputFloatingLabelStyle,
@@ -18,23 +19,70 @@ import {
 
 export const componentName = getComponentName('email-field');
 
-const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
+const defaultInputMode = 'email';
 
 const customMixin = (superclass) =>
   class EmailFieldMixinClass extends superclass {
+    // On by default - `accept-unicode="false"` restores the pre-unicode field:
+    // native `type="email"` validation and the ASCII pattern.
+    //
+    // Read once, in `init`. Changing the attribute afterwards has no effect; it
+    // is static configuration, which is how every consumer sets it.
+    get acceptsUnicode() {
+      return this.getAttribute('accept-unicode') !== 'false';
+    }
+
     init() {
       super.init?.();
 
       // we need to set the pattern on the base element because vaadin-email-field is overriding it
-      this.baseElement.setAttribute('pattern', defaultPattern);
+      this.baseElement.setAttribute('pattern', asciiPattern);
 
       if (!this.getAttribute('autocomplete')) {
         this.setAttribute('autocomplete', defaultAutocomplete);
       }
 
       this.createExternalInput();
+
+      [this.inputElement, this.externalInput].filter(Boolean).forEach((input) => {
+        input.addEventListener('change', this.stripSurroundingWhitespace);
+      });
+
+      if (this.acceptsUnicode) {
+        this.enableUnicode();
+      }
     }
+
+    enableUnicode() {
+      this.baseElement.setAttribute('pattern', unicodePattern);
+
+      // native `type="email"` validation is ASCII only and sets typeMismatch
+      // before `pattern` is consulted, so `text` is what lets the pattern decide.
+      // Through vaadin's `_setType` because `type` is a readOnly property bound
+      // to the inner input - assigning `input.type` is re-applied over.
+      this.baseElement._setType('text');
+
+      if (this.externalInput) {
+        this.externalInput.type = 'text';
+      }
+
+      // `type="text"` loses the email keyboard on mobile
+      if (!this.getAttribute('inputmode')) {
+        this.setAttribute('inputmode', defaultInputMode);
+      }
+
+      this.externalInput?.setAttribute('inputmode', defaultInputMode);
+    }
+
+    stripSurroundingWhitespace = (e) => {
+      const trimmed = e.target.value.trim();
+      if (trimmed === e.target.value) return;
+      this.value = trimmed;
+
+      // validity is cached and was computed against the untrimmed value
+      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    };
   };
 
 export const EmailFieldClass = compose(

package/src/components/descope-email-field/emailPattern.js

@@ -0,0 +1,7 @@
+// Kept in its own module (with no imports) so it can be unit tested without
+// pulling in the whole component / vaadin dependency chain.
+
+export const asciiPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
+
+export const unicodePattern =
+  "^[\\p{L}\\p{M}\\p{N}._%+'\\-]+@[\\p{L}\\p{M}\\p{N}.\\-]+\\.[\\p{L}\\p{M}][\\p{L}\\p{M}\\p{N}\\-]+$";

package/stories/descope-email-field.stories.js

@@ -34,6 +34,7 @@ const Template = ({
   'full-width': fullWidth,
   readonly,
   'external-input': externalInput,
+  'accept-unicode': acceptUnicode,
   'data-errormessage-value-missing': customErrorMissingValue,
   'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
   'label-type': labelType,
@@ -53,6 +54,7 @@ const Template = ({
       st-host-direction="${direction ?? ''}"
       label-type="${labelType || ''}"
       external-input="${externalInput || false}"
+      ${acceptUnicode === false ? 'accept-unicode="false"' : ''}
       ${errorMsgIcon ? errorMessageIconAttrs : ''}
     ></descope-email-field>
   `;
@@ -95,6 +97,11 @@ export default {
     'external-input': {
       control: { type: 'boolean' },
     },
+    'accept-unicode': {
+      control: { type: 'boolean' },
+      description:
+        'On by default. Accepts diacritics and non-Latin scripts in the local part, and unicode domains, by moving the input off native type="email" validation, which is ASCII only. Set to false to restore the ASCII-only field.',
+    },
   },
 };
 
@@ -102,6 +109,7 @@ export const Default = Template.bind({});
 
 Default.args = {
   size: 'md',
+  'accept-unicode': true,
   bordered: true,
   validateOnBlur: false,
   'data-errormessage-value-missing': 'Please fill out this field.',