@descope/web-components-ui 3.22.3 → 3.23.0

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/descope/web-components-ui.git",
     "directory": "packages/web-components/web-components-ui"
   },
-  "version": "3.22.3",
+  "version": "3.23.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -57,11 +57,11 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "eslint-plugin-no-bare-class-import": "3.22.3",
-    "test-drivers": "3.22.3",
-    "webpack-extract-font-loader": "3.22.3",
-    "webpack-replace-plugin": "3.22.3",
-    "rollup-replace-plugin": "3.22.3"
+    "eslint-plugin-no-bare-class-import": "3.23.0",
+    "test-drivers": "3.23.0",
+    "webpack-extract-font-loader": "3.23.0",
+    "webpack-replace-plugin": "3.23.0",
+    "rollup-replace-plugin": "3.23.0"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -85,42 +85,43 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "3.22.3",
-    "@descope-ui/descope-address-field": "3.22.3",
-    "@descope-ui/descope-country-subdivision-city-field": "3.22.3",
-    "@descope-ui/descope-apps-list": "3.22.3",
-    "@descope-ui/descope-autocomplete-field": "3.22.3",
-    "@descope-ui/descope-avatar": "3.22.3",
-    "@descope-ui/descope-collapsible-container": "3.22.3",
-    "@descope-ui/descope-combo-box": "3.22.3",
-    "@descope-ui/descope-enriched-text": "3.22.3",
-    "@descope-ui/descope-icon": "3.22.3",
-    "@descope-ui/descope-image": "3.22.3",
-    "@descope-ui/descope-link": "3.22.3",
-    "@descope-ui/descope-badge": "3.22.3",
-    "@descope-ui/descope-button": "3.22.3",
-    "@descope-ui/descope-list": "3.22.3",
-    "@descope-ui/descope-month-day-field-picker": "3.22.3",
-    "@descope-ui/descope-multi-line-mappings": "3.22.3",
-    "@descope-ui/descope-multi-select-combo-box": "3.22.3",
-    "@descope-ui/descope-outbound-app-button": "3.22.3",
-    "@descope-ui/descope-outbound-apps": "3.22.3",
-    "@descope-ui/descope-password-strength": "3.22.3",
-    "@descope-ui/descope-ponyhot": "3.22.3",
-    "@descope-ui/descope-recovery-codes": "3.22.3",
-    "@descope-ui/descope-text": "3.22.3",
-    "@descope-ui/descope-text-field": "3.22.3",
-    "@descope-ui/descope-timer": "3.22.3",
-    "@descope-ui/descope-multi-sso": "3.22.3",
-    "@descope-ui/descope-trusted-devices": "3.22.3",
-    "@descope-ui/descope-anchored": "3.22.3",
-    "@descope-ui/descope-timer-button": "3.22.3",
-    "@descope-ui/descope-tooltip": "3.22.3",
-    "@descope-ui/descope-user-passkeys": "3.22.3",
-    "@descope-ui/descope-filter": "3.22.3",
-    "@descope-ui/descope-list-item": "3.22.3",
-    "@descope-ui/descope-month-day-field": "3.22.3",
-    "@descope-ui/descope-attachment": "3.22.3"
+    "@descope-ui/common": "3.23.0",
+    "@descope-ui/descope-active-sessions": "3.23.0",
+    "@descope-ui/descope-apps-list": "3.23.0",
+    "@descope-ui/descope-autocomplete-field": "3.23.0",
+    "@descope-ui/descope-avatar": "3.23.0",
+    "@descope-ui/descope-badge": "3.23.0",
+    "@descope-ui/descope-address-field": "3.23.0",
+    "@descope-ui/descope-collapsible-container": "3.23.0",
+    "@descope-ui/descope-button": "3.23.0",
+    "@descope-ui/descope-combo-box": "3.23.0",
+    "@descope-ui/descope-country-subdivision-city-field": "3.23.0",
+    "@descope-ui/descope-enriched-text": "3.23.0",
+    "@descope-ui/descope-icon": "3.23.0",
+    "@descope-ui/descope-link": "3.23.0",
+    "@descope-ui/descope-list": "3.23.0",
+    "@descope-ui/descope-image": "3.23.0",
+    "@descope-ui/descope-month-day-field": "3.23.0",
+    "@descope-ui/descope-month-day-field-picker": "3.23.0",
+    "@descope-ui/descope-multi-line-mappings": "3.23.0",
+    "@descope-ui/descope-multi-select-combo-box": "3.23.0",
+    "@descope-ui/descope-outbound-app-button": "3.23.0",
+    "@descope-ui/descope-outbound-apps": "3.23.0",
+    "@descope-ui/descope-password-strength": "3.23.0",
+    "@descope-ui/descope-ponyhot": "3.23.0",
+    "@descope-ui/descope-recovery-codes": "3.23.0",
+    "@descope-ui/descope-text-field": "3.23.0",
+    "@descope-ui/descope-timer": "3.23.0",
+    "@descope-ui/descope-timer-button": "3.23.0",
+    "@descope-ui/descope-tooltip": "3.23.0",
+    "@descope-ui/descope-multi-sso": "3.23.0",
+    "@descope-ui/descope-trusted-devices": "3.23.0",
+    "@descope-ui/descope-attachment": "3.23.0",
+    "@descope-ui/descope-anchored": "3.23.0",
+    "@descope-ui/descope-user-passkeys": "3.23.0",
+    "@descope-ui/descope-filter": "3.23.0",
+    "@descope-ui/descope-list-item": "3.23.0",
+    "@descope-ui/descope-text": "3.23.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/helpers/componentHelpers.js

