@descope-ui/common 0.0.18 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.1](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.1.0...@descope-ui/common-0.1.1) (2025-09-29)
+
+## [0.1.0](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.18...@descope-ui/common-0.1.0) (2025-09-02)
+
+
+### Features
+
+* Trusted Devices ([#697](https://github.com/descope/web-components-ui/issues/697)) ([fb2f0eb](https://github.com/descope/web-components-ui/commit/fb2f0eb6773ed624354ed9f0b97d713bb8b10fce))
+
 ## [0.0.18](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.17...@descope-ui/common-0.0.18) (2025-07-21)
 
 ## [0.0.17](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.16...@descope-ui/common-0.0.17) (2025-07-15)

package/package.json

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

package/src/componentsHelpers/index.js

@@ -1,13 +1,17 @@
 import { kebabCaseJoin } from '../utils';
 import { DESCOPE_PREFIX } from '../constants';
 
-export const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
+export const observeAttributes = (
+  ele,
+  callback,
+  { excludeAttrs = [], includeAttrs = [] },
+) => {
   // sync all attrs on init
   const filteredAttrs = Array.from(ele.attributes)
     .filter(
       (attr) =>
         !excludeAttrs.includes(attr.name) &&
-        (!includeAttrs.length || includeAttrs.includes(attr.name))
+        (!includeAttrs.length || includeAttrs.includes(attr.name)),
     )
     .map((attr) => attr.name);
 
@@ -40,24 +44,28 @@ export const observeChildren = (ele, callback) => {
     });
   });
 
-  observer.observe(ele, { childList: true, characterData: true, subtree: true });
+  observer.observe(ele, {
+    childList: true,
+    characterData: true,
+    subtree: true,
+  });
 };
 
 const createSyncAttrsCb =
   (srcEle, targetEle, mapAttrs = {}) =>
-    (attrNames) => {
-      attrNames.forEach((attrName) => {
-        const targetAttrName = mapAttrs[attrName] || attrName;
-        const srcAttrVal = srcEle.getAttribute(attrName);
-        if (srcAttrVal !== null) {
-          if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-            targetEle.setAttribute(targetAttrName, srcAttrVal);
-          }
-        } else {
-          targetEle.removeAttribute(targetAttrName);
+  (attrNames) => {
+    attrNames.forEach((attrName) => {
+      const targetAttrName = mapAttrs[attrName] || attrName;
+      const srcAttrVal = srcEle.getAttribute(attrName);
+      if (srcAttrVal !== null) {
+        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+          targetEle.setAttribute(targetAttrName, srcAttrVal);
         }
-      });
-    };
+      } else {
+        targetEle.removeAttribute(targetAttrName);
+      }
+    });
+  };
 
 export const syncAttrs = (ele1, ele2, options) => {
   observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
@@ -69,7 +77,11 @@ export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
 
 export const forwardAttrs = (source, dest, options = {}) => {
-  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
+  observeAttributes(
+    source,
+    createSyncAttrsCb(source, dest, options.mapAttrs),
+    options,
+  );
 };
 
 export const forwardProps = (src, target, props = []) => {
@@ -88,14 +100,13 @@ export const forwardProps = (src, target, props = []) => {
           },
         },
       }),
-    {}
+    {},
   );
 
   Object.defineProperties(target, config);
 };
 
 export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
-
   let style;
   try {
     style = new CSSStyleSheet();
@@ -109,14 +120,14 @@ export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
     style.replaceSync(cssString);
   }
   if (_ref) {
-    const adoptedStyleSheets = [...(_ref.adoptedStyleSheets || [])]
+    const adoptedStyleSheets = [...(_ref.adoptedStyleSheets || [])];
     adoptedStyleSheets[prepend ? 'unshift' : 'push'](style);
 
     _ref.adoptedStyleSheets = adoptedStyleSheets;
   }
 
   return style;
