@descope/web-components-ui 2.2.12 → 2.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "2.2.12",
+  "version": "2.2.14",
   "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.12",
-    "test-drivers": "2.2.12",
-    "webpack-extract-font-loader": "2.2.12",
-    "webpack-replace-plugin": "2.2.12"
+    "rollup-replace-plugin": "2.2.14",
+    "test-drivers": "2.2.14",
+    "webpack-extract-font-loader": "2.2.14",
+    "webpack-replace-plugin": "2.2.14"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -77,29 +77,30 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "2.2.12",
-    "@descope-ui/descope-address-field": "2.2.12",
-    "@descope-ui/descope-apps-list": "2.2.12",
-    "@descope-ui/descope-autocomplete-field": "2.2.12",
-    "@descope-ui/descope-avatar": "2.2.12",
-    "@descope-ui/descope-badge": "2.2.12",
-    "@descope-ui/descope-button": "2.2.12",
-    "@descope-ui/descope-collapsible-container": "2.2.12",
-    "@descope-ui/descope-combo-box": "2.2.12",
-    "@descope-ui/descope-enriched-text": "2.2.12",
-    "@descope-ui/descope-icon": "2.2.12",
-    "@descope-ui/descope-image": "2.2.12",
-    "@descope-ui/descope-link": "2.2.12",
-    "@descope-ui/descope-list": "2.2.12",
-    "@descope-ui/descope-list-item": "2.2.12",
-    "@descope-ui/descope-outbound-app-button": "2.2.12",
-    "@descope-ui/descope-outbound-apps": "2.2.12",
-    "@descope-ui/descope-password-strength": "2.2.12",
-    "@descope-ui/descope-recovery-codes": "2.2.12",
-    "@descope-ui/descope-text": "2.2.12",
-    "@descope-ui/descope-timer": "2.2.12",
-    "@descope-ui/descope-timer-button": "2.2.12",
-    "@descope-ui/descope-trusted-devices": "2.2.12"
+    "@descope-ui/common": "2.2.14",
+    "@descope-ui/descope-address-field": "2.2.14",
+    "@descope-ui/descope-apps-list": "2.2.14",
+    "@descope-ui/descope-autocomplete-field": "2.2.14",
+    "@descope-ui/descope-avatar": "2.2.14",
+    "@descope-ui/descope-badge": "2.2.14",
+    "@descope-ui/descope-button": "2.2.14",
+    "@descope-ui/descope-collapsible-container": "2.2.14",
+    "@descope-ui/descope-combo-box": "2.2.14",
+    "@descope-ui/descope-enriched-text": "2.2.14",
+    "@descope-ui/descope-icon": "2.2.14",
+    "@descope-ui/descope-image": "2.2.14",
+    "@descope-ui/descope-link": "2.2.14",
+    "@descope-ui/descope-list": "2.2.14",
+    "@descope-ui/descope-list-item": "2.2.14",
+    "@descope-ui/descope-outbound-app-button": "2.2.14",
+    "@descope-ui/descope-outbound-apps": "2.2.14",
+    "@descope-ui/descope-password-strength": "2.2.14",
+    "@descope-ui/descope-recovery-codes": "2.2.14",
+    "@descope-ui/descope-text": "2.2.14",
+    "@descope-ui/descope-timer": "2.2.14",
+    "@descope-ui/descope-timer-button": "2.2.14",
+    "@descope-ui/descope-trusted-devices": "2.2.14",
+    "@descope-ui/descope-tooltip": "2.2.14"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/helpers/componentHelpers.js

@@ -49,6 +49,9 @@ const createSyncAttrsCb =
     attrNames.forEach((attrName) => {
       const targetAttrName = mapAttrs[attrName] || attrName;
       const srcAttrVal = srcEle.getAttribute(attrName);
+
+      if (!targetEle) return;
+
       if (srcAttrVal !== null) {
         if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
           targetEle.setAttribute(targetAttrName, srcAttrVal);

package/src/mixins/createStyleMixin/index.js

@@ -137,7 +137,7 @@ export const createStyleMixin =
 
       async init() {
         super.init?.();
-        if (this.shadowRoot.isConnected) {
+        if (this.shadowRoot?.isConnected) {
           this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
 
           this.#addClassName(componentName);

package/src/mixins/hoverableMixin.js

@@ -3,7 +3,7 @@ export const hoverableMixin = (superclass) =>
     init() {
       super.init?.();
 
-      this.baseElement.addEventListener('mouseover', (e) => {
+      (this.baseElement || this).addEventListener('mouseover', (e) => {
         this.setAttribute('hover', 'true');
         e.target.addEventListener('mouseleave', () => this.removeAttribute('hover'), {
           once: true,

package/src/mixins/portalMixin.js

@@ -1,4 +1,3 @@
-import { PORTAL_THEME_PREFIX } from '../constants';
 import { kebabCaseJoin } from '../helpers';
 import { forwardAttrs } from '../helpers/componentHelpers';
 import { createStyleMixin } from './createStyleMixin';
@@ -34,6 +33,7 @@ const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
         setTimeout(check);
       } else {
         res(ele.shadowRoot);
+        return;
       }
     };
     check();
@@ -54,7 +54,9 @@ export const portalMixin =
         return {
           ...BaseClass.cssVarList,
           [eleDisplayName]: createCssVarsList(
-            kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName),
+            eleDisplayName
+              ? kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName)
+              : superclass.componentName,
             mappings
           ),
         };
@@ -66,7 +68,7 @@ export const portalMixin =
         // we cannot use "this" before calling "super"
         const getRootElement = async (that) => {
           const baseEle = (that.shadowRoot || that).querySelector(that.baseSelector);
-          if (!selector) {
+          if (!selector || !that.shadowRoot) {
             return baseEle;
           }
 
@@ -80,14 +82,18 @@ export const portalMixin =
 
         super({
           getRootElement: getPortalElement,
-          componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
-          themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
-          baseSelector: ':host',
+          componentNameSuffix: eleDisplayName && DISPLAY_NAME_SEPARATOR + eleDisplayName,
+          themeSection: eleDisplayName ? DISPLAY_NAME_SEPARATOR + eleDisplayName : undefined,
+          baseSelector: '',
         });
 
-        this.#portalEle = getPortalElement(this).then((ele) => ele.host);
+        // Defer portal element lookup to init() for React compatibility
+        // (elements created in init() won't exist during constructor)
+        this.#getPortalElement = () => getPortalElement(this).then((ele) => ele?.host || ele);
       }
 
+      #getPortalElement;
+
       async #handleHoverAttribute() {
         const portalEle = await this.#portalEle;
         portalEle.onmouseenter = (e) => {
@@ -100,6 +106,8 @@ export const portalMixin =
 
       async init() {
         super.init?.();
+        // Initialize portal element lookup here (deferred from constructor for React compatibility)
+        this.#portalEle = this.#getPortalElement();
         const portalEle = await this.#portalEle;
         forwardAttrs(this, portalEle, {
           [include ? 'includeAttrs' : 'excludeAttrs']: attributes,

package/src/theme/components/index.js

@@ -63,6 +63,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 tooltip from '@descope-ui/descope-tooltip/theme';
 
 const components = {
   button,
@@ -131,6 +132,7 @@ const components = {
   outboundApps,
   outboundAppButton,
   trustedDevices,
+  tooltip,
 };
 
 const theme = Object.keys(components).reduce(