@@ -67,6 +67,40 @@ export const syncAttrs = (ele1, ele2, options) => {
   observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
 };
 
+// A custom element has no shadow root on the first tick, so anything reaching into one has to
+// wait for it. Takes a function rather than the element, because the element itself is often not
+// there yet either.
+//
+// On giving up it resolves the element it was given, not a shadow root. `portalMixin` relies on
+// that to carry on with something usable, so a caller that cannot use the element must check what
+// it got back.
+export const waitForShadowRoot = (getRootElementFn) => async (that) => {
+  const ele = await getRootElementFn(that);
+
+  return new Promise((res) => {
+    const MAX_RETRIES = 20;
+    let counter = 0;
+
+    const check = () => {
+      if (counter > MAX_RETRIES) {
+        // eslint-disable-next-line no-console
+        console.error('could not get shadow root for element', ele);
+        res(ele);
+        return;
+      }
+
+      counter++;
+
+      if (!ele?.shadowRoot) {
+        setTimeout(check);
+      } else {
+        res(ele.shadowRoot);
+      }
+    };
+    check();
+  });
+};
+
 export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;

package/src/mixins/createStyleMixin/index.js

@@ -1,6 +1,6 @@
 import { injectStyle } from '@descope-ui/common/components-helpers';
 import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../constants';
-import { kebabCaseJoin } from '../../helpers';
+import { isFunction, kebabCaseJoin } from '../../helpers';
 import { getCssVarName, observeAttributes } from '../../helpers/componentHelpers';
 import { componentsThemeManager } from '../../helpers/themeHelpers';
 import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
@@ -8,7 +8,7 @@ import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
 export const createStyleMixin =
-  ({ mappings = {}, componentNameOverride = '' }) =>
+  ({ mappings = {}, componentNameOverride = '', style = '' }) =>
   (superclass) => {
     const componentName = componentNameOverride || superclass.componentName;
 
@@ -130,6 +130,14 @@ export const createStyleMixin =
         }
       }
 
+      // Rules the component needs wherever this mixin writes, which for a portal is a shadow root
+      // it does not own. Prepended after the mapping rules so those still win: the mapping is the
+      // themeable half, this is the structure underneath it.
+      #createStaticStyle() {
+        const css = isFunction(style) ? style() : style;
+        if (css) injectStyle(css, this.#rootElement, { prepend: true });
+      }
+
       #addClassName(className) {
         (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
       }
