@descope-ui/common 2.2.12 → 2.2.13

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.2.13](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.12...web-components-ui-2.2.13) (2025-12-21)
+
 ## [2.2.12](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.11...web-components-ui-2.2.12) (2025-12-18)
 
 ## [2.2.11](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.10...web-components-ui-2.2.11) (2025-12-02)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "2.2.12",
+  "version": "2.2.13",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/componentsHelpers/index.js

@@ -57,6 +57,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);
@@ -108,6 +111,7 @@ export const forwardProps = (src, target, props = []) => {
 
 export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
   let style;
+
   try {
     style = new CSSStyleSheet();
   } catch (e) {
@@ -126,8 +130,10 @@ export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
     _ref.adoptedStyleSheets = adoptedStyleSheets;
   }
 
-  if(cssString && !style.cssRules[0]?.style){
-    console.warn(`No style rules were created, make sure the CSS is valid:\n "${cssString}"`)
+  if (cssString && !style.cssRules[0]?.style) {
+    console.warn(
+      `No style rules were created, make sure the CSS is valid:\n "${cssString}"`,
+    );
   }
 
   return style;

package/src/componentsMixins/mixins/createStyleMixin/index.js

@@ -102,7 +102,7 @@ export const createStyleMixin =
         if (this.#styleAttributes.length) {
           let classSpecifier = createClassSelectorSpecifier(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY
+            CSS_SELECTOR_SPECIFIER_MULTIPLY,
           );
           const elementId = this.getAttribute('id');
           if (elementId) {
@@ -111,11 +111,13 @@ export const createStyleMixin =
             classSpecifier += `#${CSS.escape(elementId)}`;
           }
 
-          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
+          this.#overrideStyleEle = injectStyle(
+            `:host(${classSpecifier}) {}`,
+            this.#rootElement,
+          );
         }
       }
 
-
       #setAttrOverride(attrName, value) {
         const style = this.#overrideStyleEle.cssRules[0].style;
 
@@ -154,14 +156,16 @@ export const createStyleMixin =
       }
 
       #addClassName(className) {
-        (this.#rootElement.classList || this.#rootElement.host.classList).add(
-          className,
-        );
+        (
+          this.#rootElement?.classList ||
+          this.#rootElement?.host?.classList ||
+          this.classList
+        ).add(className);
       }
 
       async init() {
         super.init?.();
-        if (this.shadowRoot.isConnected) {
+        if (this.shadowRoot?.isConnected || !this.shadowRoot) {
           this.#rootElement =
             (await this.#getRootElement?.(this)) || this.shadowRoot;
 

package/src/componentsMixins/mixins/hoverableMixin.js

@@ -3,11 +3,15 @@ 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,
-        });
+        e.target.addEventListener(
+          'mouseleave',
+          () => this.removeAttribute('hover'),
+          {
+            once: true,
+          },
+        );
       });
     }
   };

package/src/componentsMixins/mixins/portalMixin.js

@@ -9,8 +9,6 @@ import { createCssVarsList } from './createStyleMixin/helpers';
 // when the portal name is "overlay".
 // because of that, we are adding this separator that is also used as a differentiator
 const DISPLAY_NAME_SEPARATOR = '_';
-const PORTAL_THEME_PREFIX = '@';
-
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
@@ -35,6 +33,7 @@ const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
         setTimeout(check);
       } else {
         res(ele.shadowRoot);
+        return;
       }
     };
     check();
@@ -42,7 +41,12 @@ const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
 };
 
 export const portalMixin =
-  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
+  ({
+    name,
+    selector,
+    mappings = {},
+    forward: { attributes = [], include = true } = {},
+  }) =>
   (superclass) => {
     const eleDisplayName = name || sanitizeSelector(selector);
 
@@ -55,8 +59,13 @@ export const portalMixin =
         return {
           ...BaseClass.cssVarList,
           [eleDisplayName]: createCssVarsList(
-            kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName),
-            mappings
+            eleDisplayName
+              ? kebabCaseJoin(
+                  superclass.componentName,
+                  DISPLAY_NAME_SEPARATOR + eleDisplayName,
+                )
+              : superclass.componentName,
+            mappings,
           ),
         };
       }
@@ -66,14 +75,18 @@ export const portalMixin =
       constructor() {
         // we cannot use "this" before calling "super"
         const getRootElement = async (that) => {
-          const baseEle = (that.shadowRoot || that).querySelector(that.baseSelector);
-          if (!selector) {
+          const baseEle = (that.shadowRoot || that).querySelector(
+            that.baseSelector,
+          );
+          if (!selector || !that.shadowRoot) {
             return baseEle;
           }
 
           // in case we have a selector, we should first wait for the base element shadow root
           //  and then look for the internal element
-          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
+          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(
+            that,
+          );
           return baseEleShadowRoot.querySelector(selector);
         };
 
@@ -81,14 +94,22 @@ 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) => {
@@ -101,6 +122,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,