-}
+};
 
 // we should mimic the CSSStyleSheet API for the fns we are using
 class CSSStyleSheetMock {
@@ -127,7 +138,7 @@ class CSSStyleSheetMock {
     this.ref = ref?.shadowRoot || ref;
 
     if (!this.ref) {
-      return
+      return;
     }
 
     if (prepend) {
@@ -146,7 +157,8 @@ class CSSStyleSheetMock {
   }
 }
 
-const generateStyleTagFallback = (cssString, ref, { prepend = false } = {}) => new CSSStyleSheetMock(cssString, ref, { prepend });
+const generateStyleTagFallback = (cssString, ref, { prepend = false } = {}) =>
+  new CSSStyleSheetMock(cssString, ref, { prepend });
 
 export const limitAbbreviation = (str, limit = 2) =>
   str
@@ -154,4 +166,4 @@ export const limitAbbreviation = (str, limit = 2) =>
     .split(' ')
     .splice(0, limit)
     .map((s) => s[0]?.toUpperCase())
-    .join('');
+    .join('');

package/src/componentsMixins/mixins/createDynamicDataMixin.js

@@ -32,6 +32,7 @@ export const createDynamicDataMixin =
     slotName,
     rerenderAttrsList = [],
     targetSelector,
+    sortFn = (data) => data,
   }) =>
   (superclass) =>
     class DynamicDataMixinClass extends superclass {
@@ -62,7 +63,8 @@ export const createDynamicDataMixin =
 
       #renderItems() {
         this.#removeOldItems();
-        this.data.forEach((item, index) => {
+        const items = sortFn ? this.data.sort(sortFn) : this.data;
+        items.forEach((item, index) => {
           const content = getTemplateContent(itemRenderer(item, index, this));
           if (!this.#targetEle) return;
           this.#targetEle.appendChild(content?.cloneNode(true));

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

@@ -102,5 +102,4 @@ export const createCssVarsList = (componentName, mappings) =>
 
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
-export const createClassSelectorSpecifier = (className, numOfRepeats) =>
-  Array(numOfRepeats).fill(`.${className}`).join('');
+export const createClassSelectorSpecifier = (className, numOfRepeats) => `.${className}`.repeat(numOfRepeats);

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

@@ -100,18 +100,22 @@ export const createStyleMixin =
 
       #createOverridesStyle() {
         if (this.#styleAttributes.length) {
-          const classSpecifier = createClassSelectorSpecifier(
+          let classSpecifier = createClassSelectorSpecifier(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY,
+            CSS_SELECTOR_SPECIFIER_MULTIPLY
           );
+          const elementId = this.getAttribute('id');
+          if (elementId) {
+            // basically this is enough to make the selector more specific
+            // but just in case there is no id, we will also add the class multiple times
+            classSpecifier += `#${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;
 

package/src/constants.js

@@ -1,4 +1,4 @@
 export const DESCOPE_PREFIX = 'descope';
-export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 5;
 export const BASE_THEME_SECTION = 'host';
 export const PORTAL_THEME_PREFIX = '@';

package/src/themeHelpers/index.js

@@ -71,6 +71,15 @@ export const globalsThemeToStyle = (theme, themeName = '') => {
   return `*[data-theme="${themeName}"] {${style}}`;
 };
 
+function splitAmpersands(str) {
+  const match = str.match(/^(&+)?(.*)$/);
+  return [match[1] || "", (match[2] || "")];
+}
+
+// st attributes are also using selector multiplication
+// so we need to limit the multiplication
+const MAX_SELECTOR_MULTIPLY = 3;
+
 const componentsThemeToStyleObj = (componentsTheme) =>
   transformTheme(componentsTheme, [], (path, val) => {
     const [component, ...restPath] = path;
@@ -79,10 +88,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 
     if (property === 'undefined') {
       // eslint-disable-next-line no-console
-      console.warn(
-        componentName,
-        `theme value: "${val}" is mapped to an invalid property`,
-      );
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
     }
 
     // we need a support for portal components theme (e.g. overlay)
@@ -98,23 +104,26 @@ const componentsThemeToStyleObj = (componentsTheme) =>
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
     const attrsSelector = restPath.reduce((acc, section, idx) => {
-      if (section.startsWith('_'))
-        return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+      const [ampersands, content] = splitAmpersands(section);
+      const selectorMultiplier = Math.min(
+        ampersands.length + 1,  // if there are no & we need to multiply by 1
+        MAX_SELECTOR_MULTIPLY
+      );
+
+      if (content.startsWith('_')) return acc + `[${kebabCase(content.replace(/^_/, ''))}="true"]`.repeat(selectorMultiplier);
 
       const nextSection = restPath[idx + 1];
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+      if (typeof nextSection !== 'string' || nextSection.startsWith('_') || nextSection.startsWith('&')) {
         // eslint-disable-next-line no-console
         console.error(
           'theme generator',
-          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`,
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
         );
         return acc;
       }
 
-      return `${acc}[${kebabCase(section)}="${restPath
-        .splice(idx + 1, 1)
-        .join('')}"]`;
+      return acc + `[${kebabCase(content)}="${restPath.splice(idx + 1, 1).join('')}"]`.repeat(selectorMultiplier);
     }, '');
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;