@@ -142,6 +150,7 @@ export const createStyleMixin =
           this.#addClassName(componentName);
 
           this.#createMappingStyle();
+          this.#createStaticStyle();
           this.#createComponentTheme();
           this.#createOverridesStyle();
 

package/src/mixins/portalMixin.js

@@ -1,5 +1,5 @@
-import { kebabCaseJoin } from '../helpers';
-import { forwardAttrs } from '../helpers/componentHelpers';
+import { isFunction, kebabCaseJoin } from '../helpers';
+import { forwardAttrs, waitForShadowRoot } from '../helpers/componentHelpers';
 import { createStyleMixin } from './createStyleMixin';
 import { createCssVarsList } from './createStyleMixin/helpers';
 
@@ -12,40 +12,31 @@ const DISPLAY_NAME_SEPARATOR = '_';
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
-const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
-  const ele = await getRootElementFn(that);
-
-  return new Promise((res) => {
-    const MAX_RETRIES = 20;
-    let counter = 0;
-
-    const check = () => {
-      if (counter > MAX_RETRIES) {
-        // eslint-disable-next-line no-console
-        console.error('could not get shadow root for element', ele);
-        res(ele);
-        return;
-      }
-
-      counter++;
-
-      if (!ele?.shadowRoot) {
-        setTimeout(check);
-      } else {
-        res(ele.shadowRoot);
-      }
-    };
-    check();
-  });
-};
-
 export const portalMixin =
-  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
+  ({
+    name,
+    selector,
+    mappings = {},
+    // Static css for the portal's own root, for rules that should not become themeable knobs.
+    style = '',
+    // `false` forwards nothing to the portal element. It needs its own value because an empty
+    // `attributes` list already means "no filter", so it forwards everything rather than nothing.
+    // Forwarding is wrong for a portal whose element is not a copy of the host, where attributes
+    // like `data` or `label` would land somewhere that does not expect them.
+    forward = {},
+  }) =>
   (superclass) => {
+    // A function selector has no text to derive a name from, and an empty one would quietly
+    // produce empty css var names, so say so instead.
+    if (isFunction(selector) && !name) {
+      throw new Error('portalMixin: a function selector requires a name');
+    }
+
     const eleDisplayName = name || sanitizeSelector(selector);
 
     const BaseClass = createStyleMixin({
       mappings,
+      style,
     })(superclass);
 
     return class PortalMixinClass extends BaseClass {
@@ -73,11 +64,16 @@ export const portalMixin =
 
           // 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 baseEleShadowRoot = await waitForShadowRoot(() => baseEle)(that);
+
+          // a string selector only reaches inside that one shadow root. a portal that sits deeper
+          // takes a function instead, which receives the root and may await its own way down.
+          return isFunction(selector)
+            ? selector(baseEleShadowRoot)
+            : baseEleShadowRoot.querySelector(selector);
         };
 
-        const getPortalElement = withWaitForShadowRoot(getRootElement);
+        const getPortalElement = waitForShadowRoot(getRootElement);
 
         super({
           getRootElement: getPortalElement,
@@ -108,9 +104,12 @@ export const portalMixin =
         // 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,
-        });
+        if (forward !== false) {
+          const { attributes = [], include = true } = forward;
+          forwardAttrs(this, portalEle, {
+            [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
+          });
+        }
 
         this.#handleHoverAttribute();
       }

package/src/theme/components/index.js

@@ -19,6 +19,7 @@ import * as timerButton from '@descope-ui/descope-timer-button/theme';
 import * as passwordStrength from '@descope-ui/descope-password-strength/theme';
 import * as collapsibleContainer from '@descope-ui/descope-collapsible-container/theme';
 import * as recoveryCodes from '@descope-ui/descope-recovery-codes/theme';
+import * as activeSessions from '@descope-ui/descope-active-sessions/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';
@@ -140,6 +141,7 @@ const components = {
   passwordStrength,
   collapsibleContainer,
   recoveryCodes,
+  activeSessions,
   hcaptcha,
   outboundApps,
   outboundAppButton,