@descope-ui/common 0.0.11 → 0.0.13

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.13](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.12...@descope-ui/common-0.0.13) (2025-06-09)
+
+## [0.0.12](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.11...@descope-ui/common-0.0.12) (2025-05-28)
+
 ## [0.0.11](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.10...@descope-ui/common-0.0.11) (2025-04-29)
 
 

package/package.json

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

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

@@ -1,8 +1,19 @@
-import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../../constants';
+import {
+  BASE_THEME_SECTION,
+  CSS_SELECTOR_SPECIFIER_MULTIPLY,
+} from '../../../constants';
 import { kebabCaseJoin } from '../../../utils';
-import { getCssVarName, injectStyle, observeAttributes } from '../../../componentsHelpers';
+import {
+  getCssVarName,
+  injectStyle,
+  observeAttributes,
+} from '../../../componentsHelpers';
 import { componentsThemeManager } from '../../../themeHelpers';
-import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
+import {
+  createStyle,
+  createCssVarsList,
+  createClassSelectorSpecifier,
+} from './helpers';
 
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
@@ -54,8 +65,10 @@ export const createStyleMixin =
         this.#baseSelector = baseSelector ?? this.baseSelector;
         this.#getRootElement = getRootElement;
 
-        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
-          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+        this.#styleAttributes = Object.keys(
+          CustomStyleMixinClass.cssVarList,
+        ).map((key) =>
+          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key),
         );
       }
 
@@ -65,14 +78,23 @@ export const createStyleMixin =
       }
 
       #onComponentThemeChange() {
-        this.#themeStyleEle.replaceSync(this.#componentTheme[this.#themeSection]);
+        this.#themeStyleEle.replaceSync(
+          this.#componentTheme[this.#themeSection],
+        );
+        this.currentThemeName = componentsThemeManager.currentThemeName;
+        // `onThemeChange` - This function is a hook for the component, so it can be implemented in the component
+        // and is executed once theme is change.
+        this.onThemeChange?.(componentsThemeManager.currentThemeName);
       }
 
       #createComponentTheme() {
-        this.#themeStyleEle = injectStyle('', this.#rootElement, { prepend: true });
-        this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
-          this.#onComponentThemeChange.bind(this)
-        );
+        this.#themeStyleEle = injectStyle('', this.#rootElement, {
+          prepend: true,
+        });
+        this.#disconnectThemeManager =
+          componentsThemeManager.onCurrentThemeChange(
+            this.#onComponentThemeChange.bind(this),
+          );
         this.#onComponentThemeChange();
       }
 
@@ -80,10 +102,13 @@ export const createStyleMixin =
         if (this.#styleAttributes.length) {
           const classSpecifier = createClassSelectorSpecifier(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY
+            CSS_SELECTOR_SPECIFIER_MULTIPLY,
           );
 
-          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
+          this.#overrideStyleEle = injectStyle(
+            `:host(${classSpecifier}) {}`,
+            this.#rootElement,
+          );
         }
       }
 
@@ -94,7 +119,7 @@ export const createStyleMixin =
 
         const varName = getCssVarName(
           componentName,
-          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), ''),
         );
 
         if (value) style?.setProperty(varName, value);
@@ -117,7 +142,7 @@ export const createStyleMixin =
           const style = createStyle(
             kebabCaseJoin(componentName, this.#componentNameSuffix),
             this.#baseSelector,
-            mappings
+            mappings,
           );
 
           injectStyle(style, this.#rootElement, { prepend: true });
@@ -125,13 +150,16 @@ export const createStyleMixin =
       }
 
       #addClassName(className) {
-        (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
+        (this.#rootElement.classList || this.#rootElement.host.classList).add(
+          className,
+        );
       }
 
       async init() {
         super.init?.();
         if (this.shadowRoot.isConnected) {
-          this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
+          this.#rootElement =
+            (await this.#getRootElement?.(this)) || this.shadowRoot;
 
           this.#addClassName(componentName);
 

package/src/componentsMixins/mixins/inputEventsDispatchingMixin.js

@@ -12,7 +12,9 @@ export const inputEventsDispatchingMixin = (superclass) =>
     #blockNativeEvents() {
       ['blur', 'focus', 'focusin', 'focusout'].forEach((event) => {
         this.addEventListener(event, (e) => {
-          e.isTrusted && e.target === this && e.stopImmediatePropagation();
+          if (e.isTrusted && e.target === this) {
+            e.stopImmediatePropagation()
+          };
         });
       });
     }