@descope/web-components-ui 2.2.2 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -50,10 +50,10 @@
     "webpack": "^5.79.0",
     "webpack-cli": "^6.0.0",
     "webpack-dev-server": "^5.0.0",
-    "rollup-replace-plugin": "2.2.2",
-    "test-drivers": "2.2.2",
-    "webpack-extract-font-loader": "2.2.2",
-    "webpack-replace-plugin": "2.2.2"
+    "rollup-replace-plugin": "2.2.4",
+    "test-drivers": "2.2.4",
+    "webpack-extract-font-loader": "2.2.4",
+    "webpack-replace-plugin": "2.2.4"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -77,29 +77,29 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "2.2.2",
-    "@descope-ui/descope-address-field": "2.2.2",
-    "@descope-ui/descope-apps-list": "2.2.2",
-    "@descope-ui/descope-autocomplete-field": "2.2.2",
-    "@descope-ui/descope-avatar": "2.2.2",
-    "@descope-ui/descope-badge": "2.2.2",
-    "@descope-ui/descope-button": "2.2.2",
-    "@descope-ui/descope-collapsible-container": "2.2.2",
-    "@descope-ui/descope-combo-box": "2.2.2",
-    "@descope-ui/descope-enriched-text": "2.2.2",
-    "@descope-ui/descope-icon": "2.2.2",
-    "@descope-ui/descope-image": "2.2.2",
-    "@descope-ui/descope-link": "2.2.2",
-    "@descope-ui/descope-list": "2.2.2",
-    "@descope-ui/descope-list-item": "2.2.2",
-    "@descope-ui/descope-outbound-app-button": "2.2.2",
-    "@descope-ui/descope-outbound-apps": "2.2.2",
-    "@descope-ui/descope-password-strength": "2.2.2",
-    "@descope-ui/descope-recovery-codes": "2.2.2",
-    "@descope-ui/descope-text": "2.2.2",
-    "@descope-ui/descope-timer": "2.2.2",
-    "@descope-ui/descope-timer-button": "2.2.2",
-    "@descope-ui/descope-trusted-devices": "2.2.2"
+    "@descope-ui/common": "2.2.4",
+    "@descope-ui/descope-address-field": "2.2.4",
+    "@descope-ui/descope-apps-list": "2.2.4",
+    "@descope-ui/descope-autocomplete-field": "2.2.4",
+    "@descope-ui/descope-avatar": "2.2.4",
+    "@descope-ui/descope-badge": "2.2.4",
+    "@descope-ui/descope-button": "2.2.4",
+    "@descope-ui/descope-collapsible-container": "2.2.4",
+    "@descope-ui/descope-combo-box": "2.2.4",
+    "@descope-ui/descope-enriched-text": "2.2.4",
+    "@descope-ui/descope-icon": "2.2.4",
+    "@descope-ui/descope-image": "2.2.4",
+    "@descope-ui/descope-link": "2.2.4",
+    "@descope-ui/descope-list": "2.2.4",
+    "@descope-ui/descope-list-item": "2.2.4",
+    "@descope-ui/descope-outbound-app-button": "2.2.4",
+    "@descope-ui/descope-outbound-apps": "2.2.4",
+    "@descope-ui/descope-password-strength": "2.2.4",
+    "@descope-ui/descope-recovery-codes": "2.2.4",
+    "@descope-ui/descope-text": "2.2.4",
+    "@descope-ui/descope-timer": "2.2.4",
+    "@descope-ui/descope-timer-button": "2.2.4",
+    "@descope-ui/descope-trusted-devices": "2.2.4"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-date-field/DateFieldClass.js

