@descope-ui/common 3.7.0 → 3.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "3.7.0",
+  "version": "3.7.2",
   "files": [
     "src"
   ],

package/src/componentsHelpers/index.js

@@ -30,6 +30,8 @@ export const observeAttributes = (
   });
 
   observer.observe(ele, { attributes: true });
+
+  return { disconnect: () => observer.disconnect() };
 };
 
 // calling the callback with this object: { addedNodes, removedNodes }
@@ -79,13 +81,12 @@ export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
 
-export const forwardAttrs = (source, dest, options = {}) => {
+export const forwardAttrs = (source, dest, options = {}) =>
   observeAttributes(
     source,
     createSyncAttrsCb(source, dest, options.mapAttrs),
     options,
   );
-};
 
 export const forwardProps = (src, target, props = []) => {
   if (!props.length) return;
@@ -98,7 +99,6 @@ export const forwardProps = (src, target, props = []) => {
             return src[prop];
           },
           set(v) {
-            // eslint-disable-next-line no-param-reassign
             src[prop] = v;
           },
         },
@@ -113,8 +113,9 @@ export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
   let style;
 
   try {
+    // eslint-disable-next-line no-undef
     style = new CSSStyleSheet();
-  } catch (e) {
+  } catch {
     // fallback for browsers that don't support CSSStyleSheet
     return generateStyleTagFallback(cssString, ref, { prepend });
   }

package/src/componentsMixins/mixins/index.js

@@ -16,3 +16,4 @@ export { connectorMixin } from './connectorMixin';
 export { createDynamicDataMixin } from './createDynamicDataMixin';
 export { activeableMixin } from './activeableMixin';
 export { inputOverrideValidConstraintsMixin } from './inputOverrideValidConstraintsMixin';
+export { stretchMixin } from './stretchMixin';

package/src/componentsMixins/mixins/stretchMixin.js

@@ -0,0 +1,48 @@
+// stretchMixin — manages the `[stretch]` attribute as a pure layout signal.
+// Consumers own the visual implementation (`:host([stretch])` CSS in their
+// own init styles, theme rules, etc.).
+//
+// triggers — for leaf components that own a "full size" attribute.
+//   Each entry maps an attribute/value pair; when the attribute matches the
+//   value, `[stretch]` is toggled on the host.
+//   Example: stretchMixin({ triggers: [{ attr: 'full-width', value: 'true' }] })
+//   Use on components like descope-button that expose a full-width prop.
+//
+// Propagating `[stretch]` from slotted children (e.g. for anchored components)
+// is the consumer's responsibility. descope-anchored implements this correctly
+// via per-anchor MutationObservers on assignedElements({ flatten: true }),
+// which also handles React props set after init.
+
+export const stretchMixin =
+  ({ triggers = [] } = {}) =>
+  (superclass) =>
+    class StretchMixinClass extends superclass {
+      static get observedAttributes() {
+        return [
+          ...(superclass.observedAttributes || []),
+          ...triggers.map(({ attr }) => attr),
+        ];
+      }
+
+      get #shouldStretch() {
+        return triggers.some(
+          ({ attr, value }) => this.getAttribute(attr) === value,
+        );
+      }
+
+      #syncStretch = () => {
+        this.toggleAttribute('stretch', this.#shouldStretch);
+      };
+
+      attributeChangedCallback(name, oldVal, newVal) {
+        super.attributeChangedCallback?.(name, oldVal, newVal);
+        if (oldVal !== newVal) {
+          this.#syncStretch();
+        }
+      }
+
+      init() {
+        super.init?.();
+        this.#syncStretch();
+      }
+    };