@descope/web-components-ui 1.0.245 → 1.0.246

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -1061,10 +1061,11 @@ const DISPLAY_NAME_SEPARATOR = '_';
1061
1061
 
1062
1062
  const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
1063
1063
 
1064
- const withWaitForShadowRoot = (getRootElementFn) => (that) =>
1065
- new Promise((res) => {
1064
+ const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
1065
+ const ele = await getRootElementFn(that);
1066
+
1067
+ return new Promise((res) => {
1066
1068
  const MAX_RETRIES = 20;
1067
- const ele = getRootElementFn(that);
1068
1069
  let counter = 0;
1069
1070
 
1070
1071
  const check = () => {
@@ -1077,11 +1078,12 @@ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
1077
1078
 
1078
1079
  counter++;
1079
1080
 
1080
- if (!ele.shadowRoot) setTimeout(check);
1081
+ if (!ele?.shadowRoot) setTimeout(check);
1081
1082
  else res(ele.shadowRoot);
1082
1083
  };
1083
1084
  check();
1084
1085
  });
1086
+ };
1085
1087
 
1086
1088
  const portalMixin =
1087
1089
  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -1107,35 +1109,44 @@ const portalMixin =
1107
1109
 
1108
1110
  constructor() {
1109
1111
  // we cannot use "this" before calling "super"
1110
- const getRootElement = (that) => {
1112
+ const getRootElement = async (that) => {
1111
1113
  const baseEle = that.shadowRoot.querySelector(that.baseSelector);
1112
- const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
1114
+ if (!selector) {
1115
+ return baseEle;
1116
+ }
1113
1117
 
1114
- return portal;
1118
+ // in case we have a selector, we should first wait for the base element shadow root
1119
+ // and then look for the internal element
1120
+ const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
1121
+ return baseEleShadowRoot.querySelector(selector);
1115
1122
  };
1116
1123
 
1124
+ const getPortalElement = withWaitForShadowRoot(getRootElement);
1125
+
1117
1126
  super({
1118
- getRootElement: withWaitForShadowRoot(getRootElement),
1127
+ getRootElement: getPortalElement,
1119
1128
  componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
1120
1129
  themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
1121
1130
  baseSelector: ':host',
1122
1131
  });
1123
1132
 
1124
- this.#portalEle = getRootElement(this);
1133
+ this.#portalEle = getPortalElement(this).then((ele) => ele.host);
1125
1134
  }
1126
1135
 
1127
- #handleHoverAttribute() {
1128
- this.#portalEle.onmouseenter = (e) => {
1136
+ async #handleHoverAttribute() {
1137
+ const portalEle = await this.#portalEle;
1138
+ portalEle.onmouseenter = (e) => {
1129
1139
  e.target.setAttribute('hover', 'true');
1130
1140
  };
1131
- this.#portalEle.onmouseleave = (e) => {
1141
+ portalEle.onmouseleave = (e) => {
1132
1142
  e.target.removeAttribute('hover');
1133
1143
  };
1134
1144
  }
1135
1145
 
1136
- init() {
1146
+ async init() {
1137
1147
  super.init?.();
1138
- forwardAttrs(this, this.#portalEle, {
1148
+ const portalEle = await this.#portalEle;
1149
+ forwardAttrs(this, portalEle, {
1139
1150
  [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
1140
1151
  });
1141
1152
 
@@ -7205,7 +7216,7 @@ customElements.define(componentName$5, GridClass);
7205
7216
 
7206
7217
  const componentName$4 = getComponentName('multi-select-combo-box');
7207
7218
 
7208
- const MultiSelectComboBoxMixin = (superclass) =>
7219
+ const multiSelectComboBoxMixin = (superclass) =>
7209
7220
  class MultiSelectComboBoxMixinClass extends superclass {
7210
7221
  // eslint-disable-next-line class-methods-use-this
7211
7222
  #renderItem = ({ displayName, value, label }) => {
@@ -7628,7 +7639,7 @@ const MultiSelectComboBoxClass = compose(
7628
7639
  }),
7629
7640
  composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
7630
7641
  componentNameValidationMixin,
7631
- MultiSelectComboBoxMixin
7642
+ multiSelectComboBoxMixin
7632
7643
  )(
7633
7644
  createProxy({
7634
7645
  slots: ['', 'prefix'],