@@ -62,7 +62,7 @@ class RawDateFieldClass extends BaseInputClass {
 
   updateValue() {
     if (this.isCountersOutOfRange) {
-      this.updateEpoch('');
+      this.resetEpoch();
     } else {
       const date = formats[this.format].getDate(this.inputElement.value);
       this.updateEpoch(dateToEpoch(date, this.isUtcTime));
@@ -76,12 +76,8 @@ class RawDateFieldClass extends BaseInputClass {
     this.#dispatchInput();
   };
 
-  updateEpoch(epochOrDate) {
-    if (Number.isNaN(epochOrDate) || !epochOrDate.toString()?.length) {
-      this.epoch = '';
-    } else {
-      this.epoch = dateToEpoch(newDate(epochOrDate, this.isUtcTime), this.isUtcTime);
-    }
+  updateEpoch(epoch) {
+    this.epoch = dateToEpoch(epoch, this.isUtcTime);
   }
 
   dateCounters = [
@@ -212,14 +208,18 @@ class RawDateFieldClass extends BaseInputClass {
     let value = parseInt(val, 10);
     if (!Number.isNaN(value)) {
       this.updateEpoch(value);
-      this.updateDateCounters(newDate(value));
+      this.updateDateCounters(new Date(value));
     } else {
-      this.updateEpoch('');
+      this.resetEpoch();
       this.resetDateCounters();
       this.clearInputEle();
     }
   }
 
+  resetEpoch() {
+    this.epoch = '';
+  }
+
   get isCountersEmpty() {
     return this.dateCounters.every((dc) => dc.isEmpty);
   }
@@ -795,7 +795,7 @@ class RawDateFieldClass extends BaseInputClass {
     }
 
     try {
-      const date = this.isUtcTime ? new Date(this.epoch) : newDate(this.epoch);
+      const date = new Date(this.epoch);
 
       if (this.isUtcTime) {
         ret.month = date.getUTCMonth() + 1;

package/src/components/descope-date-field/helpers.js

@@ -47,8 +47,15 @@ export const parseDateString = (val, format) => {
 };
 
 export const dateToEpoch = (date, isUtc) => {
+  // If it's already a number (epoch), return it directly - no conversion needed
+  if (typeof date === 'number') {
+    return date;
+  }
+
   if (isUtc) {
-    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).getTime();
+    return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
   }
+
+  // Default: return epoch in local timezone
   return date.getTime();
 };

package/src/components/descope-modal/ModalClass.js

@@ -94,9 +94,13 @@ const customMixin = (superclass) =>
 export const ModalClass = compose(
   createStyleMixin({
     mappings: {
+      overlayBackdropColor: { property: () => ModalClass.cssVarList.overlay.backdropColor },
       overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
       overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
       overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
+      overlayBorderWidth: { property: () => ModalClass.cssVarList.overlay.borderWidth },
+      overlayBorderStyle: { property: () => ModalClass.cssVarList.overlay.borderStyle },
+      overlayBorderColor: { property: () => ModalClass.cssVarList.overlay.borderColor },
     },
   }),
   portalMixin({
@@ -112,6 +116,22 @@ export const ModalClass = compose(
         { selector: () => '::part(content)', property: 'background-color' },
         { selector: () => '::part(overlay)', property: 'background-color' },
       ],
+      backdropColor: {
+        selector: () => '::part(backdrop)',
+        property: 'background-color',
+      },
+      borderStyle: {
+        selector: () => '::part(content)',
+        property: 'border-style',
+      },
+      borderWidth: {
+        selector: () => '::part(content)',
+        property: 'border-width',
+      },
+      borderColor: {
+        selector: () => '::part(content)',
+        property: 'border-color',
+      },
       width: { selector: () => '::part(overlay)', property: 'width' },
       shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
     },

package/src/theme/components/modal.js

@@ -10,6 +10,7 @@ const modal = {
   [compVars.overlayBackgroundColor]: globalRefs.colors.surface.main,
   [compVars.overlayShadow]: globalRefs.shadow.wide['2xl'],
   [compVars.overlayWidth]: '540px',
+  [compVars.overlayBackdropColor]: 'hsla(214, 53%, 23%, 0.16)',
 };
 
 export default modal;