@descope/web-components-ui 1.0.245 → 1.0.246

package/dist/index.esm.js

@@ -1061,10 +1061,11 @@ const DISPLAY_NAME_SEPARATOR = '_';
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
-const withWaitForShadowRoot = (getRootElementFn) => (that) =>
-  new Promise((res) => {
+const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
+  const ele = await getRootElementFn(that);
+
+  return new Promise((res) => {
     const MAX_RETRIES = 20;
-    const ele = getRootElementFn(that);
     let counter = 0;
 
     const check = () => {
@@ -1077,11 +1078,12 @@ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
 
       counter++;
 
-      if (!ele.shadowRoot) setTimeout(check);
+      if (!ele?.shadowRoot) setTimeout(check);
       else res(ele.shadowRoot);
     };
     check();
   });
+};
 
 const portalMixin =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -1107,35 +1109,44 @@ const portalMixin =
 
       constructor() {
         // we cannot use "this" before calling "super"
-        const getRootElement = (that) => {
+        const getRootElement = async (that) => {
           const baseEle = that.shadowRoot.querySelector(that.baseSelector);
-          const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
+          if (!selector) {
+            return baseEle;
+          }
 
-          return portal;
+          // 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);
+          return baseEleShadowRoot.querySelector(selector);
         };
 
+        const getPortalElement = withWaitForShadowRoot(getRootElement);
+
         super({
-          getRootElement: withWaitForShadowRoot(getRootElement),
+          getRootElement: getPortalElement,
           componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
           themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
           baseSelector: ':host',
         });
 
-        this.#portalEle = getRootElement(this);
+        this.#portalEle = getPortalElement(this).then((ele) => ele.host);
       }
 
-      #handleHoverAttribute() {
-        this.#portalEle.onmouseenter = (e) => {
+      async #handleHoverAttribute() {
+        const portalEle = await this.#portalEle;
+        portalEle.onmouseenter = (e) => {
           e.target.setAttribute('hover', 'true');
         };
-        this.#portalEle.onmouseleave = (e) => {
+        portalEle.onmouseleave = (e) => {
           e.target.removeAttribute('hover');
         };
       }
 
-      init() {
+      async init() {
         super.init?.();
-        forwardAttrs(this, this.#portalEle, {
+        const portalEle = await this.#portalEle;
+        forwardAttrs(this, portalEle, {
           [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
         });
 
@@ -7205,7 +7216,7 @@ customElements.define(componentName$5, GridClass);
 
 const componentName$4 = getComponentName('multi-select-combo-box');
 
-const MultiSelectComboBoxMixin = (superclass) =>
+const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ displayName, value, label }) => {
@@ -7628,7 +7639,7 @@ const MultiSelectComboBoxClass = compose(
   }),
   composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
   componentNameValidationMixin,
-  MultiSelectComboBoxMixin
+  multiSelectComboBoxMixin
 )(
   createProxy({
     slots: ['', 'prefix'],